Theme Basics

Use this board to ask questions or have discussions with other Rich Displays users.
Post Reply
TomM
New User
Posts: 6
Joined: Mon Nov 07, 2016 12:09 pm
First Name: Tom
Last Name: M
Company Name: Hal Leonard
Contact:

Theme Basics

Post by TomM »

I am trying to create a custom theme. I feel like I am missing the "basics" section of the documentation. I can't find any examples or instructions on how to do some basic stuff with a theme. I must be missing something.


Anyway...

I want to position some fields that are in every program we have (Title, Program name, Date, etc...). I understand how to create a new item:

Code: Select all

{
       "id": "TTLTEXT132",
       "field type": "output field",
	   "value": { 
			 "fieldName": "TTLTEXT132", 
			 "designValue": "[TTLTEXT132]", 
			 "dataType": "char", 
			 "formatting": "Text", 
			 "trimLeading": "false", 
			 "trimTrailing": "false", 
			 "textTransform": "none", 
			 "dataLength": "108" 
		 }, 
       "z index": "2",
       "locked in place": "true",
       "css class": "title-text"
    },

When I run "Convert Green Screen", it gives me two TTLTEXT132 fields. The default one that is created...somewhere, and the one I create with the code above. I want to hide or override the one that is created by default. How do I get a handle on that? I can't find anything in the documentation on how to do this, but I assume it must be pretty simple.


Thanks
User avatar
Glenn
Profound Logic Staff Member
Posts: 124
Joined: Mon Apr 14, 2014 4:08 pm
First Name: Glenn
Last Name: Hopwood
Company Name: Profound Logic Software
State / Province: Ohio
Country: United States
Contact:

Re: Theme Basics

Post by Glenn »

Tom,

If the fields already exist on the screen I would suggest that you move them as opposed to creating new ones.

For a few of the properties available in our themes (http://www.profoundlogic.com/docs/display/PUI/Themes), you can specify a function instead of a static value. One of the properties that will assist you is called "process field". Assuming you know the ID of the element you want to change (it appears from your message that you do) you could put the following code in your theme to move that element to wherever you'd like (I'm using the ID of the element you list in this sample).

Notes
- This code assumes you know the fixed position you'd like to put the element.
- The theme file is in JSON format so you need to pay special attention to the commas that should be located before and/or after this property

Code: Select all

  "process field": function(field, item, isSubfile, isWindow) {
    
    if (item["id"] == "TTLTEXT132") {
      // Change these values to where you want the element placed
      item["left"] = "10px";
      item["top"] = "10px";
    }

  }
TomM
New User
Posts: 6
Joined: Mon Nov 07, 2016 12:09 pm
First Name: Tom
Last Name: M
Company Name: Hal Leonard
Contact:

Re: Theme Basics

Post by TomM »

This is exactly what I was looking for.

Thanks!
Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest