Right Sidebar

From Lianjapedia
Jump to: navigation, search

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:

Show right sidebar

Show right sidebar (True | False).

Page Right Sidebar Attribute: Show right sidebar



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.


Collapse right sidebar

Collapse right sidebar when the App is first loaded (True | False).

Page Right Sidebar Attribute: Collapse right sidebar



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.


Page Right Sidebar: Showing and hiding the right sidebar



Clicking the 'HIDE' tab will hide the right sidebar again.


Page Right Sidebar: Showing and hiding the right sidebar on the Web client



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.

Page Right Sidebar Attribute: 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.

Page Right Sidebar Attribute: Background color



The Background color attribute determines the right sidebar background color.

Note: the Background color attribute is supported on the Desktop client only.

See also Colors and CSS.


Foreground color

Right sidebar foreground color.

  • Foreground colors are set internally for the right sidebar elements.

Border color

Right sidebar border color.

Right Left Sidebar Attribute: Border color



The Border color attribute determines the right sidebar border color.

Note: the Border color attribute is supported on the Desktop client only.

See also Colors and CSS.


Custom content gadget

Gadget based on custom script.

Page Right Sidebar: Custom content gadget


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.

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.

Page Right Sidebar: Content gadget #1


Show

Show the gadget (True | False).

Expanded

Expand the gadget when the App is first loaded (True | False).

Height

Gadget height.

Caption

Gadget caption.

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.

Content gadget #2

Gadget based on URL.

Page Right Sidebar: Content gadget #2


Show

Show the gadget (True | False).

Expanded

Expand the gadget when the App is first loaded (True | False).

Height

Gadget height.

Caption

Gadget caption.

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.

Content gadget #3

Gadget based on URL.

Show

Show the gadget (True | False).

Expanded

Expand the gadget when the App is first loaded (True | False).

Height

Gadget height.

Caption

Gadget caption.

URL

The URL of the content to be displayed.

Refresh interval

The interval in seconds that the content will be refreshed.

Content gadget #4

Gadget based on URL.

Show

Show the gadget (True | False).

Expanded

Expand the gadget when the App is first loaded (True | False).

Height

Gadget height.

Caption

Gadget caption.

URL

The URL of the content to be displayed.

Refresh interval

The interval in seconds that the content will be refreshed.