Radio

The Radio Button is a generic HTML form input element in Joget. In the Form Builder, you can define the options available to the Select Box through various methods, including using the Options Data Store.

How does it work?

To see how the Radio button works, follow these steps:

1. Start the Joget Server and open the App Center.
2. Log in as admin and click the pencil icon on the Expenses Claim to open the App Composer.
   
3. Click the + button for Create New Form and fill up the Form Details as follows:
   
   1. Form ID: radio
   2. Form Name:  Radio 
   3. Table Name: j_expense_claim
      
      
      
      
4. On a Form, drag and drop a Radio element onto the canvas.
5. Click the Radio element on the canvas to open the Configure Radio properties.
   
6. Fill up the following fields as follows and click on Apply Change:
   1. ID: type
   2. Options:
      

      Default Value	Label
      Local	Local
      International	International

7. Click Preview and click the options available.

Configure radio

Configuring the Radio button involves setting the label, ID, options, data handling, validation, dependency, UI settings, and workflow integration.

Fill in the following fields:

• Label: The element label is to be displayed to the end-user.
• ID: Element ID. A corresponding database table column c_type will be created by declaring it as type. See Form Element for more information about defining the ID and a list of reserved IDs.
• Options: Select Box options. Options defined here will not be used if the Options Data Store is defined below.
• Or Load Data From: Radio options to be populated using the Options Data Store plugin.

  Available options:

  • BeanShell
  • Database SQL Query
  • Database Wizard
  • Department
  • Form Data
  • Grade
  • Group
  • JSON API
  • Organization
  • Plugin Template - Options Data Store
  • User

Advanced options

Advanced options provide additional data handling, validation, and UI customization settings.

Data

The data section includes settings for default values, validators, and dependencies to ensure data integrity and proper functionality.

Fill in the following fields:

• Value: Default value when no existing value is found. Hash variables are accepted (e.g., #currentUser.firstName# #currentUser.lastName#).
  To pre-populate the field with the currently logged-in user's name.
  You may define multiple default options by separating them using semicolons.
  
  Sample
  option1;option2;option3
• Validator: Attach a Validator plugin to validate the input value. See Form Validator for more information.
  When will validation takes place?
  Validation will take place whenever a form is submitted except when it is submitted as Save as Draft.
  • Basic
  • BeanShell
  • Date and Time Duplicate Validator
  • Directory
  • Duplicate Value
  • Equal Value
  • Multi Form Validator
  • Password
  • Plugin Template - Validator

Dependency

Dependencies dynamically change the available options based on the grouping attribute defined in the options by matching the current value of the element ID defined.

Fill in the following fields:

• Field ID to Control Available Options Based on Grouping: Dynamically change the available options based on the grouping attribute defined in the options by matching the current value of the element ID defined.

UI

The UI section includes settings for element visibility, label display, and read-only configurations to enhance user experience.

Fill in the following fields:

• Readonly: Determines if the element is editable.
• Display Field as Label When Readonly?: Displays the value of the element as plain text when the element is set to Readonly.

Workflow

Fill in the following fields:

• Workflow Variable: If the form is part of a workflow process, upon saving the form by clicking Save as Draft or Complete, the value in this input field will be saved into the corresponding workflow variable named in this field.

context attribute status does not exist in process context - adding new attributes to the process context is not allowed