Open Slider List Formatter

Introduction

The Open Slider List Formatter Plugin allows developers to create clickable links within list columns that open associated content or forms in a dynamic, sliding panel. When a user clicks a link, a panel slides out smoothly from the right side of the screen, allowing them to view or edit target details without navigating away from their current list view.

Plugin Information

Plugins Available in the Bundle:

• Open Slider List Formatter (Datalist Column Formatter)

Supported Database: MySQL, PostgreSQL, Oracle, MS SQL Server
License: Apache License, Version 2.0

This plugin is compatible with Joget DX 8.

Get Started

Prerequisites

• Joget DX 8 Enterprise or Community Edition.
• Developer or administrator access with permissions to manage plugins and applications.

Where to get the plugin

You can download the plugin JAR file from the Joget Marketplace.

How to install

1. Download the latest release .jar file from the repository releases page.
2. Log in to your Joget Console.
3. Navigate to the Admin Bar and select Settings > Manage Plugins.
4. Click the Upload Plugins button, choose your downloaded JAR file, and click Upload.

How to use it

You can choose to either import the demo app provided or configure the plugin manually from scratch.

Steps for Importing the Demo App

1. Download the demo app.
2. Go to your Joget Home page or the All Apps view and click Import App to upload and run the downloaded demo app.

Steps for Creating the App from Scratch

1. Create a new application and open up a form in the Form Builder.
2. Add the fields you want to display in the list and save your form.
   
3. Click Generate App to Generate a CRUD and launch the application's UI using the Click here option.
   
4. Navigate to the newly generated list, open it in the List Builder, and select the column you want to convert into a slider link.
5. In the column properties pane, navigate to Properties > Formatter and select Open Slider List Formatter from the dropdown list to apply the slider functionality.
   

Configure Properties

When configuring the Open Slider List Formatter properties, you can configure the following settings :

• Hyperlink / Userview Menu ID: The ID of the UI menu or form that will be opened in the slider panel
• Hyperlink Parameters: Configure parameter mappings between the current record and the target form/userview. Use Parameter Name to define the parameter key and Column Name to specify which column value to pass
• Label: Defines the text displayed as the clickable link in the datalist column. When left empty, it will use the current column's value. Use the {columnName} syntax to display values from other columns in the same row
• Slider Width: Width of the sliding panel as a percentage (e.g., 50% means the slider will take up half the screen width)
• Display Type: Visual style of the link - options include Primary Button, Secondary Button, or plain text link
• Enable Multi Tab: When checked, clicking additional slider links opens each record in its own new tab within the same slider panel, instead of replacing the content currently displayed. This lets users open several records at once and switch between them using a tab dock at the top of the slider. When this option is left unchecked (the default), the slider behaves as a single panel — clicking a new link replaces whatever is currently open in the slider
• Tab Name Column: Only shown when Enable Multi Tab is checked. Selects which column's value is used as the label displayed on each tab in the tab dock (e.g., choosing Date Modified displays each open tab labeled with that record's last-modified timestamp)
• Tab Dock Styling: Only shown when Enable Multi Tab is checked. An expandable settings group for customizing the appearance of the tab dock at the top of the slider (e.g., active/inactive tab colors and spacing)

Expected Outcome

When the list runs in your application UI, the specified column values will render as clickable slider links. Clicking on any link triggers a sliding panel to sweep in from the right side of the screen. This panel will fully load and render the mapped userview menu or form, enabling the user to interact with the target content without losing their place on the main list.

If Enable Multi Tab is turned on, clicking multiple links opens each one as a separate tab within the slider panel, labeled according to the selected Tab Name Column. Users can switch between open records using the tab dock, and each tab retains its own state until closed.

Download Plugin

Download the plugin from the Joget Marketplace.

Download Sample App