Difference between revisions of "GalleryView Section Attributes"

From Lianjapedia
Jump to: navigation, search
(→‎UI Presentation Rules)
 
(48 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
==See Also==
+
=Overview=
−
[[GalleryView Options]]
+
GalleryView Sections are used to display a gallery of Tiles. Clicking on a Tile automatically displays a full-section Content panel.
 +
{{DISPLAYTITLE:GalleryView Section}}
 +
[[File:GalleryView_section.png|middle|758px|link=]]
 +
 
 +
You build Apps in Lianja App Builder visually using the [[:Category:Page_Builder|Page Builder]].
 +
 
 +
If you have not yet done so please read  [[Understanding_the_Lianja_App_Architecture|Understanding the Lianja Architecture]] and also [[Lianja_is_all_about_ART|Understanding ART]] to better understand this article.
 +
 
 +
An App consists of pages. Pages are made up of Sections. Form sections are made up of FormItems. We call these collectively "UI Elements" or "Visual Elements".
 +
 
 +
==Setting Attributes Declaratively==
 +
 
 +
You adjust the appearance and behavior of each UI Element in the '''Attributes''' Tab of the [[:Category:App_Inspector|App Inspector]].
 +
 
 +
[[{{ns:file}}:bm-attributes.png|800px|left|border|link={{filepath:bm-attributes.png}}|Attributes]]
 +
<br clear=all>
 +
 
 +
The attributes available consist of some common ones as well as some specific to the UI Element being inspected.
  
−
==Getting and Setting Attributes==
+
==Getting and Setting Attributes Programmatically==
 
The '''setAttribute(name, value)''' method can be used to set the value of an Attribute:
 
The '''setAttribute(name, value)''' method can be used to set the value of an Attribute:
  
−
<pre>Lianja.get("sectionid").setAttribute("title","Section1")</pre>
+
<pre>Lianja.get("pageid.sectionid").setAttribute("title","Section1")</pre>
  
−
Note: the shortened form '''setAttr(name,value)''' is also available.
+
Note: on the desktop, the shortened form '''setAttr(name,value)''' is also available.
  
 
The '''getAttribute(name)''' method can be used to get the value of an Attribute:
 
The '''getAttribute(name)''' method can be used to get the value of an Attribute:
  
−
<pre>cTitle = Lianja.get("sectionid").getAttribute("title")</pre>
+
<pre>cTitle = Lianja.get("pageid.sectionid").getAttribute("title")</pre>
  
−
Note: the shortened form '''getAttr(name)''' is also available.
+
Note: on the desktop, the shortened form '''getAttr(name)''' is also available.
  
 +
=See Also=
 +
[[GalleryView Options]]
 +
 +
Demo Apps (included in the Lianja App Builder distribution):
 +
* Lianja Galleryview Demo (example_galleryview)
 +
 +
=Attributes=
 
==Details==
 
==Details==
 
{| class="wikitable" width="100%"
 
{| class="wikitable" width="100%"
 
!width="20%"|Attribute
 
!width="20%"|Attribute
−
!width="80%"|Description
+
!width="45%"|Description
 +
!width="25%"|Name
 +
!width="10%"|Type
 
|-
 
|-
 
|valign="top"|[[Details Attributes#Name|Name]]||The name for this section (unique to the page)
 
|valign="top"|[[Details Attributes#Name|Name]]||The name for this section (unique to the page)
 +
|valign="top"|id||valign="top"|Character
 +
|-
 +
|valign="top"|[[Details Attributes#Full name|Full name]]||The full name for this section including its parent page, e.g. page1.section1
 +
|valign="top"|fullid||valign="top"|Character
 +
|-
 +
|valign="top"|[[Details Attributes#Alias name|Alias name]]||The alias name for this section
 +
|valign="top"|aliasid||Character
 +
|-
 +
|valign="top"|[[Dashboard Sections|Dashboard group]]||The dashboard section that this section belongs to.  From v5.2.
 +
|valign="top"|horizontalgroup||valign="top"|Character
 +
|-
 +
|valign="top"|[[Dashboard Sections|Horizontal stretch]]||The horizontal % stretch factor that this section should occupy.  From v5.2.
 +
|valign="top"|horizontalgroupstretchfactor||valign="top"|Character
 +
|-
 +
|valign="top"|[[Dashboard Sections|Vertical stretch]]||The vertical % stretch factor that this section should occupy.  From v5.2.
 +
|valign="top"|verticalgroupstretchfactor||valign="top"|Character
 +
|-
 +
|valign="top"|[[Details Attributes#App Doc|App Doc]]||The App Doc file for this section.  This will be included in the [[App Doc]] when it is generated.
 +
|valign="top"|appdoc||valign="top"|Character
 +
|-
 +
|valign="top"|[[Details Attributes#MetaData version|MetaData version]]||The MetaData version number.  You can set this in the setupUI hook to prevent MetaData being applied multiple times.
 +
|valign="top"|metaDataVersion||valign="top"|Int
 
|-
 
|-
 
|valign="top"|[[MetaTypes|Meta types]]||A comma separated list of metatype names
 
|valign="top"|[[MetaTypes|Meta types]]||A comma separated list of metatype names
 +
|valign="top"|metatypes||valign="top"|Character
 +
|-
 +
|valign="top"|[[Details Attributes#Custom Props|Custom Props]]||A ';' separated list of custom prop key pairs, e.g. name=barry;company=lianja<br>From v5.3.
 +
|valign="top"|customprops||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Details Attributes#Type|Type]]||The type of section: galleryview (readonly)
 
|valign="top"|[[Details Attributes#Type|Type]]||The type of section: galleryview (readonly)
 +
|valign="top"|type||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Details Attributes#Caption|Caption]]||The section caption displayed in the section header
 
|valign="top"|[[Details Attributes#Caption|Caption]]||The section caption displayed in the section header
 +
|valign="top"|title||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Details Attributes#Database|Database]]||The database for this section
 
|valign="top"|[[Details Attributes#Database|Database]]||The database for this section
 +
|valign="top"|database||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Details Attributes#Table|Table]]||The table for this section
 
|valign="top"|[[Details Attributes#Table|Table]]||The table for this section
 +
|valign="top"|table||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Details Attributes#Height|Height]]||The section height
 
|valign="top"|[[Details Attributes#Height|Height]]||The section height
 +
|valign="top"|height||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Details Attributes#Fixed height|Fixed height]]||Fix the section height (True &#124; False)
 
|valign="top"|[[Details Attributes#Fixed height|Fixed height]]||Fix the section height (True &#124; False)
 +
|valign="top"|fixedHeight||valign="top"|Boolean
 
|-
 
|-
−
|valign="top"|[[Details Attributes#Auto layout percent|Auto layout percent]]||Auto layout percentage of page size.  If set to 0, then all sections on a page are resized to an equal height
+
|valign="top"|[[Details Attributes#Auto layout percent|Auto layout percent]]||Auto layout percentage of page size.  If set to 0, then all sections on a page are resized to an equal height.
 +
|valign="top"|autoLayoutPercentage||valign="top"|Int
 
|-
 
|-
 
|}
 
|}
Line 43: Line 102:
 
{| class="wikitable" width="100%"
 
{| class="wikitable" width="100%"
 
!width="20%"|Attribute
 
!width="20%"|Attribute
−
!width="80%"|Description
+
!width="45%"|Description
 +
!width="25%"|Name
 +
!width="10%"|Type
 
|-
 
|-
 
|valign="top"|[[Section Appearance#Margin|Margin]]||Margin size around the section
 
|valign="top"|[[Section Appearance#Margin|Margin]]||Margin size around the section
 +
|valign="top"|margin||valign="top"|Int
 
|-
 
|-
 
|valign="top"|[[Section Appearance#Add spacer at bottom|Add spacer at bottom]]||Add spacer at bottom of section (True &#124; False)
 
|valign="top"|[[Section Appearance#Add spacer at bottom|Add spacer at bottom]]||Add spacer at bottom of section (True &#124; False)
 +
|valign="top"|spacerVisible||valign="top"|Boolean
 
|-
 
|-
 
|}
 
|}
Line 54: Line 117:
 
{| class="wikitable" width="100%"
 
{| class="wikitable" width="100%"
 
!width="20%"|Attribute
 
!width="20%"|Attribute
−
!width="80%"|Description
+
!width="45%"|Description
 +
!width="25%"|Name
 +
!width="10%"|Type
 
|-
 
|-
 
|valign="top"|[[Section Header#Hide header|Hide header]]||Hide section header at runtime(True &#124; False)
 
|valign="top"|[[Section Header#Hide header|Hide header]]||Hide section header at runtime(True &#124; False)
 +
|valign="top"|hideHeaderAtRuntime||valign="top"|Boolean
 
|-
 
|-
−
|valign="top"|[[Section Header#Hide actionbar|Hide actionbar]]||Hide actionbar buttons in the section header (True &#124; False)
+
|valign="top"|[[Section Header#Hide actionbar|Hide actionbar]]||Hide actionbar when stacked section is activated at runtime<br>(True &#124; False)
−
|-
+
|valign="top"|hideActionBarAtRuntime||valign="top"|Boolean
−
|valign="top"|[[Section Header#Header CSS style|Header CSS style]]||CSS style (separate attributes with ; or use app:/filename.css)
+
 
|-
 
|-
 
|valign="top"|[[Section Header#Header icon|Header icon]]||The image for the Header (png &#124; jpg &#124; gif).<br>Use app:/imagename.ext for app specific images.
 
|valign="top"|[[Section Header#Header icon|Header icon]]||The image for the Header (png &#124; jpg &#124; gif).<br>Use app:/imagename.ext for app specific images.
 +
|valign="top"|headerIcon||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Gradients#Gradient colors|Gradient colors]]||Render the Header background color as a gradient (True &#124; False)
 
|valign="top"|[[Gradients#Gradient colors|Gradient colors]]||Render the Header background color as a gradient (True &#124; False)
 +
|valign="top"|headerGradient||valign="top"|Boolean
 
|-
 
|-
 
|valign="top"|[[Gradients#Gradient type|Gradient type]]||Specify the gradient type
 
|valign="top"|[[Gradients#Gradient type|Gradient type]]||Specify the gradient type
 +
|valign="top"|headerGradientType||valign="top"|Int
 
|-
 
|-
 
|valign="top"|[[Gradients#Gradient start color|Gradient start color]]||Gradient start color
 
|valign="top"|[[Gradients#Gradient start color|Gradient start color]]||Gradient start color
 +
|valign="top"|headerFromColor||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Gradients#Gradient end color|Gradient end color]]||Gradient end color
 
|valign="top"|[[Gradients#Gradient end color|Gradient end color]]||Gradient end color
 +
|valign="top"|headerToColor||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Section Header#Show Print button|Show Print button]]||Show Print button in the section header (True &#124; False)
 
|valign="top"|[[Section Header#Show Print button|Show Print button]]||Show Print button in the section header (True &#124; False)
 +
|valign="top"|showPrintButton||valign="top"|Boolean
 +
|-
 +
|valign="top"|[[Section Header#Show Edit button|Show Edit button]]||Show Edit button in the section header (True &#124; False)
 +
|valign="top"|showEditButton||valign="top"|Boolean
 
|-
 
|-
 
|valign="top"|[[Section Header#Hide custom search icon|Hide custom search icon]]||Hide the custom search icon (True &#124; False)
 
|valign="top"|[[Section Header#Hide custom search icon|Hide custom search icon]]||Hide the custom search icon (True &#124; False)
 +
|valign="top"|hideCustomSearchIcon||valign="top"|Boolean
 +
|-
 +
|valign="top"|[[Section Header#Show Custom search dialog|Show Custom search dialog]]||Show custom search dialog when custom search icon clicked (True &#124; False)
 +
|valign="top"|showcustomsearchdialog||valign="top"|Boolean
 +
|-
 +
|valign="top"|[[Section Header#Show custom search dialog panel|Show custom search dialog panel]]||Show custom search dialog panel when custom search icon clicked<br>(True &#124; False)
 +
|valign="top"|showcustomsearchdialogpanel||valign="top"|Boolean
 
|-
 
|-
 
|valign="top"|[[Section Header#Show info tips icon|Show info tips icon]]||Show the info tips icon in the section header (True &#124; False)
 
|valign="top"|[[Section Header#Show info tips icon|Show info tips icon]]||Show the info tips icon in the section header (True &#124; False)
 +
|valign="top"|showInfoTipsIcon||valign="top"|Boolean
 
|-
 
|-
 
|valign="top"|[[Section Header#Show help icon|Show help icon]]||Show the help icon in the section header (True &#124; False)
 
|valign="top"|[[Section Header#Show help icon|Show help icon]]||Show the help icon in the section header (True &#124; False)
 +
|valign="top"|showHelpIcon||valign="top"|Boolean
 
|-
 
|-
 
|valign="top"|[[Section Header#Help topic|Help topic]]||Help topic to display when the help icon is clicked in the section header
 
|valign="top"|[[Section Header#Help topic|Help topic]]||Help topic to display when the help icon is clicked in the section header
 +
|valign="top"|helpTopic||valign="top"|Character
 +
|-
 +
|}
 +
 +
==Custom Header Style==
 +
{| class="wikitable" width="100%"
 +
!width="20%"|Attribute
 +
!width="45%"|Description
 +
!width="25%"|Name
 +
!width="10%"|Type
 +
|-
 +
|valign="top"|[[Section Header#Use custom header style|Use custom header style]]||Use a custom header style (True &#124; False)
 +
|valign="top"|headercustomstyle||valign="top"|Boolean
 +
|-
 +
|valign="top"|[[Section Header#Header background color|Header background color]]||Header background color
 +
|valign="top"|headerbackcolor||valign="top"|Character
 +
|-
 +
|valign="top"|[[Section Header#Header foreground color|Header foreground color]]||Header foreground color
 +
|valign="top"|headerforecolor||valign="top"|Character
 +
|-
 +
|valign="top"|[[Section Header#Header bottom border|Header bottom border]]||Display the header bottom border (True &#124; False)
 +
|valign="top"|headerbottomborder||valign="top"|Boolean
 +
|-
 +
|valign="top"|[[Section Header#Header bottom border height|Header bottom border height]]||Height (in pixels) of the header bottom border (if displayed)
 +
|valign="top"|headerbottomborderheight||valign="top"|Int
 +
|-
 +
|valign="top"|[[Section Header#Header bottom border color|Header bottom border color]]||Header bottom border color
 +
|valign="top"|headerbottombordercolor||valign="top"|Character
 +
|-
 +
|valign="top"|[[Section Header#Show record count badge|Show record count badge]]||Show the record count badge in the section header (True &#124; False).
 +
|valign="top"|showreccount||valign="top"|Boolean
 +
|-
 +
|}
 +
 +
==Visual Component Details==
 +
{| class="wikitable" width="100%"
 +
!width="20%"|Attribute
 +
!width="45%"|Description
 +
!width="25%"|Name
 +
!width="10%"|Type
 +
|-
 +
|valign="top"|[[Visual_Components#Component_library_3|Component library]]||This specifies the Component library where the component will be saved.
 +
|valign="top"|componentlib||valign="top"|Character
 +
|-
 +
|valign="top"|[[Visual_Components#Component_name_2|Component name]]||Save as this component name whenever the section is saved.
 +
|valign="top"|componentname||valign="top"|Character
 +
|-
 +
|valign="top"|[[Visual_Components#Component_author_2|Component author]]||The author of this component.
 +
|valign="top"|componentauthor||valign="top"|Character
 +
|-
 +
|valign="top"|[[Visual_Components#Component_version_2|Component version]]||The version of this component.
 +
|valign="top"|componentversion||valign="top"|Character
 +
|-
 +
|valign="top"|[[Visual_Components#Component_description_2|Component description]]||The description of this component.
 +
|valign="top"|componentdescription||valign="top"|Character
 +
|-
 +
|valign="top"|[[Visual_Components#Component_permissions_2|Component permissions]]||The permissions required for this component in Lianja Cloud App Builder.
 +
|valign="top"|componentpermissions||valign="top"|Character
 +
|-
 +
|valign="top"|[[Visual_Components#Component_width_2|Component width]]||The width of this component when activated as a Form.
 +
|valign="top"|componentwidth||valign="top"|Int
 +
|-
 +
|valign="top"|[[Visual_Components#Component_height_2|Component height]]||The height of this component when activated as a Form.
 +
|valign="top"|componentheight||valign="top"|Int
 
|-
 
|-
 
|}
 
|}
Line 87: Line 234:
 
{| class="wikitable" width="100%"
 
{| class="wikitable" width="100%"
 
!width="20%"|Attribute
 
!width="20%"|Attribute
−
!width="80%"|Description
+
!width="45%"|Description
 +
!width="25%"|Name
 +
!width="10%"|Type
 
|-
 
|-
 
|valign="top"|[[GalleryView Options#Tile caption|Tile caption]]||The name of the column in the table (or expression) containing the caption for each tile
 
|valign="top"|[[GalleryView Options#Tile caption|Tile caption]]||The name of the column in the table (or expression) containing the caption for each tile
 +
|valign="top"|galleryviewCaption||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[GalleryView Options#Tile category|Tile category]]||The name of the column in the table (or expression) containing the category caption for each tile
 
|valign="top"|[[GalleryView Options#Tile category|Tile category]]||The name of the column in the table (or expression) containing the category caption for each tile
 +
|valign="top"|galleryViewSubCaption||valign="top"|Character
 +
|-
 +
|valign="top"|[[GalleryView Options#Content title|Content title]]||The content title as an expression
 +
|valign="top"|galleryviewHeading||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[GalleryView Options#Content details|Content details]]||The name of the column in the table containing the content (typically a varchar/memo)
 
|valign="top"|[[GalleryView Options#Content details|Content details]]||The name of the column in the table containing the content (typically a varchar/memo)
 +
|valign="top"|galleryviewDetails||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[GalleryView Options#Custom library|Custom library]]||Custom library containing the Tile producer and Content producer delegates
 
|valign="top"|[[GalleryView Options#Custom library|Custom library]]||Custom library containing the Tile producer and Content producer delegates
 +
|valign="top"|galleryviewCustomLibrary||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[GalleryView Options#Tile producer|Tile producer]]||Delegate to call to render a custom tile.  <br>This should just output the HTML
 
|valign="top"|[[GalleryView Options#Tile producer|Tile producer]]||Delegate to call to render a custom tile.  <br>This should just output the HTML
 +
|valign="top"|galleryviewTileDelegate||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[GalleryView Options#Content producer|Content producer]]||Delegate to call to render the content.<br>This should just output the HTML
 
|valign="top"|[[GalleryView Options#Content producer|Content producer]]||Delegate to call to render the content.<br>This should just output the HTML
 +
|valign="top"|galleryviewContentDelegate||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[GalleryView Options#Filter|Filter]]||The filter expression that restricts which records will be included
 
|valign="top"|[[GalleryView Options#Filter|Filter]]||The filter expression that restricts which records will be included
 +
|valign="top"|galleryViewFilter||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[GalleryView Options#Order by|Order by]]||The orderby expression for the data in the GalleryView
 
|valign="top"|[[GalleryView Options#Order by|Order by]]||The orderby expression for the data in the GalleryView
 +
|valign="top"|galleryViewOrderBy||valign="top"|Character
 
|-
 
|-
 
|}
 
|}
Line 110: Line 270:
 
{| class="wikitable" width="100%"
 
{| class="wikitable" width="100%"
 
!width="20%"|Attribute
 
!width="20%"|Attribute
−
!width="80%"|Description
+
!width="45%"|Description
 +
!width="25%"|Name
 +
!width="10%"|Type
 
|-
 
|-
 
|valign="top"|[[Related Data#Parent section name|Parent section name]]||Name of related parent section
 
|valign="top"|[[Related Data#Parent section name|Parent section name]]||Name of related parent section
 +
|valign="top"|parentid||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Related Data#Automatically relate|Automatically relate]]||Automatically relate the child section (True &#124; False).  If this is unchecked then you need to manually relate it in the parentdatachanged delegate.
 
|valign="top"|[[Related Data#Automatically relate|Automatically relate]]||Automatically relate the child section (True &#124; False).  If this is unchecked then you need to manually relate it in the parentdatachanged delegate.
 +
|valign="top"|autoRelateChildSection||valign="top"|Boolean
 
|-
 
|-
 
|}
 
|}
Line 121: Line 285:
 
{| class="wikitable" width="100%"
 
{| class="wikitable" width="100%"
 
!width="20%"|Attribute
 
!width="20%"|Attribute
−
!width="80%"|Description
+
!width="45%"|Description
 +
!width="25%"|Name
 +
!width="10%"|Type
 
|-
 
|-
 
|valign="top"|[[Section Menus#Visible|Visible]]||Section menu visible (True &#124; False)
 
|valign="top"|[[Section Menus#Visible|Visible]]||Section menu visible (True &#124; False)
 +
|valign="top"|sectionMenuVisible||Boolean
 
|-
 
|-
 
|valign="top"|[[Section Menus#Height|Height]]||Section menu height
 
|valign="top"|[[Section Menus#Height|Height]]||Section menu height
 +
|valign="top"|sectionMenuHeight||Int
 
|-
 
|-
 
|valign="top"|[[Section Menus#Background color|Background color]]||Section menu background color
 
|valign="top"|[[Section Menus#Background color|Background color]]||Section menu background color
 +
|valign="top"|sectionMenuBackColor||Character
 
|-
 
|-
 
|valign="top"|[[Section Menus#Foreground color|Foreground color]]||Section menu foreground color
 
|valign="top"|[[Section Menus#Foreground color|Foreground color]]||Section menu foreground color
 +
|valign="top"|sectionMenuForeColor||Character
 +
|-
 +
|valign="top"|[[Section Menus#Custom menu panel|Custom menu panel]]||The .rsp or .jssp page used to create the custom menu panel.  This page should generate dynamic HTML5/JavaScript.
 +
|valign="top"|customSectionMenuPanel||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Section Menus#Custom menu|Custom menu]]||Section menu contents
 
|valign="top"|[[Section Menus#Custom menu|Custom menu]]||Section menu contents
 +
|valign="top"|customSectionMenu||Character
 
|-
 
|-
 
|valign="top"|[[Section Menus#Custom action|Custom action]]||Action to perform when a menu item is selected
 
|valign="top"|[[Section Menus#Custom action|Custom action]]||Action to perform when a menu item is selected
 +
|valign="top"|sectionMenuAction||Character
 
|-
 
|-
 
|}
 
|}
Line 140: Line 315:
 
{| class="wikitable" width="100%"
 
{| class="wikitable" width="100%"
 
!width="20%"|Attribute
 
!width="20%"|Attribute
−
!width="80%"|Description
+
!width="45%"|Description
 +
!width="25%"|Name
 +
!width="10%"|Type
 
|-
 
|-
 
|valign="top"|[[Section Search Panels#Visible|Visible]]||Section search panel visible (True &#124; False)
 
|valign="top"|[[Section Search Panels#Visible|Visible]]||Section search panel visible (True &#124; False)
 +
|valign="top"|searchPanelVisible||Boolean
 
|-
 
|-
 
|valign="top"|[[Section Search Panels#Height|Height]]||Section search panel height
 
|valign="top"|[[Section Search Panels#Height|Height]]||Section search panel height
 +
|valign="top"|searchPanelHeight||Int
 
|-
 
|-
 
|valign="top"|[[Section Search Panels#Background color|Background color]]||Section search panel background color
 
|valign="top"|[[Section Search Panels#Background color|Background color]]||Section search panel background color
 +
|valign="top"|searchPanelBackColor||Character
 
|-
 
|-
 
|valign="top"|[[Section Search Panels#Foreground color|Foreground color]]||Section search panel foreground color
 
|valign="top"|[[Section Search Panels#Foreground color|Foreground color]]||Section search panel foreground color
 +
|valign="top"|searchPanelForeColor||Character
 
|-
 
|-
 
|valign="top"|[[Section Search Panels#Auto create|Auto create]]||Automatically create search panel for all Section search fields
 
|valign="top"|[[Section Search Panels#Auto create|Auto create]]||Automatically create search panel for all Section search fields
 +
|valign="top"|searchPanelAutoCreate||Boolean
 
|-
 
|-
 
|valign="top"|[[Section Search Panels#Custom search panel|Custom search panel]]||The delegate used to create the custom search panel
 
|valign="top"|[[Section Search Panels#Custom search panel|Custom search panel]]||The delegate used to create the custom search panel
 +
|valign="top"|searchPanelAction||Character
 
|-
 
|-
 
|}
 
|}
Line 159: Line 342:
 
{| class="wikitable" width="100%"
 
{| class="wikitable" width="100%"
 
!width="20%"|Attribute
 
!width="20%"|Attribute
−
!width="80%"|Description
+
!width="45%"|Description
 +
!width="25%"|Name
 +
!width="10%"|Type
 
|-
 
|-
 
|valign="top"|[[Section Subtitles#Visible|Visible]]||Section subtitle visible (True &#124; False)
 
|valign="top"|[[Section Subtitles#Visible|Visible]]||Section subtitle visible (True &#124; False)
 +
|valign="top"|subtitleVisible||Boolean
 
|-
 
|-
 
|valign="top"|[[Section Subtitles#Caption|Caption]]||Section subtitle caption
 
|valign="top"|[[Section Subtitles#Caption|Caption]]||Section subtitle caption
 +
|valign="top"|subtitleCaption||Character
 
|-
 
|-
 
|valign="top"|[[Section Subtitles#Height|Height]]||Section subtitle height
 
|valign="top"|[[Section Subtitles#Height|Height]]||Section subtitle height
 +
|valign="top"|subtitleHeight||Int
 
|-
 
|-
 
|valign="top"|[[Section Subtitles#Background color|Background color]]||Section subtitle background color
 
|valign="top"|[[Section Subtitles#Background color|Background color]]||Section subtitle background color
 +
|valign="top"|subtitleBackColor||Character
 
|-
 
|-
 
|valign="top"|[[Section Subtitles#Foreground color|Foreground color]]||Section subtitle foreground color
 
|valign="top"|[[Section Subtitles#Foreground color|Foreground color]]||Section subtitle foreground color
 +
|valign="top"|subtitleForeColor||Character
 
|-
 
|-
 
|valign="top"|[[Section Subtitles#Font|Font]]||Section subtitle font
 
|valign="top"|[[Section Subtitles#Font|Font]]||Section subtitle font
 +
|valign="top"|subtitleFont||Int
 
|-
 
|-
 
|valign="top"|[[Section Subtitles#CSS style|CSS style]]||CSS style
 
|valign="top"|[[Section Subtitles#CSS style|CSS style]]||CSS style
 +
|valign="top"|subtitleCssStyle||Character
 
|-
 
|-
 
|}
 
|}
Line 180: Line 372:
 
{| class="wikitable" width="100%"
 
{| class="wikitable" width="100%"
 
!width="20%"|Attribute
 
!width="20%"|Attribute
−
!width="80%"|Description
+
!width="45%"|Description
 +
!width="25%"|Name
 +
!width="10%"|Type
 
|-
 
|-
 
|valign="top"|[[Section Footers#Visible|Visible]]||Section footer visible (True &#124; False)
 
|valign="top"|[[Section Footers#Visible|Visible]]||Section footer visible (True &#124; False)
 +
|valign="top"|footerVisible||Boolean
 
|-
 
|-
 
|valign="top"|[[Section Footers#Caption|Caption]]||Section footer caption
 
|valign="top"|[[Section Footers#Caption|Caption]]||Section footer caption
 +
|valign="top"|footerText||Character
 
|-
 
|-
 
|valign="top"|[[Section Footers#Height|Height]]||Section footer height
 
|valign="top"|[[Section Footers#Height|Height]]||Section footer height
 +
|valign="top"|footerHeight||Int
 
|-
 
|-
 
|valign="top"|[[Section Footers#Background color|Background color]]||Section footer background color
 
|valign="top"|[[Section Footers#Background color|Background color]]||Section footer background color
 +
|valign="top"|footerBackColor||Character
 
|-
 
|-
 
|valign="top"|[[Section Footers#Foreground color|Foreground color]]||Section footer foreground color
 
|valign="top"|[[Section Footers#Foreground color|Foreground color]]||Section footer foreground color
 +
|valign="top"|footerForeColor||Character
 +
|-
 +
|valign="top"|[[Section Footers#CSS style|CSS style]]||CSS style (separate attributes with ; or use app:/filename.css or specify CSS classes separated by spaces).
 +
|valign="top"|footercssstyle||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Section Footers#Custom menu|Custom menu]]||Section footer menu contents
 
|valign="top"|[[Section Footers#Custom menu|Custom menu]]||Section footer menu contents
 +
|valign="top"|customOptionsMenu||Character
 
|-
 
|-
 
|valign="top"|[[Section Footers#Custom action|Custom action]]||Action to perform when a footer menu item is selected
 
|valign="top"|[[Section Footers#Custom action|Custom action]]||Action to perform when a footer menu item is selected
 +
|valign="top"|customOptionsMenuAction||Character
 
|-
 
|-
 
|valign="top"|[[Section Footers#Footer button CSS|Footer button CSS]]||Footer button CSS style
 
|valign="top"|[[Section Footers#Footer button CSS|Footer button CSS]]||Footer button CSS style
 +
|valign="top"|footerButtonCss||Character
 
|-
 
|-
 
|valign="top"|[[Section Footers#Footer button width|Footer button width]]||Footer button width
 
|valign="top"|[[Section Footers#Footer button width|Footer button width]]||Footer button width
 +
|valign="top"|footerButtonWidth||Int
 
|-
 
|-
 
|}
 
|}
Line 205: Line 411:
 
{| class="wikitable" width="100%"
 
{| class="wikitable" width="100%"
 
!width="20%"|Attribute
 
!width="20%"|Attribute
−
!width="80%"|Description
+
!width="45%"|Description
 +
!width="25%"|Name
 +
!width="10%"|Type
 
|-
 
|-
 
|valign="top"|[[Accordion Behavior#Hide form NavBar|Hide form NavBar]]||Hide form Navigation Bar at runtime if this section is in an Accordion Stack (True &#124; False)
 
|valign="top"|[[Accordion Behavior#Hide form NavBar|Hide form NavBar]]||Hide form Navigation Bar at runtime if this section is in an Accordion Stack (True &#124; False)
 +
|valign="top"|hideFormNavBar||valign="top"|Boolean
 +
|-
 +
|valign="top"|[[Instant_Search#Hide_SearchBox|Hide SearchBox]]||Hide the Page Header Instant Search box when this section is selected in an Accordion Stack (True &#124; False).  From v5.4.
 +
|valign="top"|hidesearchbox||valign="top"|Boolean
 
|-
 
|-
 
|valign="top"|[[Section Appearance#Collapsable|Collapsable]]||The section is collapsible at runtime (True &#124; False)
 
|valign="top"|[[Section Appearance#Collapsable|Collapsable]]||The section is collapsible at runtime (True &#124; False)
 +
|valign="top"|collapsableAtRuntime||valign="top"|Boolean
 
|-
 
|-
 
|valign="top"|[[Accordion Behavior#Exclude from accordion|Exclude from accordion]]||The section is excluded from accordion behavior at runtime (True &#124; False)
 
|valign="top"|[[Accordion Behavior#Exclude from accordion|Exclude from accordion]]||The section is excluded from accordion behavior at runtime (True &#124; False)
 +
|valign="top"|excludeAccordionAtRuntime||valign="top"|Boolean
 
|-
 
|-
 
|}
 
|}
Line 218: Line 432:
 
{| class="wikitable" width="100%"
 
{| class="wikitable" width="100%"
 
!width="20%"|Attribute
 
!width="20%"|Attribute
−
!width="80%"|Description
+
!width="45%"|Description
 +
!width="25%"|Name
 +
!width="10%"|Type
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Scripting Language|Scripting language]]||The default scripting language for custom code in this section (Inherit &#124; Recital &#124; Visual FoxPro &#124; Python &#124; JavaScript &#124; PHP)
 
|valign="top"|[[Custom Delegates#Scripting Language|Scripting language]]||The default scripting language for custom code in this section (Inherit &#124; Recital &#124; Visual FoxPro &#124; Python &#124; JavaScript &#124; PHP)
 +
|valign="top"|scriptingLanguage||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Custom Library|Custom library]]||The filename of the library containing code for event handlers and custom procedures/functions
 
|valign="top"|[[Custom Delegates#Custom Library|Custom library]]||The filename of the library containing code for event handlers and custom procedures/functions
 +
|valign="top"|customLibrary||valign="top"|Character
 +
|-
 +
|valign="top"|[[Custom Delegates#Print|Print]]||The delegate for the Print event.<br>This is called when you click the 'Print' icon.
 +
|valign="top"|printAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Expanded|Expanded]]||The delegate for the Expanded event
 
|valign="top"|[[Custom Delegates#Expanded|Expanded]]||The delegate for the Expanded event
 +
|valign="top"|expandedAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Collapsed|Collapsed]]||The delegate for the Collapsed event
 
|valign="top"|[[Custom Delegates#Collapsed|Collapsed]]||The delegate for the Collapsed event
 +
|valign="top"|collapsedAction||valign="top"|Character
 +
|-
 +
|valign="top"|[[Custom Delegates#Hotkey|Hotkey]]||The delegate for the Hotkey event.
 +
|valign="top"|hotkeyAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Init|Init]]||The delegate for the Init event
 
|valign="top"|[[Custom Delegates#Init|Init]]||The delegate for the Init event
 +
|valign="top"|initAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Destroy|Destroy]]||The delegate for the Destroy event
 
|valign="top"|[[Custom Delegates#Destroy|Destroy]]||The delegate for the Destroy event
 +
|valign="top"|destroyAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Load|Load]]||The delegate for the Load event
 
|valign="top"|[[Custom Delegates#Load|Load]]||The delegate for the Load event
 +
|valign="top"|loadAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Ready|Ready]]||The delegate for the Ready event
 
|valign="top"|[[Custom Delegates#Ready|Ready]]||The delegate for the Ready event
 +
|valign="top"|readyAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Unload|Unload]]||The delegate for the Unload event
 
|valign="top"|[[Custom Delegates#Unload|Unload]]||The delegate for the Unload event
 +
|valign="top"|unloadAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Parent data changed|Parent data changed]]||The delegate for the ParentDataChanged event
 
|valign="top"|[[Custom Delegates#Parent data changed|Parent data changed]]||The delegate for the ParentDataChanged event
 +
|valign="top"|parentDataChangedAction||valign="top"|Character
 +
|-
 +
|valign="top"|[[Custom Delegates#Data Producer|Data Producer]]||The delegate for the DataProducer (used in Web Components).<br>From v6.1.
 +
|valign="top"|dataproduceraction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Timer|Timer]]||The delegate for the Timer event
 
|valign="top"|[[Custom Delegates#Timer|Timer]]||The delegate for the Timer event
 +
|valign="top"|timerAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Timer interval|Timer interval]]||The timer interval in seconds that the Timer event will be called at runtime
 
|valign="top"|[[Custom Delegates#Timer interval|Timer interval]]||The timer interval in seconds that the Timer event will be called at runtime
 +
|valign="top"|timerInterval||valign="top"|Int
 +
|-
 +
|valign="top"|[[Custom Delegates#State Changed|State Changed]]||The delegate for the Statechanged event.
 +
|valign="top"|stateChangedAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Custom footer menu|Custom footer menu]]||The delegate for the footer menu event
 
|valign="top"|[[Custom Delegates#Custom footer menu|Custom footer menu]]||The delegate for the footer menu event
 +
|valign="top"|customMenuAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Custom search command|Custom search command]]||The delegate for the search event
 
|valign="top"|[[Custom Delegates#Custom search command|Custom search command]]||The delegate for the search event
 +
|valign="top"|customSearch||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Custom section menu|Custom section menu]]||The delegate for the section menu event
 
|valign="top"|[[Custom Delegates#Custom section menu|Custom section menu]]||The delegate for the section menu event
 +
|valign="top"|customSectionMenuAction||valign="top"|Character
 
|-
 
|-
 
|}
 
|}
Line 255: Line 498:
 
{| class="wikitable" width="100%"
 
{| class="wikitable" width="100%"
 
!width="20%"|Attribute
 
!width="20%"|Attribute
−
!width="80%"|Description
+
!width="45%"|Description
 +
!width="25%"|Name
 +
!width="10%"|Type
 
|-
 
|-
−
|valign="top"|[[Users and Roles|Create roles]]||A comma separated list of roles that can perform create operations on data in the section
+
|valign="top"|[[Users and Roles|Create roles]]||A comma separated list of roles that can perform create operations on data in the section.
 +
|valign="top"|permcreate||valign="top"|Character
 
|-
 
|-
−
|valign="top"|[[Users and Roles|Read roles]]||A comma separated list of roles that can read (and view) the section
+
|valign="top"|[[Users and Roles|Read roles]]||A comma separated list of roles that can read (and view) the section.
 +
|valign="top"|permRead||valign="top"|Character
 
|-
 
|-
−
|valign="top"|[[Users and Roles|Update roles]]||A comma separated list of roles that can perform update operations on data in the section
+
|valign="top"|[[Users and Roles|Update roles]]||A comma separated list of roles that can perform update operations on data in the section.
 +
|valign="top"|permUpdate||valign="top"|Character
 
|-
 
|-
−
|valign="top"|[[Users and Roles|Delete roles]]||A comma separated list of roles that can perform delete operations on data in the section
+
|valign="top"|[[Users and Roles|Delete roles]]||A comma separated list of roles that can perform delete operations on data in the section.
 +
|valign="top"|permDelete||valign="top"|Character
 
|-
 
|-
 
|}
 
|}
Line 270: Line 519:
 
{| class="wikitable" width="100%"
 
{| class="wikitable" width="100%"
 
!width="20%"|Attribute
 
!width="20%"|Attribute
−
!width="80%"|Description
+
!width="45%"|Description
 +
!width="25%"|Name
 +
!width="10%"|Type
 
|-
 
|-
−
|valign="top"|[[UI Presentation Rules#Desktop|Desktop]]||Include this section in a Desktop client (True &#124; False).  
+
|valign="top"|[[UI Presentation Rules#Desktop|Desktop]]||Include this section in a Desktop client (True &#124; False).
 +
|valign="top"|desktopUI||valign="top"|Boolean
 
|-
 
|-
 
|valign="top"|[[UI Presentation Rules#Web|Web]]||Include this section in a Web client (True &#124; False).
 
|valign="top"|[[UI Presentation Rules#Web|Web]]||Include this section in a Web client (True &#124; False).
 +
|valign="top"|webUI||valign="top"|Boolean
 
|-
 
|-
 
|valign="top"|[[UI Presentation Rules#Tablet|Tablet]]||Include this section in a Tablet client (True &#124; False).
 
|valign="top"|[[UI Presentation Rules#Tablet|Tablet]]||Include this section in a Tablet client (True &#124; False).
 +
|valign="top"|tabletUI||valign="top"|Boolean
 
|-
 
|-
 
|valign="top"|[[UI Presentation Rules#Phone|Phone]]||Include this section in a Phone client (True &#124; False).
 
|valign="top"|[[UI Presentation Rules#Phone|Phone]]||Include this section in a Phone client (True &#124; False).
 +
|valign="top"|mobileUI||valign="top"|Boolean
 
|-
 
|-
 
|valign="top"|[[UI Presentation Rules#UI States|UI States]]||UI states that affect this section.  Specify multiple states as a comma separated list.
 
|valign="top"|[[UI Presentation Rules#UI States|UI States]]||UI states that affect this section.  Specify multiple states as a comma separated list.
 +
|valign="top"|state||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[UI Presentation Rules#Initial UI state|Initial UI state]]||The initial UI state for this section.  This will be applied to the section and all its fields and gadgets.
 
|valign="top"|[[UI Presentation Rules#Initial UI state|Initial UI state]]||The initial UI state for this section.  This will be applied to the section and all its fields and gadgets.
 +
|valign="top"|uiStateInit||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[UI Presentation Rules#Readonly when|Readonly when]]||Section is readonly at runtime if specified expression evaluates to true.
 
|valign="top"|[[UI Presentation Rules#Readonly when|Readonly when]]||Section is readonly at runtime if specified expression evaluates to true.
 +
|valign="top"|readonlyWhen||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[UI Presentation Rules#Visible when|Visible when]]||Section is visible at runtime if specified expression evaluates to true.
 
|valign="top"|[[UI Presentation Rules#Visible when|Visible when]]||Section is visible at runtime if specified expression evaluates to true.
 +
|valign="top"|visibleWhen||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[UI Presentation Rules#Display orientation|Display orientation]]||Display depending on mobile device orientation for Tablets and Phones. (Always &#124; Portrait &#124; Landscape)
 
|valign="top"|[[UI Presentation Rules#Display orientation|Display orientation]]||Display depending on mobile device orientation for Tablets and Phones. (Always &#124; Portrait &#124; Landscape)
 +
|valign="top"|displayOrientation||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[UI Presentation Rules#Apply rules on change|Apply rules on change]]||Apply UI presentation rules (Visible when and Readonly when) when data is changed interactively or when navigating records (True &#124; False).
 
|valign="top"|[[UI Presentation Rules#Apply rules on change|Apply rules on change]]||Apply UI presentation rules (Visible when and Readonly when) when data is changed interactively or when navigating records (True &#124; False).
 +
|valign="top"|applyRulesOnChange||valign="top"|Boolean
 
|-
 
|-
 
|valign="top"|[[UI Presentation Rules#Apply rules on parent change|Apply rules on parent change]]||Apply section UI presentation rules (Visible when and Readonly when) when parent data is changed by navigating records (True &#124; False)
 
|valign="top"|[[UI Presentation Rules#Apply rules on parent change|Apply rules on parent change]]||Apply section UI presentation rules (Visible when and Readonly when) when parent data is changed by navigating records (True &#124; False)
 +
|valign="top"|applyRulesOnParentChange||valign="top"|Boolean
 +
|-
 +
|valign="top"|[[UI Presentation Rules#Search Panel Responsive UI width breakpoint|Search Panel Responsive UI width breakpoint]]||The Search Panel responsive UI width breakpoint in Web/Mobile Apps.  From v5.4.
 +
|valign="top"|searchpanelresponsivevisibility||valign="top"|Int
 +
|-
 +
|valign="top"|[[UI Presentation Rules#Menu Responsive UI width breakpoint|Menu Responsive UI width breakpoint]]||valign="top"|The Menu responsive UI width breakpoint in Web/Mobile Apps.  From v5.4.
 +
|valign="top"|responsivemenuwidth||valign="top"|Int
 +
|-
 +
|valign="top"|[[UI Presentation Rules#Responsive UI width breakpoint|Responsive UI width breakpoint]]||The section responsive UI visibility width breakpoint in Web/Mobile Apps.  From v5.4.
 +
|valign="top"|responsivewidthvisibility||valign="top"|Int
 +
|-
 +
|valign="top"|[[UI Presentation Rules#Responsive UI height breakpoint|Responsive UI height breakpoint]]||The section responsive UI visibility height breakpoint in Web/Mobile Apps.  From v5.4.
 +
|valign="top"|responsiveheightvisibility||valign="top"|Int
 
|-
 
|-
 
|}
 
|}
Line 298: Line 572:
 
[[Category:Attributes|3 GalleryView Section]]
 
[[Category:Attributes|3 GalleryView Section]]
 
[[Category:Lianja v2.0]]
 
[[Category:Lianja v2.0]]
 +
[[Category:Sections]]
 +
[[Category:WebView Based Sections]]

Latest revision as of 07:46, 22 March 2024

Overview

GalleryView Sections are used to display a gallery of Tiles. Clicking on a Tile automatically displays a full-section Content panel.

GalleryView section.png

You build Apps in Lianja App Builder visually using the Page Builder.

If you have not yet done so please read Understanding the Lianja Architecture and also Understanding ART to better understand this article.

An App consists of pages. Pages are made up of Sections. Form sections are made up of FormItems. We call these collectively "UI Elements" or "Visual Elements".

Setting Attributes Declaratively

You adjust the appearance and behavior of each UI Element in the Attributes Tab of the App Inspector.

Attributes


The attributes available consist of some common ones as well as some specific to the UI Element being inspected.

Getting and Setting Attributes Programmatically

The setAttribute(name, value) method can be used to set the value of an Attribute: 

Lianja.get("pageid.sectionid").setAttribute("title","Section1")

Note: on the desktop, the shortened form setAttr(name,value) is also available.

The getAttribute(name) method can be used to get the value of an Attribute: 

cTitle = Lianja.get("pageid.sectionid").getAttribute("title")

Note: on the desktop, the shortened form getAttr(name) is also available.

See Also

GalleryView Options

Demo Apps (included in the Lianja App Builder distribution):

  • Lianja Galleryview Demo (example_galleryview)

Attributes

Details

Attribute Description Name Type
Name The name for this section (unique to the page) id Character
Full name The full name for this section including its parent page, e.g. page1.section1 fullid Character
Alias name The alias name for this section aliasid Character
Dashboard group The dashboard section that this section belongs to. From v5.2. horizontalgroup Character
Horizontal stretch The horizontal % stretch factor that this section should occupy. From v5.2. horizontalgroupstretchfactor Character
Vertical stretch The vertical % stretch factor that this section should occupy. From v5.2. verticalgroupstretchfactor Character
App Doc The App Doc file for this section. This will be included in the App Doc when it is generated. appdoc Character
MetaData version The MetaData version number. You can set this in the setupUI hook to prevent MetaData being applied multiple times. metaDataVersion Int
Meta types A comma separated list of metatype names metatypes Character
Custom Props A ';' separated list of custom prop key pairs, e.g. name=barry;company=lianja
From v5.3. 		customprops Character
Type The type of section: galleryview (readonly) type Character
Caption The section caption displayed in the section header title Character
Database The database for this section database Character
Table The table for this section table Character
Height The section height height Character
Fixed height Fix the section height (True | False) fixedHeight Boolean
Auto layout percent Auto layout percentage of page size. If set to 0, then all sections on a page are resized to an equal height. autoLayoutPercentage Int

Appearance

Attribute Description Name Type
Margin Margin size around the section margin Int
Add spacer at bottom Add spacer at bottom of section (True | False) spacerVisible Boolean

Header

Attribute Description Name Type
Hide header Hide section header at runtime(True | False) hideHeaderAtRuntime Boolean
Hide actionbar Hide actionbar when stacked section is activated at runtime
(True | False) 		hideActionBarAtRuntime Boolean
Header icon The image for the Header (png | jpg | gif).
Use app:/imagename.ext for app specific images. 		headerIcon Character
Gradient colors Render the Header background color as a gradient (True | False) headerGradient Boolean
Gradient type Specify the gradient type headerGradientType Int
Gradient start color Gradient start color headerFromColor Character
Gradient end color Gradient end color headerToColor Character
Show Print button Show Print button in the section header (True | False) showPrintButton Boolean
Show Edit button Show Edit button in the section header (True | False) showEditButton Boolean
Hide custom search icon Hide the custom search icon (True | False) hideCustomSearchIcon Boolean
Show Custom search dialog Show custom search dialog when custom search icon clicked (True | False) showcustomsearchdialog Boolean
Show custom search dialog panel Show custom search dialog panel when custom search icon clicked
(True | False) 		showcustomsearchdialogpanel Boolean
Show info tips icon Show the info tips icon in the section header (True | False) showInfoTipsIcon Boolean
Show help icon Show the help icon in the section header (True | False) showHelpIcon Boolean
Help topic Help topic to display when the help icon is clicked in the section header helpTopic Character

Custom Header Style

Attribute Description Name Type
Use custom header style Use a custom header style (True | False) headercustomstyle Boolean
Header background color Header background color headerbackcolor Character
Header foreground color Header foreground color headerforecolor Character
Header bottom border Display the header bottom border (True | False) headerbottomborder Boolean
Header bottom border height Height (in pixels) of the header bottom border (if displayed) headerbottomborderheight Int
Header bottom border color Header bottom border color headerbottombordercolor Character
Show record count badge Show the record count badge in the section header (True | False). showreccount Boolean

Visual Component Details

Attribute Description Name Type
Component library This specifies the Component library where the component will be saved. componentlib Character
Component name Save as this component name whenever the section is saved. componentname Character
Component author The author of this component. componentauthor Character
Component version The version of this component. componentversion Character
Component description The description of this component. componentdescription Character
Component permissions The permissions required for this component in Lianja Cloud App Builder. componentpermissions Character
Component width The width of this component when activated as a Form. componentwidth Int
Component height The height of this component when activated as a Form. componentheight Int

GalleryView Options

Attribute Description Name Type
Tile caption The name of the column in the table (or expression) containing the caption for each tile galleryviewCaption Character
Tile category The name of the column in the table (or expression) containing the category caption for each tile galleryViewSubCaption Character
Content title The content title as an expression galleryviewHeading Character
Content details The name of the column in the table containing the content (typically a varchar/memo) galleryviewDetails Character
Custom library Custom library containing the Tile producer and Content producer delegates galleryviewCustomLibrary Character
Tile producer Delegate to call to render a custom tile.
This should just output the HTML 		galleryviewTileDelegate Character
Content producer Delegate to call to render the content.
This should just output the HTML 		galleryviewContentDelegate Character
Filter The filter expression that restricts which records will be included galleryViewFilter Character
Order by The orderby expression for the data in the GalleryView galleryViewOrderBy Character

Related Data

Attribute Description Name Type
Parent section name Name of related parent section parentid Character
Automatically relate Automatically relate the child section (True | False). If this is unchecked then you need to manually relate it in the parentdatachanged delegate. autoRelateChildSection Boolean

Menu

Attribute Description Name Type
Visible Section menu visible (True | False) sectionMenuVisible Boolean
Height Section menu height sectionMenuHeight Int
Background color Section menu background color sectionMenuBackColor Character
Foreground color Section menu foreground color sectionMenuForeColor Character
Custom menu panel The .rsp or .jssp page used to create the custom menu panel. This page should generate dynamic HTML5/JavaScript. customSectionMenuPanel Character
Custom menu Section menu contents customSectionMenu Character
Custom action Action to perform when a menu item is selected sectionMenuAction Character

Search Panel

Attribute Description Name Type
Visible Section search panel visible (True | False) searchPanelVisible Boolean
Height Section search panel height searchPanelHeight Int
Background color Section search panel background color searchPanelBackColor Character
Foreground color Section search panel foreground color searchPanelForeColor Character
Auto create Automatically create search panel for all Section search fields searchPanelAutoCreate Boolean
Custom search panel The delegate used to create the custom search panel searchPanelAction Character

Subtitle

Attribute Description Name Type
Visible Section subtitle visible (True | False) subtitleVisible Boolean
Caption Section subtitle caption subtitleCaption Character
Height Section subtitle height subtitleHeight Int
Background color Section subtitle background color subtitleBackColor Character
Foreground color Section subtitle foreground color subtitleForeColor Character
Font Section subtitle font subtitleFont Int
CSS style CSS style subtitleCssStyle Character

Footer

Attribute Description Name Type
Visible Section footer visible (True | False) footerVisible Boolean
Caption Section footer caption footerText Character
Height Section footer height footerHeight Int
Background color Section footer background color footerBackColor Character
Foreground color Section footer foreground color footerForeColor Character
CSS style CSS style (separate attributes with ; or use app:/filename.css or specify CSS classes separated by spaces). footercssstyle Character
Custom menu Section footer menu contents customOptionsMenu Character
Custom action Action to perform when a footer menu item is selected customOptionsMenuAction Character
Footer button CSS Footer button CSS style footerButtonCss Character
Footer button width Footer button width footerButtonWidth Int

Other Options

Attribute Description Name Type
Hide form NavBar Hide form Navigation Bar at runtime if this section is in an Accordion Stack (True | False) hideFormNavBar Boolean
Hide SearchBox Hide the Page Header Instant Search box when this section is selected in an Accordion Stack (True | False). From v5.4. hidesearchbox Boolean
Collapsable The section is collapsible at runtime (True | False) collapsableAtRuntime Boolean
Exclude from accordion The section is excluded from accordion behavior at runtime (True | False) excludeAccordionAtRuntime Boolean

Custom Delegates

Attribute Description Name Type
Scripting language The default scripting language for custom code in this section (Inherit | Recital | Visual FoxPro | Python | JavaScript | PHP) scriptingLanguage Character
Custom library The filename of the library containing code for event handlers and custom procedures/functions customLibrary Character
Print The delegate for the Print event.
This is called when you click the 'Print' icon. 		printAction Character
Expanded The delegate for the Expanded event expandedAction Character
Collapsed The delegate for the Collapsed event collapsedAction Character
Hotkey The delegate for the Hotkey event. hotkeyAction Character
Init The delegate for the Init event initAction Character
Destroy The delegate for the Destroy event destroyAction Character
Load The delegate for the Load event loadAction Character
Ready The delegate for the Ready event readyAction Character
Unload The delegate for the Unload event unloadAction Character
Parent data changed The delegate for the ParentDataChanged event parentDataChangedAction Character
Data Producer The delegate for the DataProducer (used in Web Components).
From v6.1. 		dataproduceraction Character
Timer The delegate for the Timer event timerAction Character
Timer interval The timer interval in seconds that the Timer event will be called at runtime timerInterval Int
State Changed The delegate for the Statechanged event. stateChangedAction Character
Custom footer menu The delegate for the footer menu event customMenuAction Character
Custom search command The delegate for the search event customSearch Character
Custom section menu The delegate for the section menu event customSectionMenuAction Character

Permissions and Roles

Attribute Description Name Type
Create roles A comma separated list of roles that can perform create operations on data in the section. permcreate Character
Read roles A comma separated list of roles that can read (and view) the section. permRead Character
Update roles A comma separated list of roles that can perform update operations on data in the section. permUpdate Character
Delete roles A comma separated list of roles that can perform delete operations on data in the section. permDelete Character

UI Presentation Rules

Attribute Description Name Type
Desktop Include this section in a Desktop client (True | False). desktopUI Boolean
Web Include this section in a Web client (True | False). webUI Boolean
Tablet Include this section in a Tablet client (True | False). tabletUI Boolean
Phone Include this section in a Phone client (True | False). mobileUI Boolean
UI States UI states that affect this section. Specify multiple states as a comma separated list. state Character
Initial UI state The initial UI state for this section. This will be applied to the section and all its fields and gadgets. uiStateInit Character
Readonly when Section is readonly at runtime if specified expression evaluates to true. readonlyWhen Character
Visible when Section is visible at runtime if specified expression evaluates to true. visibleWhen Character
Display orientation Display depending on mobile device orientation for Tablets and Phones. (Always | Portrait | Landscape) displayOrientation Character
Apply rules on change Apply UI presentation rules (Visible when and Readonly when) when data is changed interactively or when navigating records (True | False). applyRulesOnChange Boolean
Apply rules on parent change Apply section UI presentation rules (Visible when and Readonly when) when parent data is changed by navigating records (True | False) applyRulesOnParentChange Boolean
Search Panel Responsive UI width breakpoint The Search Panel responsive UI width breakpoint in Web/Mobile Apps. From v5.4. searchpanelresponsivevisibility Int
Menu Responsive UI width breakpoint The Menu responsive UI width breakpoint in Web/Mobile Apps. From v5.4. responsivemenuwidth Int
Responsive UI width breakpoint The section responsive UI visibility width breakpoint in Web/Mobile Apps. From v5.4. responsivewidthvisibility Int
Responsive UI height breakpoint The section responsive UI visibility height breakpoint in Web/Mobile Apps. From v5.4. responsiveheightvisibility Int
Retrieved from "https://www.lianja.com/doc/index.php?title=GalleryView_Section_Attributes&oldid=26464"