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): These are the attributes of the form
2. Button Name
3. Select Style: Select option from the dropdown menu
4. Button Icon: Select option from the dropdown menu
5. Column Width
6. Tooltip

3rd Step – Action

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

1. API
1. Primary key
2. Create
   1. Choose Data Source: Select data source from the following HTTP, Workflow, No SQL or RDBMS
      1. HTTP
         1. Data Connection
         2. Method (mandatory): Select method from the following GET, PUT, POST, PATCH, DELETE or POCO
         3. API URL (mandatory)
         4. Query Parameters
            1. Key
            2. Value
            3. Query Variable
            4. Select Type
         5. Headers
            1. Name
            2. Value
         6. Others
            1. Enable raw query
   2. Enable Encryption
   3. Response Attribute
   4. Enable log
      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
         2. Method (mandatory): Select method from the following GET, PUT, POST, PATCH, DELETE or POCO
         3. API URL (mandatory)
         4. Query Parameters
            1. Key
            2. Value
            3. Query Variable
            4. Select Type
         5. Headers
            1. Name
            2. Value
         6. Others
            1. Enable raw query
   2. Enable Encryption
   3. Response Attribute
   4. Enable log
      1. Description: Enter extra suggestions for user experience on this field

2. Form Behavior
1. Side bar close on submit
2. Side bar close on submit [On Error]
3. Refresh component on submit
4. Select Refresh Form: Select option from the dropdown menu

3. Message
1. Success Message Icon
2. Success Message Title
3. Success Message Text
4. Update Message Icon
5. Update Message Title
6. Update Message Text
7. Error Message Icon
8. Error Message Title
9. Error Message Text
10. Submit on confirm
    1. Confirm Message
    2. Confirm Button Text
    3. Cancel Button Text
    4. Confirm Button Type: Select option from the dropdown menu
    5. Cancel Button Type: Select option from the dropdown menu
    6. Hide Cancel Button
    7. Call additional API
       1. Field Name (If confirm message from response of first API)
       2. Confirm API URL
       3. Confirm API param
          1. Key
          2. Value
          3. From Data Model
          4. Is Page Variable

4. Validation
1. Enable auto validate on submit
   1. Response field
   2. Validation message
2. Reset Model From Response
   1. Reset All Form Model
   2. Update Model Form: Select option from the dropdown menu

5. Others
1. Attach With Form Wizard
   1. Form Wizard Move Next
      1. Form Wizard Attribute Name (mandatory)
      2. Form Wizard Component Form Id (mandatory): Select option from the dropdown menu
      3. Move Back
         1. Submit And Move Next
2. Generate PDF on submit
   1. Primary Key
   2. Check PDF Onload
   3. PDF Response Model Key
   4. Select PDF Form Name: Select option from the dropdown menu
   5. Generate and open PDF
   6. Upload Word Template

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

1. Redirect URL
2. Primary Key
3. Primary Node Text
4. Redirect Type: Select option from the dropdown menu
5. Query String Params
   1. Key
   2. Value
6. Is External URL
   1. Is Primary Node from response
   2. Is External URL from API data
7. Dynamic Redirect URL
   1. Redirect URL Attribute

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

1. Show in popup
2. Redirect URL
3. Primary Key
4. Form Id: Select option from the dropdown menu
5. Bind Data on Initialization
6. Disable Sidebar close
7. Sidebar close warning Title
8. Message Icon: Select option from the dropdown menu
9. Sidebar close warning Message

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

1. Print Container Key (mandatory)
2. Print Title

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
3. Confirm Button Text
4. Clear Button Text
5. Pen Color
6. Background Color
7. Height
8. Signature Background Image
9. Signature Background Image Type: base64string or Image Url
10. Mobile Only
    1. Auto Clear: Auto Clear Signature Pad on Save
    2. Description Text: Display's text in footer
    3. Button Text Color
    4. Button Background Color

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

1. Primary Key
2. Check PDF Onload
3. PDF Response Model Key
4. Select PDF Form Name: Select option from the dropdown menu
5. Generate and open PDF
6. Upload Word Template

4th Step – Advance

1. Design
1. Size: Select size from the following Small, Medium or Large
2. Bootstrap Column Class
3. Custom Class
4. Mobile Icon: Select option from the dropdown menu
5. Description: Enter extra suggestions for user experience on this field
6. Style
7. Placeholder

2. Advance
1. Enable Dirty Check: To make this function work, please enable Dirty Check from "Form > Setting > Validation".
   1. Dirty Check Options
      1. Select Dirty Check Forms: Select option from the dropdown menu
      2. Dirty Check Fields: Select option from the dropdown menu
      3. Dirty Check Fields Type: Include or Omit
2. Enable Notification
3. Created by field
4. Updated by field
5. GUID filed name
6. Submit pinned items
7. Bind Button Label with Data Model
8. Is file upload on submit
9. Hard Delete Model keys on submit
   1. Delete Model items after submit: Select option from the dropdown menu
10. No Validation Check
11. Enable Validation On Click
12. Delete API Cache
    1. URL
    2. Primary key
    3. Primary key value field
13. Required
14. Enable Access Control

3. Notification
1. Notification End Point (Optional)
2. Enable Notification on New Entry
   1. Email Connection: Select option from the dropdown menu
   2. From
   3. Sender
   4. Subject
   5. Receivers: Select option from the dropdown menu
   6. Select Template: Select option from the dropdown menu
   7. Email Template
   8. Attachments
   9. Enter Attachment Attribute Name: Select option from the dropdown menu
3. Enable Notification on Update Data
   1. Email Connection: Select option from the dropdown menu
   2. From
   3. Sender
   4. Subject
   5. Receivers: Select option from the dropdown menu
   6. Select Template: Select option from the dropdown menu
   7. Update Email Template
   8. Attachments
   9. Enter Attachment Attribute Name: Select option from the dropdown menu
4. Application Notification
   1. Notification For: Select from the following Web, Mobile or Both
   2. App Notification Type: Brodcast or Individual
      1. Individual
         1. Notification User Name [Email]
         2. Notification Dynamic User Name [Model Key]
   3. Notification Header: For dynamic values e.g. Notification Send By {{UserId}}
   4. Notification Description: For dynamic values e.g. Notification Send By {{UserId}}
   5. Notification Header For Update
   6. Notification Description For Update
   7. Mobile Notification Redirect Url
   8. Notification Redirect Url
   9. Dynamic Parameters
      1. Key
      2. Value
      3. Select Type: Select option from the dropdown menu

4. Mobile
1. Button Style
2. Button Active Background Color
3. Button Text Color
4. Button Active Text Color
5. Button Size
6. Border Radius
7. Align Self
8. justify Content
9. Padding Left
10. Padding Top
11. Padding Right
12. Padding Bottom
13. Margin Left
14. Margin Top
15. Margin Right
16. Margin Bottom
17. Gap
18. Icon Right?
19. Read bar-code before action
    1. Bar-code Mapping Field (mandatory)
20. Button Type Card
    1. Description: Enter extra suggestions for user experience on this field
    2. Image Url
    3. Image Height

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