Difference between revisions of "Image Strip Options"
Yvonne.milne (Talk | contribs) (→Image notes editable) |
Yvonne.milne (Talk | contribs) (→Image viewer visible) |
||
(7 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | '' | + | ==Overview== |
+ | ImageStrip Sections display a horizontal 'strip' of data-bound images. They can optionally include a text notes panel. | ||
+ | |||
+ | The Lianja Tablet Web UI Demo App (example_webapp1) includes an ImageStrip Section: | ||
+ | |||
+ | [[{{ns:file}}:ImageStripOptions1.png|800px|left|border|link={{filepath:ImageStripOptions1.png}}|Image Strip Options]] | ||
+ | <br clear=all> | ||
+ | |||
+ | In web/mobile Apps, the images are touch-friendly - here calling the Double Click event [[Custom Delegates|delegate]]. | ||
+ | |||
+ | [[{{ns:file}}:ImageStripOptions2.png|800px|left|border|link={{filepath:ImageStripOptions2.png}}|Image Strip Options]] | ||
+ | <br clear=all> | ||
+ | |||
+ | Which uses the [[Lianja]].showDialogPanel() method to display the information in a slide-in panel. | ||
+ | |||
+ | [[{{ns:file}}:ImageStripOptions3.png|800px|left|border|link={{filepath:ImageStripOptions3.png}}|Image Strip Options]] | ||
+ | <br clear=all> | ||
+ | |||
+ | <code lang="javascript"> | ||
+ | Lianja.showDialogPanel("EMPLOYEE INFORMATION", "lib:/showdialogpanel_employee.rsp?employeeid={employees.employeeid}", 500); | ||
+ | </code> | ||
+ | |||
+ | Touch or click on the text notes panel to edit... | ||
+ | |||
+ | [[{{ns:file}}:ImageStripOptions4.png|800px|left|border|link={{filepath:ImageStripOptions4.png}}|Image Strip Options]] | ||
+ | <br clear=all> | ||
+ | |||
+ | In a slide-in dialog panel: | ||
+ | |||
+ | [[{{ns:file}}:ImageStripOptions5.png|800px|left|border|link={{filepath:ImageStripOptions5.png}}|Image Strip Options]] | ||
+ | <br clear=all> | ||
+ | |||
+ | ==example_imagestrip App== | ||
+ | From v7.1, the Lianja App Builder distribution includes the example_imagestrip App. This demonstrates the new Image Viewer functionality. | ||
+ | |||
+ | When the [[#Image viewer visible|Image viewer visible]] attribute is set to True, clicking on an image in the ImageStrip displays that image in the Image viewer. | ||
+ | |||
+ | [[{{ns:file}}:example_imagestrip1.png|800px|left|border|link={{filepath:example_imagestrip1.png}}|Image Strip Options]] | ||
+ | <br clear=all> | ||
+ | |||
+ | Clicking (or touching) the details panel now slides in the editor - either Text or HTML depending on the [[#Image notes format|Image notes format]] attribute setting. | ||
+ | |||
+ | [[{{ns:file}}:example_imagestrip3.png|800px|left|border|link={{filepath:example_imagestrip3.png}}|Image Strip Options]] | ||
+ | <br clear=all> | ||
+ | |||
+ | [[{{ns:file}}:example_imagestrip4.png|800px|left|border|link={{filepath:example_imagestrip4.png}}|Image Strip Options]] | ||
+ | <br clear=all> | ||
+ | |||
+ | Clicking (or touching) the '-' button in the section header allows images to be deleted. | ||
+ | |||
+ | Clicking (or touching) the '+' button in the section header or the big '+' after the last ImageStrip image allows images to be added. | ||
+ | |||
+ | [[{{ns:file}}:example_imagestrip2.png|800px|left|border|link={{filepath:example_imagestrip2.png}}|Image Strip Options]] | ||
+ | <br clear=all> | ||
+ | |||
+ | This provides you with a powerful No-Code section in Lianja 7.1 | ||
+ | |||
+ | You can of course customize its operation using Low-Code delegates e.g. handle double click of an image. | ||
==See Also== | ==See Also== | ||
Line 8: | Line 65: | ||
==Image notes editable== | ==Image notes editable== | ||
− | Allow the image notes to be edited (True | False). From | + | Allow the image notes to be edited (True | False). From v6.0. |
+ | |||
+ | ==Image notes format== | ||
+ | The format of the image notes to be edited (Text | Html). From v6.0. | ||
==Image notes caption== | ==Image notes caption== | ||
Line 23: | Line 83: | ||
Image notes foreground color | Image notes foreground color | ||
* See [[Colors]] | * See [[Colors]] | ||
+ | |||
+ | ==Image viewer visible== | ||
+ | Show the image viewer panel (True | False). From v7.1. | ||
+ | * See the example_imagestrip App [[#example_imagestrip_App|as shown above]]. | ||
+ | |||
+ | |||
+ | [[Category:Sections]] | ||
+ | [[Category:Lianja v7.1]] |
Latest revision as of 11:19, 3 March 2022
Contents
Overview
ImageStrip Sections display a horizontal 'strip' of data-bound images. They can optionally include a text notes panel.
The Lianja Tablet Web UI Demo App (example_webapp1) includes an ImageStrip Section:
In web/mobile Apps, the images are touch-friendly - here calling the Double Click event delegate.
Which uses the Lianja.showDialogPanel() method to display the information in a slide-in panel.
Lianja.showDialogPanel("EMPLOYEE INFORMATION", "lib:/showdialogpanel_employee.rsp?employeeid={employees.employeeid}", 500);
Touch or click on the text notes panel to edit...
In a slide-in dialog panel:
example_imagestrip App
From v7.1, the Lianja App Builder distribution includes the example_imagestrip App. This demonstrates the new Image Viewer functionality.
When the Image viewer visible attribute is set to True, clicking on an image in the ImageStrip displays that image in the Image viewer.
Clicking (or touching) the details panel now slides in the editor - either Text or HTML depending on the Image notes format attribute setting.
Clicking (or touching) the '-' button in the section header allows images to be deleted.
Clicking (or touching) the '+' button in the section header or the big '+' after the last ImageStrip image allows images to be added.
This provides you with a powerful No-Code section in Lianja 7.1
You can of course customize its operation using Low-Code delegates e.g. handle double click of an image.
See Also
Image Strip Section Attributes
Image notes visible
Show the image notes panel (True | False)
Image notes editable
Allow the image notes to be edited (True | False). From v6.0.
Image notes format
The format of the image notes to be edited (Text | Html). From v6.0.
Image notes caption to display
Image notes data source
Image notes data source (column name)
Image notes backcolor
Image notes background color
- See Colors
Image notes forecolor
Image notes foreground color
- See Colors
Image viewer visible
Show the image viewer panel (True | False). From v7.1.
- See the example_imagestrip App as shown above.