Modifying Layouts

From Subscribe-HR Wiki Help
Jump to: navigation, search
(→‎Layouts Explained)
 
(6 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
__TOC__
 
__TOC__
  
−
==Layouts Explained==
+
=Layouts Explained=
 
The Layout is what defines what elements appear and their position on the page.
 
The Layout is what defines what elements appear and their position on the page.
 
You are required to have an Object and Elements created before you can use the Layout.
 
You are required to have an Object and Elements created before you can use the Layout.
−
<br>
 
−
<br>
 
−
Once you have the Object and Elements created, you simply drag the elements from the fields list onto the page and position them. Save the Layout and you are done.
 
−
<br>
 
−
<br>
 
−
[[File:New_Heading.png]]
 
  
−
===Modifying Layouts===
+
You can create multiple layouts within a single object however, there can only be one layout of type <b>Main</b>, which is the one that is used on forms in the system. Any other alyout created in thee same object can only be used for surveys and dashboard content.
−
# After logging into the Subscribe-HR portal, select the Development TAB.
+
−
# Select the Objects folder.
+
−
# Select the Object you wish to modify the Layout of<br>If you wish to create a new object please see the documentation [[Creating-new-objects-in-Subscribe-HR|Creating New Objects]] and [[Creating-new-elements-in-Subscribe-HR|Creating New Elements]]
+
−
# Select the Layout sub folder.<br>You should notice a General Tab box in the centre of the screen, an Actions box and Fields box. The General Tab box is your main page.
+
−
# Select and drag one of the fields from the '''Fields''' box into the General Tab box.<br>If you do not see any elements in the Fields box you have not create any new elements for this object, or the elements have been placed on another layout.
+
−
# Select the Save layout option from the Actions box.
+
−
<br>
+
−
<br>
+
−
You can also add Headings and Custom HTML into Layouts. This allows you to break the form up into sections (Headings) and also create custom sections using XML and HTML. The "Custom HTML" tool is used in combination with the existing Create and Drop facility.
+
  
−
===New Heading===
+
<b>You must select the Save button or your changes will not be reflected.</b>
−
To add a heading.
+
−
<br>
+
−
<br>
+
−
# Click New Heading
+
−
# Drag the heading to where you would like it in the form
+
−
# Insert Text into the heading
+
−
# Save Chanes when complete
+
  
−
<br>
+
==Creating a New Layout==
−
<br>
+
# After logging into the Subscribe-HR portal, select the <b>Development</b> TAB.
 +
# Select the <b>Objects</b> folder.
 +
# Select the Object you wish to modify
 +
# Select the <b>Layout</b> SubFolder.<br>
 +
# Select the <b>Create New</b> button on the top left.
 +
# Enter the name of your custom layout. <b>Note:</b> this is not visible to the user and is used solely to distinguish between multiple layouts. 
 +
# Select <b>JavaScript</b> and enter your JavaScript into the editor.
 +
# Select the green <b>Save</b> button on the top right side of the page.
  
−
[[File:Custom_HTML.jpg]]
+
==Modifying Layouts==
 +
# After logging into the Subscribe-HR portal, select the <b>Development</b> TAB.
 +
# Select the <b>Objects</b> folder.
 +
# Select the Object you wish to modify the Layout of.<br>If you wish to create a new object please see the documentation [[Creating-new-objects-in-Subscribe-HR|Creating New Objects]] and [[Creating-new-elements-in-Subscribe-HR|Creating New Elements]].
 +
# Select the <b>Layout</b> SubFolder.<br>
 +
# select the layout you wish to edit.
 +
# Select and drag the elements in the order you wish them to appear in the record.
 +
# Select <b>Remove</b> at the bottom left of each field to hide it from view.
 +
# Select <b>Add Field</b> to make an additional element viewable in the record. To select which field is displayed, click the drop down and make a selection. 
 +
# Select <b>Add Heading</b> to separate fields with the heading you enter, on the same tab/page.
 +
# Select <b>Add HTML</b> to add a field that accepts text in HTML format.
 +
# Select the green <b>Save</b> button on the top right side of the page.
  
 +
====New tab====
 +
By selecting the <b>Add Tab</b> option at the bottom of the page, you are creating a new page off the General page under the same Object. This is accessible via a TAB that is present on the top of the General page.
 
<br>
 
<br>
−
<br>
+
You should notice that an empty page appears below the General page on the Layout screen. The newly created TAB will not be saved unless the page contains at least one element.
 +
# Select the <b>Add Tab</b> option, located at the very bottom of the layout page.
 +
# Enter the name of the tab e.g. Safety
 +
# Select <b>Add Field</b> and select the field that you want to appear by clicking the drop down and choosing on of the options.
 +
# Select the green <b>Save</b> button on the top right side of the page.
 +
 
 +
====Add Heading====
 +
To add a heading:
 +
# Select the <b>Add heading</b> option.
 +
# Drag the heading to where you would like it in the form.
 +
# Insert Text into the heading.
 +
# Select the green <b>Save</b> button on the top right side of the page.
  
−
===Custom HTML===
+
====Custom HTML====
 
Custom HTML can be used to create totally custom section where you can change the layout the fields in the form. TO add fields, you will need to write the field name into the HTML. The field names can be found in the Developer Tool, by clicking on the element name and use the "Element Field Name". Please not that this tool is for more Technically Orientated users.
 
Custom HTML can be used to create totally custom section where you can change the layout the fields in the form. TO add fields, you will need to write the field name into the HTML. The field names can be found in the Developer Tool, by clicking on the element name and use the "Element Field Name". Please not that this tool is for more Technically Orientated users.
−
<br>
+
# Select the <b>Add HTML</b> button.
−
<br>
+
# Move the Custom area around in the form to the desired location.
−
# Click on "Custom HTML"
+
# Type in the required HTML.
−
# Move the Custom area around in the form to the desired location
+
# Select the green <b>Save</b> button on the top right side of the page.
−
# Type in the require HTML
+
−
# Click Save
+
  
−
===The Actions Box===
+
====Edit JavaScript====
−
The Actions box provides 3x actions that can be used within these screens. '''New tab''', '''Save layout''' and '''Edit javascript'''.
+
The Edit JavaScript option allows you to add some custom JavaScript to a form. This option loads a JavaScript editor in which you can write your custom JavaScript.
 +
# Select the <b>JavaScript</b> option.
 +
# Enter your JavaScript into the editor.
 +
# Select the green <b>Save</b> button on the top right side of the page.
 
<br>
 
<br>
−
'''New tab'''
 
−
<br>
 
−
By selecting the '''New tab''' option you are creating a new page off the General page under the same Object. This is accessible via a TAB that is present on the General page.
 
−
<br>
 
−
You should notice that an empty page appears below the General page on the Layout screen. The newly created TAB will not be saved unless the page contains at least one element.
 
  
−
# Select the New tab option.
+
<!--===The Fields Box===
−
# Select and drag one field from the Fields box to the TAB.
+
−
# Next to the word '''Tab''' in the form enter a name for the TAB.
+
−
# Select the Save layout option.
+
−
 
+
−
'''Save layout'''
+
−
<br>
+
−
The Save layout option is your save button. Whenever you make a change and move a field to another screen, remove a field, add a field.
+
−
<br>
+
−
'''You must select the Save layout option or your changes will no be reflected anywhere.'''
+
−
 
+
−
'''Edit javascript'''
+
−
<br/>
+
−
The Edit javascript option allows you to add some custom javascript to a form. This option loads a javascript editor in which you can write your custom javascript.
+
−
 
+
−
# Select the Edit javascript option.
+
−
# Enter your javascript into the editor.
+
−
# Select the Save layout option.
+
−
<br/>
+
−
[[File:Edit_javascript.gif]]
+
−
===The Fields Box===
+
 
The Fields box contains new elements that have been created but not yet placed in a layout.
 
The Fields box contains new elements that have been created but not yet placed in a layout.
 
<br>
 
<br>
−
To place an element in a layout simply select the desired field and drag this to
+
To place an element in a layout simply select the desired field and drag this to one of the TAB pages.
−
one of the TAB pages.
+
 
<br>
 
<br>
−
'''Removing an element from a TAB Page'''
+
<b>Removing an element from a TAB Page</b>
 
<br>
 
<br>
−
To remove an element from a TAB page select the X next to the element. This will place the element back into the '''Fields''' box.
+
To remove an element from a TAB page select the <b>X</b> next to the element. This will place the element back into the <b>Fields</b> box.
 
<br>
 
<br>
 +
<b>Moving an element to another TAB Page</b>
 
<br>
 
<br>
−
'''Moving an element to another TAB Page'''
+
To move an element from one TAB Page to another, simply select and drag the element to the other TAB Page, and select the <b>Save layout</b> option.
−
<br>
+
−
To move an element from one TAB Page to another, simply select and drag the element to the other TAB Page, and select the '''Save layout''' option.
+
  
 
==Changing the Sort Order of fields on the Search==
 
==Changing the Sort Order of fields on the Search==
−
# After logging into the Subscribe-HR portal, navigate to the '''Development TAB''' TAB.
+
# After logging into the Subscribe-HR portal, navigate to the <b>Development</b> TAB.
−
# Select the '''Objects''' folder.
+
# Select the <b>Objects</b> Folder.
−
# Select the object that you wish to modify.<br>Example: If you are modifying the order of fields on the Employee Property screen then search for '''Employee Property''' in the objects search.
+
# Select the object that you wish to modify.<br><i><b>Example:</b> If you are modifying the order of fields on the Employee Property screen then search for <b>Employee Property</b> in the objects search.</i>
−
# Select the Layout sub-folder
+
# Select the <b>Layout</b> SubFolder
 +
Elements that have been created and flagged with <b>Display on Search Results</b> will appear on the search form of the object. But when they appear they will appear in natural order.
 
<br>
 
<br>
−
Elements that have been created and flagged with '''Display on Search Results''' will appear on the search form of the object. But when they appear they will appear in natural order.
+
The <b>Search Fields Display Order</b> section under the Layout SubFolder allows the user to customise the order / position that the field appears on the search form.
 
<br>
 
<br>
−
[[File:element_flag_search.gif]]
+
By selecting the <b>Layout</b> SubFolder we can see the <b>Search Fields Display Order</b> section.<br>
−
<br>
+
The Search Fields Display Order section is automatically populated with any elements (fields) that are flagged with Display on Search Results.
−
<br>
+
−
[[File:display_order.gif]]
+
−
<br>
+
−
The '''Search Fields Display Order''' section under the Layout sub-folder allows the user to customise the order / position that the field appears on the search form.
+
−
<br>
+
−
<br>
+
−
By selecting the '''Layout''' sub-folder we can see the '''Search Fields Display Order''' section
+
−
* The Search Fields Display Order section is automatically populated with any elements (fields) that are flagged with Display on Search Results.
+
 
# To change the order that the elements appear in simply drag the desired element into position.
 
# To change the order that the elements appear in simply drag the desired element into position.
−
<br>
+
# Select [Save Layout].
−
[[File:search_on.gif]]<br>
+
The first element in the list will appear as the first on the search form from the left. -->
−
The first element in the list will appear as the first on the search form from the left.
+
−
<br>
+
  
−
<br>
+
<br><br>[[File:subscribehr_logo.gif]]
−
[[File:subscribehr_logo.gif]]
+

Latest revision as of 03:56, 11 December 2018

Layouts Explained

The Layout is what defines what elements appear and their position on the page. You are required to have an Object and Elements created before you can use the Layout.

You can create multiple layouts within a single object however, there can only be one layout of type Main, which is the one that is used on forms in the system. Any other alyout created in thee same object can only be used for surveys and dashboard content.

You must select the Save button or your changes will not be reflected.

Creating a New Layout

  1. After logging into the Subscribe-HR portal, select the Development TAB.
  2. Select the Objects folder.
  3. Select the Object you wish to modify
  4. Select the Layout SubFolder.
  5. Select the Create New button on the top left.
  6. Enter the name of your custom layout. Note: this is not visible to the user and is used solely to distinguish between multiple layouts.
  7. Select JavaScript and enter your JavaScript into the editor.
  8. Select the green Save button on the top right side of the page.

Modifying Layouts

  1. After logging into the Subscribe-HR portal, select the Development TAB.
  2. Select the Objects folder.
  3. Select the Object you wish to modify the Layout of.
    If you wish to create a new object please see the documentation Creating New Objects and Creating New Elements.
  4. Select the Layout SubFolder.
  5. select the layout you wish to edit.
  6. Select and drag the elements in the order you wish them to appear in the record.
  7. Select Remove at the bottom left of each field to hide it from view.
  8. Select Add Field to make an additional element viewable in the record. To select which field is displayed, click the drop down and make a selection.
  9. Select Add Heading to separate fields with the heading you enter, on the same tab/page.
  10. Select Add HTML to add a field that accepts text in HTML format.
  11. Select the green Save button on the top right side of the page.

New tab

By selecting the Add Tab option at the bottom of the page, you are creating a new page off the General page under the same Object. This is accessible via a TAB that is present on the top of the General page.
You should notice that an empty page appears below the General page on the Layout screen. The newly created TAB will not be saved unless the page contains at least one element.

  1. Select the Add Tab option, located at the very bottom of the layout page.
  2. Enter the name of the tab e.g. Safety
  3. Select Add Field and select the field that you want to appear by clicking the drop down and choosing on of the options.
  4. Select the green Save button on the top right side of the page.

Add Heading

To add a heading:

  1. Select the Add heading option.
  2. Drag the heading to where you would like it in the form.
  3. Insert Text into the heading.
  4. Select the green Save button on the top right side of the page.

Custom HTML

Custom HTML can be used to create totally custom section where you can change the layout the fields in the form. TO add fields, you will need to write the field name into the HTML. The field names can be found in the Developer Tool, by clicking on the element name and use the "Element Field Name". Please not that this tool is for more Technically Orientated users.

  1. Select the Add HTML button.
  2. Move the Custom area around in the form to the desired location.
  3. Type in the required HTML.
  4. Select the green Save button on the top right side of the page.

Edit JavaScript

The Edit JavaScript option allows you to add some custom JavaScript to a form. This option loads a JavaScript editor in which you can write your custom JavaScript.

  1. Select the JavaScript option.
  2. Enter your JavaScript into the editor.
  3. Select the green Save button on the top right side of the page.





Subscribehr logo.gif

Retrieved from "https://wiki.subscribe-hr.com.au/index.php?title=Modifying-screen-layouts-in-Subscribe-HR&oldid=6635"