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
      1. Update Model From Response: Select option from the dropdown menu
   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. Is External URL
   1. Is Primary Node from response
   2. Is External URL from API data
6. 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
   1. File Upload Parameters: Select option from the dropdown menu
9. Remove Model key before submit: Select option from the dropdown menu
10. Hard Delete Model keys on submit
    1. Delete Model items after submit: Select option from the dropdown menu
11. No Validation Check
    1. Ignore Validation of controls on submit: Select option from the dropdown menu
12. Enable Validation On Click
13. Delete API Cache
    1. URL
    2. Primary key
    3. Primary key value field
14. Required

3. Notification
1. 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
2. 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
3. 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. Dynamic Parameters
      1. Key
      2. Value
      3. Select Type: Select option from the dropdown menu

4. Mobile
1. Align Self: Select alignment from the following Auto, Top, Center, Bottom or Stretch
2. Button Width Type: Select width type from the following Full, Block, PX, Percentage, or Auto
3. Margin
   1. Margin Left
   2. Margin Top
   3. Margin Right
   4. Margin Bottom
   5. Margin Left Auto
   6. Margin Top Auto
   7. Margin Right Auto
   8. Margin Bottom Auto
4. Padding
   1. Padding Left
   2. Padding Top
   3. Padding Right
   4. Padding Bottom
5. Is Rounded
6. Read bar-code before action
   1. Bar-code Mapping Field (mandatory)
7. Text Color: Select option from the dropdown menu
8. Font Size
9. Button Type Card
   1. Justify Content: Select option from the dropdown menu
   2. Align Items: Select option from the dropdown menu
   3. Description: Enter extra suggestions for user experience on this field
   4. Image Url
   5. Image Height
   6. Background Color
   7. Border Reduce
10. Button Color
11. Text Color
12. Icon Background Color
13. Icon Color
14. Icon Size
15. Icon Width
16. Styles

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