Difference between revisions of "CarouselView Options"

From Lianjapedia
Jump to: navigation, search
(Lianja 5.0 Enhancements)
(Display images as photos)
 
(One intermediate revision by the same user not shown)
Line 127: Line 127:
  
 
==Lianja 5.0 Enhancements==
 
==Lianja 5.0 Enhancements==
''Under Construction.  Coming soon in Lianja v5.0.''
+
''Coming soon in Lianja v5.0.''
  
From Lianja v5.0, CarouselView Sections can also be data bound to a table with a blob column containing image file data and associated 'caption' and 'subcaption' character columns.
+
From Lianja v5.0, CarouselView Sections can be data bound and display the images from a blob column and the text from the associated 'caption' and 'subcaption' character columns.
  
 
The controls and indicators are used to navigate between records.   
 
The controls and indicators are used to navigate between records.   
Line 139: Line 139:
 
Full CRUD operations are supported in Desktop, Web and Mobile.
 
Full CRUD operations are supported in Desktop, Web and Mobile.
  
{|
+
{{#widget:Vimeo|id=364646936}}
|{{#widget:Vimeo|id=364646936 |width=800 |height=400}}
+
|}
+
<br clear=all>
+
  
 
The 'Car Dealer' (example_cardealer) App is included in the Lianja App Builder distribution to demonstrate this functionality.
 
The 'Car Dealer' (example_cardealer) App is included in the Lianja App Builder distribution to demonstrate this functionality.
  
[[{{ns:file}}:l5_cv1.png|center|link={{filepath:l5_cv1.png}}|CarouselView Section]]
+
[[{{ns:file}}:l5_cv1.png|left|link={{filepath:l5_cv1.png}}|CarouselView Section]]
 
<br clear=all>
 
<br clear=all>
  
Line 160: Line 157:
  
 
===Editable===
 
===Editable===
Whether the images can be added and deleted by the end-user (True|False).
+
Whether the images can be added and deleted by the end-user (True | False).
  
 
===Order by===
 
===Order by===
An optional orderby expression for the data.
+
An optional order by expression to sort the data.
 
   
 
   
 
===Filter===
 
===Filter===
Line 200: Line 197:
  
 
If a '''Filter''' is specified, this is prefixed to the where clause:  where ''filter'' and ''keyfield'' = ''keyfield expression''.
 
If a '''Filter''' is specified, this is prefixed to the where clause:  where ''filter'' and ''keyfield'' = ''keyfield expression''.
 +
 +
===Display images as photos===
 +
Whether the images should be shown as photos (True | False).  This displays the images centralized and with a border.  It is especially suitable for phone Apps or where the CarouselView controls and indicators should be displayed outside the image.
 +
 +
Display images as photos = ''False'' (default):
 +
[[{{ns:file}}:l5_nodisplayphoto.png|left|link={{filepath:l5_nodisplayphoto.png}}|CarouselView Section]]
 +
<br clear=all>
 +
 +
Display images as photos = ''True'':
 +
[[{{ns:file}}:l5_yesdisplayphoto.png|left|link={{filepath:l5_yesdisplayphoto.png}}|CarouselView Section]]
 +
<br clear=all>
  
 
==Notes on Client Support==
 
==Notes on Client Support==

Latest revision as of 09:50, 8 October 2019

See Also

CarouselView Section Attributes, PanelView Options

Overview

  CarouselView Sections are ideal as Welcome pages.

  The images can be selected by clicking on the left
  or right control arrows or by using the indicator dots
  at the bottom of the image.

  They can also be set to automatically cycle through
  at a specified interval.


CarouselView Section



A CarouselView Section displays images along with their captions and sub captions.

It can also optionally have a menu.

The next and previous arrows (Controls) and the selection dots (Indicators) move through the images.


Menu

CarouselView Section:Menu attribute


The Menu attribute is a | separated list of menuitems to be embedded at the top of the CarouselView section.

The menu may contain submenus. Sub menuitems are comma separated and in parentheses. The first menuitem cannot have sub menuitems.

Clicking on the [...] button pops up an editor. Just enter each menuitem (and its sub menuitems if required) on a line of its own and the | separators will be added for you.

Note: for single level menus, the menuitems can be comma-separated or | separated.

The Custom section menu Custom delegate is called when a menuitem or sub menuitem is selected.


Images

Add images to App



Add the images files to be used in the CarouselView Section to the App by dragging them into the Apps Workspace.


CarouselView Section: images attribute



The Images attribute is a comma separated list of image file names specifying the images to be displayed.

Clicking on the [...] button pops up an editor. Just enter each file name on a line of its own and the comma separators will be added for you.


Captions

CarouselView Section: Captions attribute



The Captions attribute is a comma separated list of captions to be displayed on the images.

Clicking on the [...] button pops up an editor. Just enter each caption on a line of its own and the comma separators will be added for you.


Sub captions

CarouselView Section: Sub captions attribute



The Sub captions attribute is a comma separated list of captions to be displayed on the images.

Clicking on the [...] button pops up an editor. Just enter each sub caption on a line of its own and the comma separators will be added for you.


Show controls

CarouselView Section: Show controls attribute



The Show controls attribute determines whether the controls (next and previous arrows) are displayed.


Show indicators

CarouselView Section: Show indicators attribute



The Show indicators attribute determines whether the indicators (selection dots) are displayed.



Cycle interval

CarouselView Section: Controls and Indicators



The controls and the indicators are shown by default and are used to move through the images.

CarouselView Section: Cycle interval attribute


The Cycle interval attribute can be set to a non-zero value to cause the images to cycle automatically.

Here the Cycle interval has been set to 5, so the next image will be selected every 5 seconds.



Lianja 5.0 Enhancements

Coming soon in Lianja v5.0.

From Lianja v5.0, CarouselView Sections can be data bound and display the images from a blob column and the text from the associated 'caption' and 'subcaption' character columns.

The controls and indicators are used to navigate between records.

The CarouselView Section can be used as the 'child' section to a related 'parent' table. Note that the relation is set using the Keyfield and Keyfield expression.

The CarouselView Section records can also be filtered and sorted.

Full CRUD operations are supported in Desktop, Web and Mobile.

The 'Car Dealer' (example_cardealer) App is included in the Lianja App Builder distribution to demonstrate this functionality.

CarouselView Section


Database

The name of the database for the data bound table.

southwind

Table

The name of the data bound table.

images

Editable

Whether the images can be added and deleted by the end-user (True | False).

Order by

An optional order by expression to sort the data.

Filter

An optional filter expression to restrict the included records.

Image column

The name of the blob column containing the image files.

image

Caption column

The name of the character column for the image caption.

caption

Subcaption column

The name of the character column for the image subcaption.

subcaption

Keyfield

The name of the column into which the Keyfield expression will be inserted when an image is added.

cust_id

This column is also used in conjunction with the Keyfield expression to restrict the included records for a related table: where keyfield = keyfield expression.

If a Filter is specified, this is prefixed to the where clause: where filter and keyfield = keyfield expression.

Keyfield expression

The expression that will be inserted into the Keyfield when an image is added. Use {expr} to insert dynamic values.

{cust.cust_id}

This column is also used in conjunction with the Keyfield to restrict the included records for a related table: where keyfield = keyfield expression.

If a Filter is specified, this is prefixed to the where clause: where filter and keyfield = keyfield expression.

Display images as photos

Whether the images should be shown as photos (True | False). This displays the images centralized and with a border. It is especially suitable for phone Apps or where the CarouselView controls and indicators should be displayed outside the image.

Display images as photos = False (default):

CarouselView Section


Display images as photos = True:

CarouselView Section


Notes on Client Support

Attribute Notes
Database -
Table -
Editable -
Menu -
Images -
Captions -
Sub captions -
Show controls -
Show indicators -
Cycle interval -
Order by -
Filter -
Image column -
Caption column -
Subcaption column -
Keyfield -
Keyfield expression -