Button

You have to go through a four-step form wizard to enable this Control, i.e., Type, Design, Action & Advance. Let’s explain these steps below:

1st Step – Type

This is the first step of the “Button” control form wizard. Here you are required to select the type of button:

  1. Type

2nd Step – Design

  1. Database Field Name (mandatory): Defines the name of the database field to which the component's data will be mapped and stored.
  2. Button Name: The label or text displayed on a button, which indicates its function or purpose.
  3. Select Style: Select option from the dropdown menu
  4. Button Icon: Select option from the dropdown menu
  5. Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.
  6. Tooltip: A brief description or hint displayed when a user hovers over or focuses on an element, providing additional information.

3rd Step – Action

If “Button Type” is selected as “Submit”, then the following actions should perform as follows:

  1. API
    1. Primary key: A unique identifier for each record in a database table, ensuring that no two rows have the same value in this field.
    2. Create
      1. Choose Data Source: Select data source from the following HTTP, Workflow, No SQL or RDBMS
        1. HTTP
          1. Data Connection: Defines the connection to the data source, such as a database or API.
          2. Method (mandatory): Select method from the following GET, PUT, POST, PATCH, DELETE or POCO
          3. API URL (mandatory): Specifies the endpoint URL for API requests.
          4. Query Parameters: A set of parameters appended to the API URL to filter or customize the request.
            1. Key: The name of the query parameter.
            2. Value: The value assigned to the query parameter.
            3. Query Variable: A variable that dynamically replaces the parameter's value.
            4. Select Type: Defines the type or format of the query parameter.
          5. Headers: A collection of key-value pairs sent with the API request.
            1. Name: The name of the header parameter.
            2. Value: The value of the header parameter.
          6. Others: Additional settings for the API request.
            1. Enable raw query: Allows the use of raw query strings for custom API calls.
      2. Enable Encryption: Enables or disables the encryption of sensitive data to enhance security.
      3. Response Attribute: Defines the attribute in the response that will be used for further processing or display.
      4. Enable log: Allows logging of operations or activities for tracking and debugging purposes, often used to monitor system behavior or user interactions.
        1. Description: Enter extra suggestions for user experience on this field
    3. Update
      1. Choose Data Source: Select data source from the following HTTP, Workflow, No SQL or RDBMS
        1. HTTP
          1. Data Connection: Defines the connection to the data source, such as a database or API.
          2. Method (mandatory): Select method from the following GET, PUT, POST, PATCH, DELETE or POCO
          3. API URL (mandatory): Specifies the endpoint URL for API requests.
          4. Query Parameters: A set of parameters appended to the API URL to filter or customize the request.
            1. Key: The name of the query parameter.
            2. Value: The value assigned to the query parameter.
            3. Query Variable: A variable that dynamically replaces the parameter's value.
            4. Select Type: Defines the type or format of the query parameter.
          5. Headers: A collection of key-value pairs sent with the API request.
            1. Name: The name of the header parameter.
            2. Value: The value of the header parameter.
          6. Others: Additional settings for the API request.
            1. Enable raw query: Allows the use of raw query strings for custom API calls.
      2. Enable Encryption: Enables or disables the encryption of sensitive data to enhance security.
      3. Response Attribute: Defines the attribute in the response that will be used for further processing or display.
      4. Enable log: Allows logging of operations or activities for tracking and debugging purposes, often used to monitor system behavior or user interactions.
        1. Description: Enter extra suggestions for user experience on this field
  2. Form Behavior
    1. Side bar close on submit: Automatically closes the sidebar upon successful form submission or action completion.
    2. Side bar close on submit [On Error]: Closes the sidebar even if an error occurs during form submission or action processing.
    3. Refresh component on submit: Reloads or updates the specified component upon successful form submission or action execution.
    4. Select Refresh Form: Select option from the dropdown menu.
  3. Message
    1. Success Message Icon: Icon displayed alongside the success message to visually indicate success.
    2. Success Message Title: Title of the success message shown after a successful operation.
    3. Success Message Text: Additional details or text accompanying the success message.
    4. Update Message Icon: Icon displayed alongside the update message to visually indicate an update action.
    5. Update Message Title: Title of the message shown after a successful update.
    6. Update Message Text: Additional details or text accompanying the update message.
    7. Error Message Icon: Icon displayed alongside the error message to visually indicate an error.
    8. Error Message Title: Title of the message shown after an operation failure.
    9. Error Message Text: Additional details or text explaining the error or failure.
    10. Submit on confirm: A feature requiring user confirmation before submitting a form or action.
      1. Confirm Message: The message displayed to users in the confirmation dialog.
      2. Confirm Button Text: The label or text on the confirm button in the confirmation dialog.
      3. Cancel Button Text: The label or text on the cancel button in the confirmation dialog.
      4. Confirm Button Type: Select option from the dropdown menu.
      5. Cancel Button Type: Select option from the dropdown menu.
      6. Hide Cancel Button: An option to hide the cancel button in the confirmation dialog.
      7. Call additional API: Enables calling a secondary API after receiving confirmation from the user.
        1. Field Name (If confirm message from response of first API): Specifies the field to extract the confirmation message from the response of the initial API call.
        2. Confirm API URL: The endpoint URL of the additional API to be called upon confirmation.
        3. Confirm API param: Parameters to be sent with the confirm API request.
          1. Key: The name of the parameter.
          2. Value: The value of the parameter.
          3. From Data Model: Indicates if the parameter value should be fetched from the data model.
          4. Is Page Variable: Indicates if the parameter is derived from a page-level variable.
  4. Validation
    1. Enable auto validate on submit: Automatically validates the form or input fields upon submission to ensure compliance with predefined rules.
      1. Response field: Specifies the field in the response where the required data or value is located.
      2. Validation message: The message displayed when a validation rule is not met, guiding the user to correct the input.
    2. Reset Model From Response: Resets specific form fields or models based on values received in the API response.
      1. Reset All Form Model: Clears all form fields and resets them to their initial state or default values.
      2. Update Model Form: Select option from the dropdown menu
  5. Others
    1. Attach With Form Wizard: Links the current form with a form wizard for guided navigation through steps.
      1. Form Wizard Move Next: Enables moving to the next step in the form wizard upon certain actions.
        1. Form Wizard Attribute Name (mandatory): A required attribute name that identifies the form wizard step or behavior.
        2. Form Wizard Component Form Id (mandatory): Select the identifier of the form component to link with the wizard from a dropdown menu.
        3. Move Back: Allows navigation to the previous step in the form wizard.
          1. Submit And Move Next: Submits the current step and transitions to the next step in the form wizard.
    2. Generate PDF on submit: Creates a PDF document upon form submission.
      1. Primary Key: A unique identifier used to associate data with the generated PDF.
      2. Check PDF Onload: Automatically verifies or displays the PDF when it is generated.
      3. PDF Response Model Key: Specifies the response key where the PDF details are stored.
      4. Select PDF Form Name: SSelects the PDF form template to use from a dropdown menu.
      5. Generate and open PDF: Generates the PDF and immediately opens it for viewing.
      6. Upload Word Template: Allows uploading a Word document template to be converted into a PDF.

