Joget DX Available for Download

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

Marketplace Knowledge Base
Space shortcuts
Page tree
Skip to end of metadata
Go to start of metadata

Introduction

This userview menu plugin will display records in the chosen data binder as rows of cards.

This menu also has a title quick search feature to allow users to quickly find relevant cards via card title.

You can find this plugin in the Joget Marketplace.

Card Viewer Properties

Configure Card Viewer

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.

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.

Column to Data Mappings

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.

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.

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.

Customize Card Viewer Properties

NameDescriptionScreens (Click to view)
Maximum number of columns to view

Limits the number of cards to show in a single row, before displaying more on the next row.

Expects an integer value.

Figure 4: Customize Card Viewer Properties

Performance & Offline

Cache Settings

Name

Description

Scope

Caching options are:

  • None: No caching.
  • Application: Cache content by application where all users will see the same content.
  • User: Cache by username.
Duration (s)Duration in seconds to cache content, defaults to 20 seconds if applicable.

Read more at Performance Improvement with Userview Caching.

PWA Offline Settings

Note: PWA Offline support is dependent on the theme used.

Name

Description

Enable cache for offline supportEnable caching for offline support, usually set for use on mobile browsers.

Read Progressive Web Application (PWA) for more information.

Download Plugin




  • No labels