AgileApps Support Wiki Pre Release

Difference between revisions of "Display Styles"

From AgileApps Support Wiki
imported>Aeric
imported>Aeric
Line 19: Line 19:
*This is the default display style  
*This is the default display style  
|}
|}
===Accordion Layout===
{| border="0" cellpadding="5" cellspacing="0"
|-valign="top"
|[[File:accordion.gif|none|thumb|Accordion]]
|
*Each section is expanded (like an accordion) when the section heading is clicked
*In add and edit modes, you can advance to the next section by clicking the Continue button
*One section can be open at any time
|}
<!--
===Full Accordion===
{| border="0" cellpadding="5" cellspacing="0"
|-valign="top"
|[[File:Fullaccordion-edit.gif|none|thumb|Full Accordion]]
|
*Each section is expanded (like an accordion) when the section heading is clicked
*Sections can be viewed in any order, by clicking on the section heading
*Click the [Continue] button to move to the next section
*One section can be open at any time
*Details of each section are displayed in the sidebar
|}
===Conditional Accordion===
{| border="0" cellpadding="5" cellspacing="0"
|-valign="top"
|[[File:Conditionalaccordion.gif|none|thumb|Conditional Accordion]]
|
*Each section is expanded (like an accordion) when the section heading is clicked
*Sections must be viewed in order, first to last, by clicking the [Continue] button
*One section can be open at any time
*Details of each section are displayed in the sidebar
*To get to a previous section, click the first (top) section heading
|}
-->


===Horizontal Tabbed===
===Horizontal Tabbed===
Line 64: Line 28:
*Navigate to sections by clicking on a tab  
*Navigate to sections by clicking on a tab  
|}
|}
 
{{#ifeq {{SKIN}} | {{HD}} |
| LJ Apps
===Wizard===
===Wizard===
{| border="0" cellpadding="5" cellspacing="0"
{| border="0" cellpadding="5" cellspacing="0"
Line 74: Line 39:
*Navigate to sections by clicking the [Previous] or [Next] buttons  
*Navigate to sections by clicking the [Previous] or [Next] buttons  
|}
|}
===Vertical Tabbed===
{| border="0" cellpadding="5" cellspacing="0"
|-valign="top"
|[[File:Verticaltabbed.gif|none|thumb|Vertical Tabbed]]
|
*Displays sections as vertical tabs
*Information in the first section (top section of the [[Form]]) persists in each tab
*Navigate to sections by clicking on a tab
*Sections containing required fields are highlighted with an asterisk (<tt>*</tt>)


'''Note:''' In Views, Related Information is displayed as vertical tabs, Quick Links are not displayed
'''Note:''' In Views, Related Information is displayed as vertical tabs, Quick Links are not displayed
|}
|}
 
}}
==Available Display Styles/Action Combinations==
==Available Display Styles/Action Combinations==
{| border="1" cellpadding="5" cellspacing="0"  
{| border="1" cellpadding="5" cellspacing="0"  
Line 97: Line 52:
*[[#Sectional|Sectional]]
*[[#Sectional|Sectional]]
*[[#Horizontal Tabbed|Horizontal Tabbed]]
*[[#Horizontal Tabbed|Horizontal Tabbed]]
*[[#Accordion Layout|Accordion Layout]]
*[[#Vertical Tabbed|Vertical Tabbed]] (Related Information is displayed as vertical tabs, Quick Links are not displayed)
|-
|-
|Adding a Record
|Adding a Record
Line 104: Line 57:
*[[#Sectional|Sectional]]
*[[#Sectional|Sectional]]
*[[#Horizontal Tabbed|Horizontal Tabbed]]
*[[#Horizontal Tabbed|Horizontal Tabbed]]
*[[#Accordion Layout|Accordion Layout]]
<!--
*[[#Conditional Accordion|Conditional Accordion]]
-->
*[[#Wizard|Wizard]]
*[[#Wizard|Wizard]]
*[[#Vertical Tabbed|Vertical Tabbed]]
|-
|-
|Editing a Record
|Editing a Record
Line 115: Line 63:
*[[#Sectional|Sectional]]
*[[#Sectional|Sectional]]
*[[#Horizontal Tabbed|Horizontal Tabbed]]
*[[#Horizontal Tabbed|Horizontal Tabbed]]
*[[#Accordion Layout|Accordion Layout]]
<!--
*[[#Conditional Accordion|Conditional Accordion]]
-->
*[[#Wizard|Wizard]]
*[[#Wizard|Wizard]]
*[[#Vertical Tabbed|Vertical Tabbed]]
|-
|-
|Viewing Related Information in a Record
|Viewing Related Information in a Record

Revision as of 19:07, 29 March 2013

Display Styles visually enhance the user experience, providing the ability to configure Forms into optional sections and related information - users can then focus on data entry or access to information. Customize Display Styles to match the action (when Viewing, Adding or Editing a record) or define how to view Related information.

Available Display Styles

The following examples describe how these Display Styles can be used.

Considerations

Sectional

Sectional
  • Displays the Basic Information, followed by Related Information sections in a full page
  • This is the default display style

Horizontal Tabbed

Horizontal Tabbed
  • Displays sections as horizontal tabs
  • Navigate to sections by clicking on a tab

{{#ifeq HD | ServiceDesk | | LJ Apps

Wizard

Wizard first section
Click the Previous/Next buttons to move between sections
Wizard last section
  • Displays a single section at a time
  • Navigate to sections by clicking the [Previous] or [Next] buttons

Note: In Views, Related Information is displayed as vertical tabs, Quick Links are not displayed |} }}

Available Display Styles/Action Combinations

When... Choose one of these formats...
Viewing a Record
Adding a Record
Editing a Record
Viewing Related Information in a Record
Retrieved from "https://agileappscloud.info/aadev-src/index.php?title=Display_Styles&oldid=7793"