If “Button Type” is selected as “Redirect”, then the following actions should perform as follows:

  1. Redirect URL: Specifies the target URL to which the user or process should be redirected.
  2. Primary Key: A unique identifier used for data or node association in the redirection process.
  3. Primary Node Text: The display text for the primary node in the redirection context.
  4. Redirect Type: Select option from the dropdown menu. Determines the type of redirection, selected from available options in a dropdown menu.
  5. Query String Params: Defines key-value pairs to be appended as query parameters in the redirect URL.
    1. Key: The name of the query parameter.
    2. Value: The value associated with the query parameter.
  6. Is External URL: Specifies whether the redirect URL points to an external location.
    1. Is Primary Node from response: Indicates if the primary node value is fetched from the API response.
    2. Is External URL from API data: Indicates if the external URL is dynamically obtained from API data.
  7. Dynamic Redirect URL: Enables dynamic generation of the redirect URL based on specific attributes.
    1. Redirect URL Attribute: Specifies the attribute used to dynamically generate the redirect URL.

If “Button Type” is selected as “Sidebar/Popup”, then the following actions should perform as follows:

  1. Show in popup: Specifies whether the content should be displayed in a popup window.
  2. Redirect URL: Specifies the target URL to which the user or process should be redirected.
  3. Primary Key: A unique identifier used for data or node association in the redirection process.
  4. Form Id: Select option from the dropdown menu. Specifies the form ID to be used in the context.
  5. Bind Data on Initialization: Ensures that data is bound to the form or fields during initialization.
  6. Disable Sidebar close: Prevents the sidebar from being closed by the user.
  7. Sidebar close warning Title: Title of the warning displayed when attempting to close the sidebar.
  8. Message Icon: Select option from the dropdown menu. Specifies the icon to be used in the message.
  9. Sidebar close warning Message: The message displayed as a warning when the user tries to close the sidebar.

