Versions Compared

Key

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

...

Panel
borderColorGreen
borderWidth1
titleBGColor#ddffcc
borderStylesolid
titleDefinition

Plugin Template Pack aims to factorize repetitive configurations of the same plugin throughout the same app in one place to ease future maintenance. It currently supports:-

with more plugin types to be supported in the future.

This plugin source code is available in a new open source repository at https://github.com/jogetoss/plugin-template-pack. JogetOSS is a community-led team for open-source software related to the Joget no-code/low-code application platform. Projects under JogetOSS are community-driven and community-supported, and you are welcome to contribute to the projects.

...

2. Go to the "Releases" page (See Figure 1).

Figure 1: Release page link

3. Click on the .jar file to initiate the download (See Figure 2).

Figure 2: Plugin-template-pack .jar file

...

2. Log in as admin and click on Design New App  (See Figure 3) or click on existing application.

Figure 3: Design New App

3. For new applications, fill up the App ID with camel case, and App Name, and click on the "Save" button. (See Figure 4)

Figure 4: Fill up App Details

4.  Create a New Form, fill up Form ID in camel case, Form Name, and Table Name then click on the Save button (See Figure 5).

Figure 5: Fill up Form Details

5. Fill up the form with several fields, save it and then click the "Generate App" button (See Figure 6).

Figure 6: Save Form and Generate App

6. After Clicking the "Generate App" button, generate the app with CRUD and Datalist included (See Figure 7).

Image Modified

Figure 7: Generate CRUD and Datalist

8.  After generating the app, Launch the UI Builder  by clicking on the newly created CRUD. (See Figure 8).

Image Modified

Figure 8: Enter UI builder

9. Navigate the user view menu elements and add the "Plugin Template Management" to the User view Menu. (See Figure 9).

Figure 9: Plugin Template Management

...

Edit Plugin Template Management

Figure 10: Edit Plugin Template Management

NameDescription
IDThe  'ID'  in the property editor is a unique identifier. The value of this property is auto-generated.
Custom ID

Item link slug. It is an Optional field

Info
titleInfo

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.

LabelMenu label to be displayed to the end-user. It is a Mandatory field.

UI

Figure 11: UI (List) properties of Plugin Template Management

NameDescription
Button Position

The position of buttons  in the Userviewuserview:

  • Top Left
  • Top Right
  • Bottom Left
  • Bottom Right
  • Top Left & Bottom Left
  • Top Right & Bottom Right
Selection Type

The type record selector in the userview:

  • Multiple: Allow users to select multiple or all the records simultaneously.
  • Single: Allow users to select only one record at a time.
Selector Position

The position of the record selector in the userview:

  • Left
  • Right
  • Both left & right
  • No
New Record Button Label

New Record Button Label to be displayed to the end-user.

Default   Value: New

Edit Link Label

Edit Record Button Label to be displayed to the end-user.

Default   Value: Edit

Delete Button Label

Delete Record Button Label to be displayed to the end-user.

Default   Value: Delete

Custom HeaderCustom Header in HTML.
Custom FooterCustom Footer in HTML

Figure 12: UI (Add) properties of Plugin Template Management

NameDescription
Cancel Button Label

Cancel Button Label to be displayed to the end-user.

Default   Value: Cancel

Save Button Label

Save Button Label to be displayed to the end-user.

Default   Value: Save

Custom HeaderCustom Header in HTML.
Custom FooterCustom Footer in HTML

Figure 13: UI (Edit) properties of Plugin Template Management

NameDescription

Back Button Label

Back Button Label to be displayed to the end-user.

Default   Value: Back

Save Button Label

Save Button Label to be displayed to the end-user.

Default   Value: Edit

Custom HeaderCustom Header in HTML.
Custom FooterCustom Footer in HTML

Performance & Offline

Image Removed

...

Cache Settings

...

Name

...

Description

...

Caching options are:

  • None: No caching is enabled. This is the default setting.
  • Application: The userview page content is cached at the application level. Cache content by application where all users will see the same content.
  • User:  The userview page content is cached per user. This means that there is a copy of personalized content stored for each user login.

...

borderColorRed
titleColorWhite
titleBGColor#f45555
borderStylesolid
titleNote

...

PWA Offline Settings

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

...

Name

...

Description

...

borderColorRed
titleColorWhite
titleBGColor#f45555
borderStylesolid
titleNote

