Difference between revisions of "Right Sidebar"
Yvonne.milne (Talk | contribs) |
Barrymavin (Talk | contribs) (→Caption) |
||
(4 intermediate revisions by 2 users not shown) | |||
Line 21: | Line 21: | ||
Note: the right sidebar is not displayed on Mobile client phone Apps. | Note: the right sidebar is not displayed on Mobile client phone Apps. | ||
+ | <br clear=all> | ||
+ | |||
+ | ==Autosize gadgets== | ||
+ | Autosize the right sidebar gadgets for the height of the Page (True | False). From v9.6. | ||
+ | |||
+ | This is demonstrated in the lianjademo sample App: | ||
+ | [[{{ns:file}}:autosizegadgets.png|800px|border|left|link={{filepath:autosizegadgets.png}}|Autosize gadgets]] | ||
<br clear=all> | <br clear=all> | ||
Line 152: | Line 159: | ||
The '''Caption''' is displayed at the top of the custom content gadget. | The '''Caption''' is displayed at the top of the custom content gadget. | ||
− | Clicking on the '''Caption''' expands and collapses the custom content gadget. | + | Clicking on the '''Caption''' expands and collapses the custom content gadget unless "Autosize gadgets" is True. |
+ | |||
+ | The caption may include a color specification text:fgcolor:bgcolor to customize its colors. e.g. Orders:white:lightblue. Color specs can include # colors e.g. #b3b3b3 | ||
Here the '''Caption''' is 'Business overview'. If the '''Caption''' is not set, 'Untitled' will be displayed. | Here the '''Caption''' is 'Business overview'. If the '''Caption''' is not set, 'Untitled' will be displayed. | ||
Line 330: | Line 339: | ||
[[Category:Attribute Categories]] | [[Category:Attribute Categories]] | ||
[[Category:Pages]] | [[Category:Pages]] | ||
+ | [[Category:PageAnatomy]] |
Revision as of 00:44, 26 April 2024
Contents
See Also
App Settings, Colors, CSS, JavaScript Server Pages (.jssp files), Left Sidebar, Lianja/VFP Server Pages (.rsp files), Page Attributes, Using the showdocument() function and Lianja.showDocument() method
Overview
Pages can optionally have a right sidebar displayed. This can include:
- A Custom content gadget based on a .jssp or .rsp script file
- Up to four Content gadgets with URL based content.
Show right sidebar
Show right sidebar (True | False).
The Show right sidebar attribute determines whether the right sidebar is shown.
In the App Settings, the Right sidebar visible setting in Page defaults determines whether newly created pages have a visible right sidebar or not.
Note: the right sidebar is not displayed on Mobile client phone Apps.
Autosize gadgets
Autosize the right sidebar gadgets for the height of the Page (True | False). From v9.6.
This is demonstrated in the lianjademo sample App:
Collapse right sidebar
Collapse right sidebar when the App is first loaded (True | False).
Here, the Show right sidebar attribute is checked (true), but so is the Collapse right sidebar.
The right sidebar is not shown until the 'SHOW' tab is clicked.
Clicking the 'HIDE' tab will hide the right sidebar again.
In the Web/Mobile client (browser/tablet) clicking the left border of the right sidebar allows it to be hidden or shown.
In the Web/Mobile client the Collapse right sidebar attribute is ignored, so if Show right sidebar is true, the right sidebar is displayed when the App is first loaded.
The right sidebar can also be hidden/shown using the showdocument() function or the Lianja.showDocument() method:
Lianja.showDocument("page:customers?action=hiderightsidebar")
Lianja.showDocument("page:customers?action=showrightsidebar")
Note: in the Web/Mobile client the Page must start with a visible right sidebar (Show right sidebar attribute) to use the hiderightsidebar/showrightsidebar actions.
Width
Right sidebar width.
Here, the Width of the right sidebar has been decreased to 150 (pixels).
Note: the gadget Height attributes may need to be adjusted when the Width is changed.
Background color
Right sidebar background color.
The Background color attribute determines the right sidebar background color.
Note: the Background color attribute is supported on the Desktop client only.
Foreground color
Right sidebar foreground color.
- Foreground colors are set internally for the right sidebar elements.
Border color
Right sidebar border color.
The Border color attribute determines the right sidebar border color.
Note: the Border color attribute is supported on the Desktop client only.
Custom content gadget
Gadget based on custom script.
Show
Show the custom content gadget (True | False).
Here, the Show attribute is checked (true), so the custom content gadget is displayed.
Expanded
Expand the custom content gadget when the App is first loaded (True | False).
Here, the Expanded attribute is checked (true), so the custom content gadget is expanded when first loaded.
If the Expanded attribute is unchecked (false), only the custom content gadget Caption will be displayed.
Clicking on the Caption expands and collapses the custom content gadget.
Height
Custom content gadget height.
Here, the Height is set to 220 (pixels).
Stretch
Stretch the custom content into the right sidebar (True | False).
If the Stretch attribute is checked (true), the gadget will be stretched to the Page height.
Here, Stretch is unchecked (false).
Caption
Custom content gadget caption.
The Caption is displayed at the top of the custom content gadget.
Clicking on the Caption expands and collapses the custom content gadget unless "Autosize gadgets" is True.
The caption may include a color specification text:fgcolor:bgcolor to customize its colors. e.g. Orders:white:lightblue. Color specs can include # colors e.g. #b3b3b3
Here the Caption is 'Business overview'. If the Caption is not set, 'Untitled' will be displayed.
Gadget
The gadget to be displayed.
The Gadget attribute specifies the .jssp or .rsp script file to be run to generate the content for the custom content gadget.
The example in the screenshot above, rsidebar1.rsp, can be found in the 'Lianja Web UI Demo' (example_webapp2) App included in the distribution.
Refresh interval
The interval in seconds that the content will be refreshed.
Content gadget #1
Gadget based on URL.
Show
Show the gadget (True | False).
- Same as Custom content gadget.
Expanded
Expand the gadget when the App is first loaded (True | False).
- Same as Custom content gadget.
Height
Gadget height.
- Same as Custom content gadget.
Caption
Gadget caption.
- Same as Custom content gadget.
URL
The URL of the content to be displayed.
In the example shown above a Google Chart is displayed (line breaks have been added to the URL here):
http://chart.apis.google.com/chart?cht=bvg&chs=160x202 &chd=t:{rsidebar2( "{{customers.customerid}}" )} &chds=0,20&chxt=x,y&chxr=1,0,20,5&chxl=0:|2009|2010|2011 &chco=fac400|FFFF42|4685e2&chtt=Orders per year&chbh=33 &chf=bg,s,EFEFEF|c,s,EFEFEF&chts=a9a9a9,10&chma=0,0,0,0
Note also the use of the rsidebar2 Lianja/VFP function (rsidebar2.prg).
This example can be found in the 'Lianja Web UI Demo' (example_webapp2) App included in the distribution and full information on Google Charts can be accessed from the Tools option in the System Menu in the Lianja App Builder.
Refresh interval
The interval in seconds that the content will be refreshed.
- Same as Custom content gadget.
Content gadget #2
Gadget based on URL.
Show
Show the gadget (True | False).
- Same as Custom content gadget
Expanded
Expand the gadget when the App is first loaded (True | False).
- Same as Custom content gadget
Height
Gadget height.
- Same as Custom content gadget
Caption
Gadget caption.
- Same as Custom content gadget
URL
The URL of the content to be displayed.
In the example shown above a Google Chart is displayed (line breaks have been added to the URL here):
http://chart.apis.google.com/chart?cht=bvg&chs=160x198 &chd=t:{rsidebar3( "{{customers.customerid}}" )} &chxt=x,y&chxr=1,0,16000&chxl=0:|2009|2010|2011 &chco=fac400|ffff42|4685e2&chtt=Order amount (US$)&chds=0,16000 &chbh=33&chf=bg,s,EFEFEF&chts=a9a9a9,10
Note also the use of the rsidebar3 Lianja/VFP function (rsidebar3.prg).
This example can be found in the 'Lianja Web UI Demo' (example_webapp2) App included in the distribution and full information on Google Charts can be accessed from the Tools option in the System Menu in the Lianja App Builder.
Refresh interval
The interval in seconds that the content will be refreshed.
- Same as Custom content gadget
Content gadget #3
Gadget based on URL.
- Same as Content gadget #1.
Show
Show the gadget (True | False).
- Same as Custom content gadget.
Expanded
Expand the gadget when the App is first loaded (True | False).
- Same as Custom content gadget.
Height
Gadget height.
- Same as Custom content gadget.
Caption
Gadget caption.
- Same as Custom content gadget.
URL
The URL of the content to be displayed.
- See Content gadget #1: URL and Content gadget #2: URL for examples.
Refresh interval
The interval in seconds that the content will be refreshed.
- Same as Custom content gadget.
Content gadget #4
Gadget based on URL.
- Same as Content gadget #1.
Show
Show the gadget (True | False).
- Same as Custom content gadget.
Expanded
Expand the gadget when the App is first loaded (True | False).
- Same as Custom content gadget.
Height
Gadget height.
- Same as Custom content gadget.
Caption
Gadget caption.
- Same as Custom content gadget.
URL
The URL of the content to be displayed.
- See Content gadget #1: URL and Content gadget #2: URL for examples.
Refresh interval
The interval in seconds that the content will be refreshed.
- Same as Custom content gadget.