Image Strip Options

From Lianjapedia
Jump to: navigation, search

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:

Image Strip Options


In web/mobile Apps, the images are touch-friendly - here calling the Double Click event delegate.

Image Strip Options


Which uses the Lianja.showDialogPanel() method to display the information in a slide-in panel.

Image Strip Options


Lianja.showDialogPanel("EMPLOYEE INFORMATION", "lib:/showdialogpanel_employee.rsp?employeeid={employees.employeeid}", 500);

Touch or click on the text notes panel to edit...

Image Strip Options


In a slide-in dialog panel:

Image Strip Options


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.

Image Strip Options


Clicking (or touching) the details panel now slides in the editor - either Text or HTML depending on the Image notes format attribute setting.

Image Strip Options


Image Strip Options


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.

Image Strip Options


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

Image notes caption to display

Image notes data source

Image notes data source (column name)

Image notes backcolor

Image notes background color

Image notes forecolor

Image notes foreground color

Image viewer visible

Show the image viewer panel (True | False). From v7.1.