Card Viewer Datalist Formatter Plugin

Introduction

The Card Viewer Datalist Formatter plugin allows you to display datalist records as visually appealing cards. This plugin is ideal for showcasing records with images, titles, and descriptions in a card format within your Joget applications.

Get started

Where to get the plugin

You can download the Card Viewer Datalist Formatter plugin from the Joget Marketplace.

How to install

1. Go to the Joget Marketplace and download the plugin as a .jar file.
2. Log in as an admin on your Joget server.
3. Go to Admin Bar > Settings > Manage Plugins.
4. Click the Upload Plugins button.
5. Upload the .jar file you downloaded.
6. Depending on the plugin type, you can now use the new plugin in your form, list, or user view.

The Joget Knowledge Base has more information on managing and developing plugins.

How to use it

1. Start the Joget server and open the App Center.
2. Log in as admin, click Design New App, or select an existing one.
   
3. Fill in the App ID and App Name, then click Save. 
   
4. Create New Form, fill up the Form Details, and click the Save button.
   
5. Drag two Text Fields and an Image Upload element to the form. 
   
6. Assign the following IDs:
   • name for the first text field.
   • desc for the second text field.
   • image for the file upload field.
7. Click save and generate a CRUD.
   
   
   
8. Edit the newly created list and edit the Name column to add the Card Viewer Datalist Formatter. 
   
9. Configure the Card Viewer Datalist Formatter according to your requirements.
   
10. After ensuring you only display the Name column in the list, save the list.
11. Go to the UI builder and add a new form element. 
    
    
12. Edit the CRUD by removing the Form (Edit) component, then save the UI. 
    
    
13. Click Preview, but nothing will be shown because no data has been keyed in the Form.
    
14. Therefore, you need to fill in the Form that you have created, for example:
    1. Name: Alex
    2. Description: Working as IT Support
    3. Upload an image to be displayed on the card.
15. You should now see the card display in the UI. 
    
    

Configure card viewer list formatter properties

Fields to configure:

• Title: Map the column values as card titles (mandatory).
• Description: Column to map values as the description in the card, which will be displayed below the Title text. This is a mandatory field. HTML is accepted here.
• If no valid column is detected from the data binder, this will be a literal string with support for hash variables and syntax like {columnName} to map column IDs from the data binder.
• URL: Column to map values as the URL to be redirected to when users click the card.
• If no valid column is detected from the data binder, this will be a literal link with support for hash variables and syntax like {columnName} to map column IDs from the data binder.
• Form to Retrieve Image: Select which Form to obtain the image files/paths from.
• Image: Field from the selected form in Form to retrieve images from the property, to map images stored as the card images.

Customize card viewer properties

Fields to configure:

• URL Target: Select where to display the URL of the Card.
  • Current Window
  • New Tab
  • Popup Dialog

Download plugin

• Card Viewer Datalist Formatter Plugin

Download sample app