Difference between revisions of "Grid Gadget Attributes"

From Lianjapedia
Jump to: navigation, search
(→‎UI Presentation Rules)
 
(34 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
''Under construction''
+
=Overview=
 +
Grid Gadgets can be loaded into a [[Form Section Attributes|Form Section]].  They are used for displaying and editing multiple rows of data.
 +
{{DISPLAYTITLE:Grid Gadget}}
 +
[[File:grid_gadget.png|middle|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 Programmatically==
 +
The '''setAttribute(name, value)''' method can be used to set the value of an Attribute:
 +
 
 +
<pre>Lianja.get("pageid.sectionid.fieldid").setAttribute("caption","Formitem1")</pre>
 +
 
 +
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:
 +
 
 +
<pre>cTitle = Lianja.get("pageid.sectionid.fieldid").getAttribute("caption")</pre>
 +
 
 +
Note: on the desktop, the shortened form '''getAttr(name)''' is also available.
 +
 
 +
=See Also=
 +
[[Grid Section Attributes]]
 +
 
 +
Demo Apps (included in the Lianja App Builder distribution):
 +
* GridGadget App (example_gridgadget)
 +
 
 +
=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 gadget (unique to the section)
 
|valign="top"|[[Details Attributes#Name|Name]]||The name for this gadget (unique to the section)
 +
|valign="top"|id||valign="top"|Character
 +
|-
 +
|valign="top"|[[Details Attributes#Full name|Full name]]||The full name for this gadget including its parent page and section, e.g. page1.section1.field1
 +
|valign="top"|fullid||valign="top"|Character
 +
|-
 +
|valign="top"|[[Details Attributes#Alias name|Alias name]]||The alias name for this gadget
 +
|valign="top"|aliasid||Character
 +
|-
 +
|valign="top"|[[Details Attributes#App Doc|App Doc]]||The App Doc file for this gadget.  This will be included in the [[App Doc]] when it is generated.
 +
|valign="top"|appdoc||valign="top"|Character
 +
|-
 +
|valign="top"|[[Details Attributes#Tag|Tag]]||The tag for this gadget
 +
|valign="top"|tag||Character
 
|-
 
|-
 
|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 control: Gadget (readonly)
 +
|valign="top"|type||valign="top"|Character
 +
|-
 +
|valign="top"|[[Details Attributes#Gadget type|Gadget type]]||The type of gadget: grid (readonly)
 +
|valign="top"|gadgetType||valign="top"|Character
 
|-
 
|-
−
|valign="top"|Type||The type of control: Gadget (readonly)
+
|valign="top"|[[Details Attributes#Margin|Margin]]||Margin size around the gadget
 +
|valign="top"|gadgetMargin||valign="top"|Int
 
|-
 
|-
−
|valign="top"|Gadget type||The type of gadget: grid (readonly)
+
|valign="top"|[[Details Attributes#Fixed width|Fixed width]]||Fixed gadget width in pixels
 +
|valign="top"|gadgetFixedWidth||valign="top"|Int
 
|-
 
|-
−
|valign="top"|Margin||Margin size around the gadget
+
|valign="top"|[[Details Attributes#Fixed height|Fixed height]]||Fixed gadget height in pixels
 +
|valign="top"|gadgetFixedHeight||valign="top"|Int
 
|-
 
|-
−
|valign="top"|Fixed width||Fix the gadget width (True &#124; False)
+
|valign="top"|[[Details Attributes#Inline|Inline]]||Render the gadget inline rather than it its own column (True &#124; False)
 +
|valign="top"|gadgetInline||valign="top"|Boolean
 
|-
 
|-
−
|valign="top"|Fixed height||Fix the gadget height (True &#124; False)
+
|valign="top"|[[Details Attributes#Stretch width|Stretch width]]||Auto stretch the width of the gadget into the width of the section (True &#124; False)
 +
|valign="top"|gadgetStretchWidth||valign="top"|Boolean
 
|-
 
|-
−
|valign="top"|Inline||Render the gadget inline rather than it its own column (True &#124; False)
+
|valign="top"|[[Details Attributes#Desktop Margin Top|Desktop Margin Top]]||Adjust the top margin when laying out an inline gadget to line it up with others horizontally in desktop Apps.  From v5.3.
 +
|valign="top"|gadgetpaddingtop||valign="top"|Int
 
|-
 
|-
−
|valign="top"|Stretch width||Auto stretch the width of the gadget into the width of the section (True &#124; False)
+
|valign="top"|[[Details Attributes#Web Margin Top|Web Margin Top]]||Adjust the top margin when laying out an inline gadget to line it up with others horizontally in Web/Mobile Apps.  From v5.3.
 +
|valign="top"|gadgetpaddingtopweb||valign="top"|Int
 
|-
 
|-
 
|}
 
|}
Line 28: Line 99:
 
{| 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"|[[Geometry#Absolute|Absolute]]||Enable or disable absolute positioning (True &#124; False)
 
|valign="top"|[[Geometry#Absolute|Absolute]]||Enable or disable absolute positioning (True &#124; False)
 +
|valign="top"|absolutePosition||valign="top"|Boolean
 
|-
 
|-
 
|valign="top"|[[Geometry#Top|Top]]||Top position in pixels
 
|valign="top"|[[Geometry#Top|Top]]||Top position in pixels
 +
|valign="top"|absolutePositionY||valign="top"|Int
 
|-
 
|-
 
|valign="top"|[[Geometry#Left|Left]]||Left position in pixels
 
|valign="top"|[[Geometry#Left|Left]]||Left position in pixels
 +
|valign="top"|absolutePositionX||valign="top"|Int
 
|-
 
|-
 
|valign="top"|[[Geometry#Width|Width]]||Width in pixels
 
|valign="top"|[[Geometry#Width|Width]]||Width in pixels
 +
|valign="top"|absolutePositionWidth||valign="top"|Int
 
|-
 
|-
 
|valign="top"|[[Geometry#Height|Height]]||Height in pixels
 
|valign="top"|[[Geometry#Height|Height]]||Height in pixels
 +
|valign="top"|absolutePositionHeight||valign="top"|Int
 
|-
 
|-
 
|valign="top"|[[CSS|CSS style]]||CSS style (separate attributes with ; or use app:/filename.css)
 
|valign="top"|[[CSS|CSS style]]||CSS style (separate attributes with ; or use app:/filename.css)
 +
|valign="top"|cssStyle||valign="top"|Character
 
|-
 
|-
 
|}
 
|}
Line 47: Line 126:
 
{| 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"|[[Formitem Appearance#Caption|Caption]]||The caption for the gadget
 
|valign="top"|[[Formitem Appearance#Caption|Caption]]||The caption for the gadget
 +
|valign="top"|caption||valign="top"|Character
 +
|-
 +
|valign="top"|[[Formitem Appearance#Caption CSS style|Caption CSS style]]||The gadget caption CSS style (separate attributes with ';' or use ''app:/''filename.css or specify CSS classes separated by spaces).
 +
|valign="top"|captionCSSstyle||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Colors|Background color]]||The background color for the caption
 
|valign="top"|[[Colors|Background color]]||The background color for the caption
 +
|valign="top"|backColor||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Colors|Foreground color]]||The foreground color for the caption
 
|valign="top"|[[Colors|Foreground color]]||The foreground color for the caption
 +
|valign="top"|foreColor||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Fonts|Font]]||The font for the caption
 
|valign="top"|[[Fonts|Font]]||The font for the caption
 +
|valign="top"|captionFont||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Formitem Appearance#Icon|Icon]]||The image for the caption (png &#124; jpg &#124; gif).<br>Use app:/imagename.ext for app specific images.
 
|valign="top"|[[Formitem Appearance#Icon|Icon]]||The image for the caption (png &#124; jpg &#124; gif).<br>Use app:/imagename.ext for app specific images.
 +
|valign="top"|captionIcon||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Formitem Appearance#Border width|Border width]]||The caption border width
 
|valign="top"|[[Formitem Appearance#Border width|Border width]]||The caption border width
 +
|valign="top"|captionBorderWidth||valign="top"|Int
 
|-
 
|-
 
|valign="top"|[[Colors|Border color]]||The caption border color
 
|valign="top"|[[Colors|Border color]]||The caption border color
 +
|valign="top"|captionBorderColor||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Shading and Transparency|Transparency]]||Specify a transparency percentage from 0 to 100
 
|valign="top"|[[Shading and Transparency|Transparency]]||Specify a transparency percentage from 0 to 100
 +
|valign="top"|transparency||valign="top"|Int
 
|-
 
|-
 
|valign="top"|[[Gradients#Gradient colors|Gradient colors]]||Render the caption color as a gradient (True &#124; False)
 
|valign="top"|[[Gradients#Gradient colors|Gradient colors]]||Render the caption color as a gradient (True &#124; False)
 +
|valign="top"|captionGradient||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"|captionGradientType||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"|captionFromColor||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"|captionToColor||valign="top"|Character
 
|-
 
|-
 
|}
 
|}
Line 78: Line 174:
 
{| 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"|Data source||The table or SQL SELECT statement to display in the grid.
+
|valign="top"|[[Data Attributes#Data source|Data source]]||The table or SQL SELECT statement to display in the grid.
 +
|valign="top"|controlSource||valign="top"|Character
 
|-
 
|-
−
|valign="top"|Editable||Data is editable (True &#124; False)
+
|valign="top"|[[Data Attributes#Editable|Editable]]||Data is editable (True &#124; False)
 +
|valign="top"|editable||valign="top"|Boolean
 
|-
 
|-
−
|valign="top"|Hide OK/Cancel Buttons||Hide the OK/Cancel buttons (True &#124; False)
+
|valign="top"|[[Data Attributes#Hide OK/Cancel Buttons|Hide OK/Cancel Buttons]]||Hide the OK/Cancel buttons (True &#124; False)
 +
|valign="top"|gridHideOkCancelButtons||valign="top"|Boolean
 
|-
 
|-
−
|valign="top"|Hide actionbar||Hide actionbar buttons (True &#124; False)
+
|valign="top"|[[Data Attributes#Hide the action bar|Hide the action bar]]||Hide the action bar (True &#124; False)
 +
|valign="top"|gridHideActionbar||valign="top"|Boolean
 
|-
 
|-
−
|valign="top"|Filter||The filter expression that restricts the records that will be included in the grid
+
|valign="top"|[[Data Attributes#Filter|Filter]]||The filter expression that restricts the records that will be included in the grid
 +
|valign="top"|filter||valign="top"|Character
 
|-
 
|-
−
|valign="top"|CSS style||CSS style for the gadget (separate attributes with ; or use app:/filename.css)
+
|valign="top"|[[Data Attributes#Refresh section when row changes|Refresh section when row changes]]||Refresh other fields in the section when row changes (True &#124; False)
 +
|valign="top"|refreshOnGridClick||valign="top"|Boolean
 
|-
 
|-
−
|valign="top"|Pagination||Grid is always rendered using pagination (for large data sets)(True &#124; False)
+
|valign="top"|[[CSS|CSS style]]||CSS style for the gadget (separate attributes with ; or use app:/filename.css)
 +
|valign="top"|gadgetCssStyle||valign="top"|Character
 
|-
 
|-
−
|valign="top"|Automatic pagination||Grid is rendered using pagination if the number of records exceeds below amount (True &#124; False)
+
|valign="top"|[[Data Attributes#Pagination|Pagination]]||Grid is always rendered using pagination (for large data sets)(True &#124; False)
 +
|valign="top"|pagination||valign="top"|Boolean
 
|-
 
|-
−
|valign="top"|Automatic pagination size||Grid is rendered using pagination if Automatic pagination is true and the number of records exceeds this amount
+
|valign="top"|[[Data Attributes#Automatic pagination|Automatic pagination]]||Grid is rendered using pagination if the number of records exceeds below amount (True &#124; False)
 +
|valign="top"|autoPagination||valign="top"|Boolean
 
|-
 
|-
−
|valign="top"|Grid row height||Height of the grid rows
+
|valign="top"|[[Data Attributes#Automatic pagination size|Automatic pagination size]]||Grid is rendered using pagination if Automatic pagination is true and the number of records exceeds this amount
 +
|valign="top"|autoPaginationSize||valign="top"|Int
 +
|-
 +
|valign="top"|[[Data Attributes#Grid row height|Grid row height]]||Height of the grid rows
 +
|valign="top"|gridRowHeight||valign="top"|Int
 
|-
 
|-
 
|valign="top"|[[Colors|Background color]]||The background color for the gadget
 
|valign="top"|[[Colors|Background color]]||The background color for the gadget
 +
|valign="top"|gadgetBackColor||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Colors|Foreground color]]||The foreground color for the gadget
 
|valign="top"|[[Colors|Foreground color]]||The foreground color for the gadget
 +
|valign="top"|gadgetForeColor||valign="top"|Character
 
|-
 
|-
 
|}
 
|}
Line 109: Line 222:
 
{| 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"|Hide header||Hide gadget header at runtime (True &#124; False)
+
|valign="top"|[[Details Attributes#Hide_header|Hide header]]||Hide gadget header at runtime (True &#124; False)
 +
|valign="top"|gadgetHideHeader||valign="top"|Boolean
 
|-
 
|-
 
|}
 
|}
Line 118: 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"|[[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#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#Activate|Activate]]||The delegate for the Activate event
 
|valign="top"|[[Custom Delegates#Activate|Activate]]||The delegate for the Activate event
 +
|valign="top"|activateAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Deactivate|Deactivate]]||The delegate for the Deactivate event
 
|valign="top"|[[Custom Delegates#Deactivate|Deactivate]]||The delegate for the Deactivate event
 +
|valign="top"|deactivateAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Change|Change]]||The delegate for the Change event
 
|valign="top"|[[Custom Delegates#Change|Change]]||The delegate for the Change event
 +
|valign="top"|changedAction||valign="top"|Character
 
|-
 
|-
−
|valign="top"|[[Custom Delegates#Before Data Create|Before Data Create]]||The delegate for the BeforeCreated event
+
|valign="top"|[[Custom Delegates#Before Data Create|Before Data Create]]||The delegate for the BeforeCreate event
 +
|valign="top"|beforeCreateAction||valign="top"|Character
 
|-
 
|-
−
|valign="top"|[[Custom Delegates#After Data Create|After Data Create]]||The delegate for the AfterCreated event
+
|valign="top"|[[Custom Delegates#After Data Create|After Data Create]]||The delegate for the AfterCreate event
 +
|valign="top"|afterCreateAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#After Data Changed|After Data Changed]]||The delegate for the dataChanged event (after data is read)
 
|valign="top"|[[Custom Delegates#After Data Changed|After Data Changed]]||The delegate for the dataChanged event (after data is read)
 +
|valign="top"|dataChangedAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Before Data Update|Before Data Update]]||The delegate for the BeforeUpdate event
 
|valign="top"|[[Custom Delegates#Before Data Update|Before Data Update]]||The delegate for the BeforeUpdate event
 +
|valign="top"|beforeUpdateAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#After Data Update|After Data Update]]||The delegate for the AfterUpdate event
 
|valign="top"|[[Custom Delegates#After Data Update|After Data Update]]||The delegate for the AfterUpdate event
 +
|valign="top"|afterUpdateAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Before Data Delete|Before Data Delete]]||The delegate for the BeforeDelete event
 
|valign="top"|[[Custom Delegates#Before Data Delete|Before Data Delete]]||The delegate for the BeforeDelete event
 +
|valign="top"|beforeDeleteAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#After Data Delete|After Data Delete]]||The delegate for the AfterDelete event
 
|valign="top"|[[Custom Delegates#After Data Delete|After Data Delete]]||The delegate for the AfterDelete event
 +
|valign="top"|afterDeleteAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Refresh|Refresh]]||The delegate for the Refresh event
 
|valign="top"|[[Custom Delegates#Refresh|Refresh]]||The delegate for the Refresh event
 +
|valign="top"|refreshAction||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#Click|Click]]||The delegate for the item Clicked event.
 
|valign="top"|[[Custom Delegates#Click|Click]]||The delegate for the item Clicked event.
 +
|valign="top"|ClickAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Double click|Double click]]||The delegate for the dblClick event
 
|valign="top"|[[Custom Delegates#Double click|Double click]]||The delegate for the dblClick event
 +
|valign="top"|dblClickAction||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[Custom Delegates#Sort|Sort]]||The delegate for the column Sort event fired when the header is clicked.  This is called with two arguments: nColumn, nDirection
 
|valign="top"|[[Custom Delegates#Sort|Sort]]||The delegate for the column Sort event fired when the header is clicked.  This is called with two arguments: nColumn, nDirection
 +
|valign="top"|sortAction||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"|refreshInterval||valign="top"|Int
 
|-
 
|-
 
|}
 
|}
Line 165: Line 303:
 
{| 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|Read roles]]||A comma separated list of roles that can read (and view) the data
+
|valign="top"|[[Users and Roles|Read roles]]||A comma separated list of roles that can read (and view) the data.
 +
|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 the data
+
|valign="top"|[[Users and Roles|Update roles]]||A comma separated list of roles that can perform update operations on the data.
 +
|valign="top"|permUpdate||valign="top"|Character
 
|-
 
|-
 
|}
 
|}
Line 176: Line 318:
 
{| 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 gadget in a Desktop client (True &#124; False).  
+
|valign="top"|[[UI Presentation Rules#Desktop|Desktop]]||Include this gadget in a Desktop client (True &#124; False).
 +
|valign="top"|desktopUI||valign="top"|Boolean
 
|-
 
|-
 
|valign="top"|[[UI Presentation Rules#Web|Web]]||Include this gadget in a Web client (True &#124; False).
 
|valign="top"|[[UI Presentation Rules#Web|Web]]||Include this gadget in a Web client (True &#124; False).
 +
|valign="top"|webUI||valign="top"|Boolean
 
|-
 
|-
 
|valign="top"|[[UI Presentation Rules#Tablet|Tablet]]||Include this gadget in a Tablet client (True &#124; False).
 
|valign="top"|[[UI Presentation Rules#Tablet|Tablet]]||Include this gadget in a Tablet client (True &#124; False).
 +
|valign="top"|tabletUI||valign="top"|Boolean
 
|-
 
|-
 
|valign="top"|[[UI Presentation Rules#Phone|Phone]]||Include this gadget in a Phone client (True &#124; False).
 
|valign="top"|[[UI Presentation Rules#Phone|Phone]]||Include this gadget 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 gadget.  Specify multiple states as a comma separated list.
 
|valign="top"|[[UI Presentation Rules#UI States|UI States]]||UI states that affect this gadget.  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 gadget.
 
|valign="top"|[[UI Presentation Rules#Initial UI state|Initial UI state]]||The initial UI state for this gadget.
 +
|valign="top"|uiStateInit||valign="top"|Character
 
|-
 
|-
 
|valign="top"|[[UI Presentation Rules#Readonly when|Readonly when]]||Gadget is readonly at runtime if specified expression evaluates to true.
 
|valign="top"|[[UI Presentation Rules#Readonly when|Readonly when]]||Gadget 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]]||Gadget is visible at runtime if specified expression evaluates to true.
 
|valign="top"|[[UI Presentation Rules#Visible when|Visible when]]||Gadget is visible at runtime if specified expression evaluates to true.
 +
|valign="top"|visibleWhen||valign="top"|Character
 +
|-
 +
|valign="top"|[[UI Presentation Rules#Hidden at runtime|Hidden at runtime]]||Hide this formitem at runtime (True &#124; False).
 +
|valign="top"|hiddenAtRuntime||valign="top"|Boolean
 
|-
 
|-
 
|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#Responsive UI width breakpoint|Responsive UI width breakpoint]]||The 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 responsive UI visibility height breakpoint in Web/Mobile Apps.  From v5.4.
 +
|valign="top"|responsiveheightvisibility||valign="top"|Int
 +
|-
 +
|valign="top"|[[UI Presentation Rules#Responsive UI minimum width|Responsive UI minimum width]]||The responsive UI minimum width in Web/Mobile Apps.  From v5.4.
 +
|valign="top"|responsiveminwidth||valign="top"|Int
 
|-
 
|-
 
|}
 
|}
  
 
[[Category:Attributes|4 Grid Gadget]]
 
[[Category:Attributes|4 Grid Gadget]]
 +
[[Category:Formitems]]

Latest revision as of 04:23, 1 October 2020

Overview

Grid Gadgets can be loaded into a Form Section. They are used for displaying and editing multiple rows of data.

Grid gadget.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.fieldid").setAttribute("caption","Formitem1")

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.fieldid").getAttribute("caption")

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

See Also

Grid Section Attributes

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

  • GridGadget App (example_gridgadget)

Attributes

Details

Attribute Description Name Type
Name The name for this gadget (unique to the section) id Character
Full name The full name for this gadget including its parent page and section, e.g. page1.section1.field1 fullid Character
Alias name The alias name for this gadget aliasid Character
App Doc The App Doc file for this gadget. This will be included in the App Doc when it is generated. appdoc Character
Tag The tag for this gadget tag Character
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 control: Gadget (readonly) type Character
Gadget type The type of gadget: grid (readonly) gadgetType Character
Margin Margin size around the gadget gadgetMargin Int
Fixed width Fixed gadget width in pixels gadgetFixedWidth Int
Fixed height Fixed gadget height in pixels gadgetFixedHeight Int
Inline Render the gadget inline rather than it its own column (True | False) gadgetInline Boolean
Stretch width Auto stretch the width of the gadget into the width of the section (True | False) gadgetStretchWidth Boolean
Desktop Margin Top Adjust the top margin when laying out an inline gadget to line it up with others horizontally in desktop Apps. From v5.3. gadgetpaddingtop Int
Web Margin Top Adjust the top margin when laying out an inline gadget to line it up with others horizontally in Web/Mobile Apps. From v5.3. gadgetpaddingtopweb Int

Geometry

Attribute Description Name Type
Absolute Enable or disable absolute positioning (True | False) absolutePosition Boolean
Top Top position in pixels absolutePositionY Int
Left Left position in pixels absolutePositionX Int
Width Width in pixels absolutePositionWidth Int
Height Height in pixels absolutePositionHeight Int
CSS style CSS style (separate attributes with ; or use app:/filename.css) cssStyle Character

Caption

Attribute Description Name Type
Caption The caption for the gadget caption Character
Caption CSS style The gadget caption CSS style (separate attributes with ';' or use app:/filename.css or specify CSS classes separated by spaces). captionCSSstyle Character
Background color The background color for the caption backColor Character
Foreground color The foreground color for the caption foreColor Character
Font The font for the caption captionFont Character
Icon The image for the caption (png | jpg | gif).
Use app:/imagename.ext for app specific images. 		captionIcon Character
Border width The caption border width captionBorderWidth Int
Border color The caption border color captionBorderColor Character
Transparency Specify a transparency percentage from 0 to 100 transparency Int
Gradient colors Render the caption color as a gradient (True | False) captionGradient Boolean
Gradient type Specify the gradient type captionGradientType Int
Gradient start color Gradient start color captionFromColor Character
Gradient end color Gradient end color captionToColor Character

Data

Attribute Description Name Type
Data source The table or SQL SELECT statement to display in the grid. controlSource Character
Editable Data is editable (True | False) editable Boolean
Hide OK/Cancel Buttons Hide the OK/Cancel buttons (True | False) gridHideOkCancelButtons Boolean
Hide the action bar Hide the action bar (True | False) gridHideActionbar Boolean
Filter The filter expression that restricts the records that will be included in the grid filter Character
Refresh section when row changes Refresh other fields in the section when row changes (True | False) refreshOnGridClick Boolean
CSS style CSS style for the gadget (separate attributes with ; or use app:/filename.css) gadgetCssStyle Character
Pagination Grid is always rendered using pagination (for large data sets)(True | False) pagination Boolean
Automatic pagination Grid is rendered using pagination if the number of records exceeds below amount (True | False) autoPagination Boolean
Automatic pagination size Grid is rendered using pagination if Automatic pagination is true and the number of records exceeds this amount autoPaginationSize Int
Grid row height Height of the grid rows gridRowHeight Int
Background color The background color for the gadget gadgetBackColor Character
Foreground color The foreground color for the gadget gadgetForeColor Character

Other Options

Attribute Description Name Type
Hide header Hide gadget header at runtime (True | False) gadgetHideHeader Boolean

Custom Delegates

Attribute Description Name Type
Init The delegate for the Init event initAction Character
Load The delegate for the Load event loadAction Character
Ready The delegate for the Ready event readyAction Character
Activate The delegate for the Activate event activateAction Character
Deactivate The delegate for the Deactivate event deactivateAction Character
Change The delegate for the Change event changedAction Character
Before Data Create The delegate for the BeforeCreate event beforeCreateAction Character
After Data Create The delegate for the AfterCreate event afterCreateAction Character
After Data Changed The delegate for the dataChanged event (after data is read) dataChangedAction Character
Before Data Update The delegate for the BeforeUpdate event beforeUpdateAction Character
After Data Update The delegate for the AfterUpdate event afterUpdateAction Character
Before Data Delete The delegate for the BeforeDelete event beforeDeleteAction Character
After Data Delete The delegate for the AfterDelete event afterDeleteAction Character
Refresh The delegate for the Refresh event refreshAction Character
Parent data changed The delegate for the ParentDataChanged event parentDataChangedAction Character
Click The delegate for the item Clicked event. ClickAction Character
Double click The delegate for the dblClick event dblClickAction Character
Sort The delegate for the column Sort event fired when the header is clicked. This is called with two arguments: nColumn, nDirection sortAction 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 refreshInterval Int

Permissions and Roles

Attribute Description Name Type
Read roles A comma separated list of roles that can read (and view) the data. permRead Character
Update roles A comma separated list of roles that can perform update operations on the data. permUpdate Character

UI Presentation Rules

Attribute Description Name Type
Desktop Include this gadget in a Desktop client (True | False). desktopUI Boolean
Web Include this gadget in a Web client (True | False). webUI Boolean
Tablet Include this gadget in a Tablet client (True | False). tabletUI Boolean
Phone Include this gadget in a Phone client (True | False). mobileUI Boolean
UI States UI states that affect this gadget. Specify multiple states as a comma separated list. state Character
Initial UI state The initial UI state for this gadget. uiStateInit Character
Readonly when Gadget is readonly at runtime if specified expression evaluates to true. readonlyWhen Character
Visible when Gadget is visible at runtime if specified expression evaluates to true. visibleWhen Character
Hidden at runtime Hide this formitem at runtime (True | False). hiddenAtRuntime Boolean
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
Responsive UI width breakpoint The responsive UI visibility width breakpoint in Web/Mobile Apps. From v5.4. responsivewidthvisibility Int
Responsive UI height breakpoint The responsive UI visibility height breakpoint in Web/Mobile Apps. From v5.4. responsiveheightvisibility Int
Responsive UI minimum width The responsive UI minimum width in Web/Mobile Apps. From v5.4. responsiveminwidth Int
Retrieved from "https://www.lianja.com/doc/index.php?title=Grid_Gadget_Attributes&oldid=23567"