...

UI of Plugin Template Management

UI List

Image RemovedImage Added

Figure 15 14: UI List of Plugin Template Management

UI (Add)

Figure 16 15: UI (Add) of Plugin Template Management 

UI (Edit)

Figure 17 16: UI (Edit) of Plugin Template Management

Plugin Types Supported as Template

The plugin types it supports as a template, for now, are as follows:

Datalist Formatter

Steps to use the Plugin Template - Datalist Formatter Plugin:

1. Launch the app, navigate to the Plugin Template Management menu, and click the "New" button to create a new Plugin Template (See Figure 10).

Image Removed

Figure 10 Create a new Plugin Template

2. Fill up the Plugin Template Management Page accordingly and for the plugin choose any one of the formatter under Datalist Column Formatter. (See Figure 11)

Image Removed

Figure 11 Fill up the Plugin Template details

3.  Configure the plugin by clicking the "Configure Plugin" button according to Figure 12 and then submit it.

Image Removed

Figure 12 Configure plugin (Bean Shell Formatter) for the Plugin Template

4. Click the "Save" button to create a Plugin Template for formatting Datalists. (See Figure 13)

Image Removed

Figure 13 Save the new Plugin Template

5. Click the List - Plugin Template to open the design view of the Datalist builder. (See Figure 14)

Image Removed

Figure 14 Enter Datalist builder

6.  Preview the Datalist before applying the "Plugin Template - Datalist Column Formatter" for comparing the effect of the Formatter. (See Figure 15)

Image Removed

Figure 15 Preview Datalist before plugin Template

7. In the Datalist builder go to properties of a column and navigate to General > Action Mapping > Formatter  select "Plugin Template - Datalist Formatter" in the Formatter drop-down list. (See Figure 16)

Image Removed

Figure 16 Choose Plugin Template - Datalist Formatter for the "Formatter" field

8. Navigate to General > Action Mapping > Formatter > Plugin Template - Datalist Formatter  and choose the template that has been created and press OK to apply it. (See Figure 17)

Image Removed

Figure 17 Select the created Plugin Template

9. Repeat steps 17 and 18 for as many columns as you want in the Datalist and then save it.

10. Preview the Datalist to view the intended effect of the template of Plugin Template - Datalist Formatter. (See Figure 18)

Image Removed

Figure 18 Preview the form after Plugin Template

11. Using one Plugin Template created, we can now apply the effect and format of the template to as many columns as we want in the Datalist builder increasing efficiency and reducing the chance of human error. (See Figure 19)

Image Removed

Figure 19 Columns with Plugin Template - Datalist Formatter applied

Userview/ Form Permission

Steps to use the Plugin Template - Userview / Form permission:

1. Launch the app "Plugin Template Demo" and create a new template again on the Plugin Template Management Page by clicking the "New" button. (See Figure)

Image Removed

Figure Create a new Plugin Template

...

Image Removed

Figure Fill up the Plugin Template details

3. Click the "Configure Plugin" button and as there are no properties to configure for this plugin, submit the plugin and save the template by clicking the "Save" button.

4. The Permission Plugin Template created can be applied to enforce Permission rules to both Form and Userview.

For Userview

...

2. For applying the Permission plugin template at the Userview   itself, go to the Userview Builder, select Settings, navigate to Configure Layout > Theme (DX Progressive Theme) > Configure Permission  and choose Plugin Template - Permission for the Permission Type field. (See Figure)

Image Removed

Figure  Choose Plugin Template - Permission for the "Permission Type" field

3.  Navigate to Permission Type (Plugin Template - Permission), select the template you have created, and save the Userview by clicking the "Save" button. (See Figure)

Image Removed

Figure Select the created Plugin Template

4.  For applying the Permission plugin template at the Userview Category level, go to the Userview Builder, select the permission icon of the category and choose Plugin Template - Permission for the Permission Type field. (See Figure)

Image Removed

Figure Choose Plugin Template - Permission for the "Permission Type" field

5. Navigate to Permission Type (Plugin Template - Permission), select Permission the template you have created, click the "OK" button, and save the Userview by clicking the "Save" button. (See Figure)

Image Removed

Figure Select the created Plugin Template

...

borderColorRed
titleColorWhite
titleBGColor#f45555
borderStylesolid
titleNote

...

For Form

