Joget DX Available for Download

Check out Joget DX, the next generation successor to Joget Workflow for faster, simpler digital transformation.

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

NameDescriptionScreens (Click to view)
IDMenu element unique id. Userview will use this ID in the URL for this menu if "Custom ID" property is empty.

Figure 1: Card Viewer Properties

Custom ID

Item link slug. Optional field.

Info
Ensure that value defined here is unique to other userview menus in the app, since the first matching/conflicting ID will take precedence in page loading.
LabelThe userview menu label.
Data Binder

See list of available Datalist Binders, to source the data for cards.

...

NameDescriptionScreens (Click to view)
Template

Available selections:

  • Predefined - Uses a predefined design for card content
  • Custom - Able to define your own HTML design for card content

Figure 2: Column to Data Mappings - Predefined


Figure 3: Column to Data Mappings - Custom

HTML

HTML design for the content of each and every card.

Available when Template is set to "Custom".

CSS

Custom CSS.

Available when Template is set to "Custom".

JavaScript

Custom JS script.

Available when Template is set to "Custom".

TitleField to represent the card title.
Description

Field to represent the description in the card.

Typically expects a column ID from the selected data binder.

Tip
iconfalse

If no valid column is detected from data binder, this will be literal string with support for hash variable and syntax like {columnName} to map column IDs from data binder.

Example:

This product cost {productRetailPrice} and belongs to the category of {productCategory}. It ships with {deliveryInfo}.

URL

Field to represent the URL when card is clicked on.

Typically expects a column ID from the selected data binder.

Tip
iconfalse

If no valid column is detected from data binder, this will be literal string with support for hash variable and syntax like {columnName} to map column IDs from data binder.

Example:

productDisplay?id={id}

Retrieve image URL from FormCheck this option to display images in the cards.
Form to retrieve image from

The target form where records contains the images.

Available when Retrieve image URL from Form is checked.

Image

The target field (Image Upload Field) that stores the image.

Available when Retrieve image URL from Form is checked.

...