If “Button Type” is selected as “Print”, then the following actions should perform as follows:

  1. Print Container Key (mandatory): A required unique identifier for the print container, used to associate the print data.
  2. Print Title: The title displayed on the printed output, typically summarizing the content or purpose of the document.

If “Button Type” is selected as “Digital Signature”, then the following actions should perform as follows:

  1. Submit on signature capture: If this button is set to “Yes,” you can perform the “Submit Button” actions described above.
  2. Header Text: The text displayed as the header of the signature pad.
  3. Confirm Button Text: The text displayed on the button used to confirm the signature.
  4. Clear Button Text: The text displayed on the button used to clear the signature pad.
  5. Pen Color: The color of the pen used for drawing the signature.
  6. Background Color: The background color of the signature pad.
  7. Height: The height of the signature pad.
  8. Signature Background Image: An optional image displayed as the background of the signature pad.
  9. Signature Background Image Type: Specifies whether the background image is provided as a base64 string or an image URL.
  10. Mobile Only: Properties applicable only to mobile devices.
    1. Auto Clear: Automatically clears the signature pad after saving.
    2. Description Text: Displays descriptive text in the footer of the signature pad.
    3. Button Text Color: The color of the text on the buttons in the signature pad.
    4. Button Background Color: The background color of the buttons in the signature pad.

If “Button Type” is selected as “PDF Converter”, then the following actions should perform as follows:

  1. Primary Key: A unique identifier used to associate and retrieve the specific PDF data.
  2. Check PDF Onload: Automatically loads and checks the PDF when the page or process initializes.
  3. PDF Response Model Key: Specifies the key in the response model where the PDF data is located.
  4. Select PDF Form Name: Select option from the dropdown menu. Specifies the name of the form template to be used for generating the PDF.
  5. Generate and open PDF: Automatically generates the PDF and opens it for review or download.
  6. Upload Word Template: Allows uploading a Word template that can be converted into a PDF.

