You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

Introduction

Image Datalist Formatter gives you control of your datalist column's display format by using the plugin. For example, you can now display images in your datalist column.

Get started

The easiest way to see how Image Datalist Formatter work is to create a new Datalist. Here are the steps:

StepsScreens (Click To View)

Steps To Import This Plugin

  1. Go to the website https://marketplace.joget.org/jw/web/userview/mp/mpp/_/vad?id=imgDatalistFormatter

  2. Click "Download" on this plugin screen (It will be a .jar file).

  3. Go to your Joget Workflow localhost or server and login as admin.

  4. In Joget Console navigate to "Admin Bar>Systems Settings>Manage Plugins" and click "Upload Plugins" button.

  5. In "Upload Plugin", select the plugin .jar file you just downloaded, then click "Upload".

  6. Depending on the plugin type, you can now view your new plugin in your form or datalist or userview.

  7. Remember to always uninstall the old plugin before uploading a new version.

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

Steps to use the Plugin

  1. Start the Joget server and open the App Centre.

  2. Login as admin and click on Design New App (See Figure 1) or click on existing application.

  3. For new application, fill up the App Details and click on Save button. (See Figure 2)

  4. Create New Form, fill up Form Details and click on Save button. (See Figure 3)

  5. Create a new Datalist or select existing Datalist in your application.

  6. Select the desired Form in the Source tab.

  7. Go to the Design tab and insert the desired Columns/Filters.

  8. Edit the column properties in Datalist Builder. (See Figure 4)

  9. Click to the "Formatter" tab and select option "Image Datalist Formatter".

  10. Click on the next button and select the relevant "Form".

  11. Click on Preview button to see the expected outcome. (See Figure 5)

  12. Click on the save button.

Figure 1

Figure 2

Figure 3

Figure 4

Figure 5

Image Datalist Formatter Properties

General

NameDescriptionScreen ( Click to view)
NameName of Datalist.


General


Label*Label Datalist. This is a mandatory field.
Sortable*Allow Datalist to be arranged. This is a mandatory field.
Render value as HTMLAllow value to be provided as HTML.
Hidden*Allow Datalist to be hidden. This is a mandatory field.
Exclude in export?Allow Datalist to be excluded in export.
WidthWidth of the Datalist.

Inline Style

Allow user to change the inline style.
AlignmentDetermine the type of Header.
Header AlignmentDetermine the type of Header Alignment.

Action Mapping

NameDescription

Screen (Click to view)

Action Allow user to map to other action.

Action Mapping

Formatter

NameDescriptionScreen (Click to view)
Formatter

Determine which type of formatter to be used.

Formatter

Image Datalist Formatter Properties

NameDescriptionScreen (Click to view)
FormDetermine which form to display image.

Datalist Format

Click on image to view full size?

Allow user to enlarge the image when clicked.

Height

Height of the image.

WidthWidth of the image.




  • No labels