Versions Compared

Old Version 2

changes.mady.by.user Lim Yi Zheng

Saved on

compared with

New Version 3

changes.mady.by.user Lim Yi Zheng

Saved on

Key

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

Table of Contents

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.Javascript Conditional Participant is a plugin that lets you control which user is going to participate in a process. 

Get started

The easiest way to see how Image Datalist Formatter work the Javascript Conditional Participant plugin is to create a new Datalistprocess first. 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".
Depending on the plugin type, you can now view your new plugin in your form or datalist or userview

  2. You should be able to view the newly installed plugin under the Installed Plugins tab.
  3. This plugin type will show up when you map participants to users.

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

  5. 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.

Image Modified

Figure 1

Image Modified

Figure 2

Image Modified

Figure 3

Image Modified

Figure 4

Image Modified

Figure 5

Image Datalist Formatter Properties

General

NameDescriptionScreen ( Click to view)
NameName of Datalist.


GeneralImage Modified


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 MappingImage Modified

Formatter

NameDescriptionScreen (Click to view)
Formatter

Determine which type of formatter to be used.

FormatterImage Modified

Image Datalist Formatter Properties

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

Datalist FormatImage Modified

Click on image to view full size?

Allow user to enlarge the image when clicked.

Height

Height of the image.

WidthWidth of the image.