4th Step – Advance

  1. Design
    1. Size: Select size from the following Small, Medium, or Large. Specifies the size of the element to fit different layouts or designs.
    2. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
    3. Custom Class: Specifies a user-defined CSS class to apply custom styles and formatting to the component.
    4. Mobile Icon: Select option from the dropdown menu. Specifies the icon to be displayed for mobile devices.
    5. Description: Enter extra suggestions for user experience on this field. Provides guidance or additional context for the user.
    6. Style: Defines CSS styling to customize the appearance and layout of the component directly.
    7. Placeholder: A placeholder text displayed in the field until a value is entered.
  2. Advance
    1. Enable Dirty Check: To make this function work, please enable Dirty Check from "Form > Setting > Validation". Tracks changes in the form and prompts the user before leaving without saving.
      1. Dirty Check Options: Configurations for dirty check functionality.
        1. Select Dirty Check Forms: Select option from the dropdown menu. Specifies which forms to apply the dirty check.
        2. Dirty Check Fields: Select option from the dropdown menu. Determines which fields are monitored for changes.
        3. Dirty Check Fields Type: Include or Omit. Specifies whether to include or exclude specific fields in the dirty check.
    2. Enable Notification: Enables notifications for specific actions or events.
    3. Created by field: Field to store information about the creator of the entry.
    4. Updated by field: Field to store information about the last user who updated the entry.
    5. GUID field name: Field to store a globally unique identifier for the entry.
    6. Submit pinned items: Ensures that pinned items in the form are submitted along with other data.
    7. Bind Button Label with Data Model: Dynamically updates the button label based on the data model.
    8. Is file upload on submit: Enables file upload functionality during form submission.
    9. Hard Delete Model keys on submit: Permanently deletes specified model keys upon submission.
      1. Delete Model items after submit: Select option from the dropdown menu. Specifies which model items to delete after submission.
    10. No Validation Check: Disables validation checks on the form.
    11. Enable Validation On Click: Triggers validation checks when a specific button is clicked.
    12. Delete API Cache: Clears cached data for the specified API.
      1. URL: The endpoint of the API whose cache needs to be deleted.
      2. Primary key: The unique identifier used for the cache entry.
      3. Primary key value field: Specifies the field containing the primary key value.
    13. Required: Ensures the field must have a value before submission.
    14. Enable Access Control: Restricts access to specific fields or actions based on user roles or permissions.
  3. Notification
    1. Notification End Point (Optional): Defines the endpoint for sending notifications, if applicable.
    2. Enable Notification on New Entry: Sends email notifications when a new entry is created.
      1. Email Connection: Select option from the dropdown menu. Specifies the email server connection settings.
      2. From: The email address from which the notification is sent.
      3. Sender: Name of the sender displayed in the email.
      4. Subject: Subject line of the notification email.
      5. Receivers: Select option from the dropdown menu. Specifies the recipients of the notification.
      6. Select Template: Select option from the dropdown menu. Specifies the email template to use.
      7. Email Template: Content of the email message.
      8. Attachments: Files to include with the email.
      9. Enter Attachment Attribute Name: Select option from the dropdown menu. Specifies the attribute name for attachments.
    3. Enable Notification on Update Data: Sends email notifications when data is updated.
      1. Email Connection: Select option from the dropdown menu. Specifies the email server connection settings.
      2. From: The email address from which the notification is sent.
      3. Sender: Name of the sender displayed in the email.
      4. Subject: Subject line of the notification email.
      5. Receivers: Select option from the dropdown menu. Specifies the recipients of the notification.
      6. Select Template: Select option from the dropdown menu. Specifies the email template to use.
      7. Update Email Template: Content of the email message for updates.
      8. Attachments: Files to include with the email.
      9. Enter Attachment Attribute Name: Select option from the dropdown menu. Specifies the attribute name for attachments.
    4. Application Notification: Sends application-level notifications for users.
      1. Notification For: Select from the following: Web, Mobile, or Both. Specifies the target platform.
      2. App Notification Type: Broadcast or Individual. Specifies whether the notification is sent to all users or specific individuals.
        1. Individual: Configures notifications for individual users.
          1. Notification User Name [Email]: Specifies the user's email address for notifications.
          2. Notification Dynamic User Name [Model Key]: Specifies the model key to dynamically determine the user.
      3. Notification Header: Header text for the notification. For dynamic values, use placeholders like {{UserId}}.
      4. Notification Description: Description text for the notification. For dynamic values, use placeholders like {{UserId}}.
      5. Notification Header For Update: Header text for update notifications.
      6. Notification Description For Update: Description text for update notifications.
      7. Mobile Notification Redirect Url: URL to redirect mobile users upon notification interaction.
      8. Notification Redirect Url: URL to redirect web users upon notification interaction.
      9. Dynamic Parameters: Key-value pairs for dynamic notification parameters.
        1. Key: The parameter key name.
        2. Value: The parameter value.
        3. Select Type: Select option from the dropdown menu. Specifies the type of parameter.
  4. Mobile
    1. Button Style: Defines the style or theme of the button.
    2. Button Active Background Color: Specifies the background color of the button when active.
    3. Button Text Color: Sets the text color of the button in its normal state.
    4. Button Active Text Color: Sets the text color of the button when active.
    5. Button Size: Determines the size of the button (e.g., small, medium, large).
    6. Border Radius: Defines the roundness of the button’s corners.
    7. Align Self: Controls alignment of the button within its container.
    8. Justify Content: Aligns the content inside the button.
    9. Padding Left: Sets the left padding inside the button.
    10. Padding Top: Sets the top padding inside the button.
    11. Padding Right: Sets the right padding inside the button.
    12. Padding Bottom: Sets the bottom padding inside the button.
    13. Margin Left: Sets the left margin outside the button.
    14. Margin Top: Sets the top margin outside the button.
    15. Margin Right: Sets the right margin outside the button.
    16. Margin Bottom: Sets the bottom margin outside the button.
    17. Gap: Defines the spacing between elements within the button.
    18. Icon Right?: Indicates whether an icon should be displayed on the right side of the button.
    19. Read bar-code before action: Enables a barcode scanning feature before executing the button action.
      1. Bar-code Mapping Field (mandatory): Specifies the field where the barcode data should be mapped.
    20. Button Type Card: Converts the button to a card-like appearance with additional features.
      1. Description: Provides extra guidance for improving user experience on this field.
      2. Image Url: URL of the image to be displayed on the button card.
      3. Image Height: Specifies the height of the image on the button card.

Click “Confirm” and “Button” control is configured.