1. The Form Permission plugin template created can be applied at the  Form  or  Form Section  level using the Permission Control feature.

2. For applying the Form Permission plugin template to the Form itself, go to the Form Builder of the form, select Properties, navigate to Edit Form > Advanced,   and choose Plugin Template - Permission for the Permission Type field. (See Figure)  

Image Removed

Figure Choose Plugin Template - Permission for the "Permission" field

3.  Navigate to Permission Type (Plugin Template - Permission), select the template you have created, and save the Userview by clicking the "Save" button. (See Figure)

Image Removed

Figure Select the created Plugin Template

...

...

Image Removed

Figure Choose Plugin Template - Permission for the "Permission" field

...

...

Image Removed

Figure Select the created Plugin Template

...

borderColorRed
titleColorWhite
titleBGColor#f45555
borderStylesolid
titleNote

...

Process Tool

Steps to use the Plugin Template - Process Tool:

1. Launch the app "Plugin Template Demo" and create a new template again on the Plugin Template Management Page by clicking the "New" button. (See Figure)

Image Removed

Figure Create a new Plugin Template

...

Image Removed

...

...

...

Image Removed

Figure Map Tool to Plugin Template created

6. After clicking on the "Add/Edit Plugin" button, select Plugin Template - Process Tool. (See Figure)

Image Removed

Figure Choose Plugin Template - Process Tool 

7. Select the Template created for your Process Tool and click submit to save your tool mapping. (See Figure)

Image Removed

Figure Select the created Plugin Template

...

...

Steps to use the Plugin Template - Form Options Binder:

1. Create a new Form called Country Categories from which the country select boxes of forms will populate its selections from. (See Figure)

...

...

...

2. Drag a text field into the Country Categories form, label it as Country, and make it a mandatory field.

3. Save the new form and click on Generate App to generate a CRUD for it.

4. Launch the userview, go to "Manage Country Categories" and create a few country records. (See Figure)

Image Removed

Figure Create New records for Country Categories

5. Create a new template again on the Plugin Template Management Page by clicking the "New" button. (See Figure)

Image Removed

Figure Create a new Plugin Template

...

Image Removed

Figure Fill up the Plugin Template details

7. Configure the Default Form Options Binder plugin by clicking the "Configure Plugin" button. Select the Country Categories form as the source form, point to the correct form field to represent the labels for each of the options values, and click the "Submit" button to save the configuration. (See Figure)

Image Removed

Figure Configure Plugin (Default Form options Binder) for the Plugin Template

8. Save the Plugin Template by clicking the "Save" button. 

9. Enter the Design View of the Plugin Template Form and click on the edit icon of the Country select box to edit its properties.

...

Image Removed

Figure Choose Plugin Template - Options Binder for the "Or Choose Options Binder" field

11. Navigate to Or Choose Options Binder (Plugin Template - Options Binder), select the Option binder template created, and click the "OK" button. (See Figure)

Image Removed

Figure Select the created Plugin Template

12. Save the form and preview the form to check the results. (See Figure)

Image Removed

Figure Check results

...

...

Steps to use the Plugin Template - Form Validator:

1. Launch the app "Plugin Template Demo" and create a new template again on the Plugin Template Management Page by clicking the "New" button. (See Figure)

Image Removed

Figure Create a new Plugin Template

...

Image Removed

Figure Fill up the Plugin Template details

3. Configure the Default Validator Plugin by clicking the "Configure Plugin" button. Make sure the Mandatory property is checked and then click the "Submit" button to save the configuration. Save the Plugin Template by clicking the "Save" button. (See Figure)

Image Removed

Figure Configure Plugin (Default Validator) for the Plugin Template

4. Enter the Design View of the Plugin Template Form.

5. Edit one of the fields in the form and navigate to Edit Text Field > Advanced Options and select Plugin Template - Validator for the Validator property. (See Figure)

Image Removed

Figure Choose Plugin Template - Validator for the "Validator" field

6. Navigate to Validator (Plugin Template - Validator), select the template you have created, and click the "OK" button. (See Figure)

Image Removed

Figure Select the created Plugin Template

7. Repeat Steps 5 and 6 for as many fields as you want in the Form Builder and then save the form.

8. Launch the app and enter the Plugin Template Form page and the fields that are set with the Plugin Template will have an asterisk (*) to indicate they are mandatory fields. (See Figure)

Image Removed

...