Timeline

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

1st 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. Label Name (mandatory): Specifies the display name or title for a field or control in the user interface.
  3. Question Label: The label used to represent a question or prompt in the form.
  4. Answer Label: The label used to represent the answer or response to a question in the form.
  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.

2nd Step – API

  1. Data
    1. Choose Data Source: Select data source from the following HTTP, Workflow, No SQL or RDBMS.
      1. HTTP: A method for connecting to external data via HTTP protocol.
        1. Data Connection: The connection settings required to establish communication with the data source.
        2. Method: (mandatory) Select method from the following GET, PUT, POST, PATCH, DELETE or POCO.
        3. API URL: (mandatory) The URL used to connect to the API endpoint.
        4. Query Parameters: Additional data to be passed in the request.
          1. Key: The name of the query parameter.
          2. Value: The value associated with the query parameter.
          3. Query Variable: A variable that can be used within the query.
          4. Select Type: The type of data the query is selecting.
        5. Headers: Additional metadata for the request.
          1. Name: The name of the header.
          2. Value: The value associated with the header.
        6. Others: Additional options for the request.
          1. Enable raw query: Option to send raw query without processing.
      2. Enable Encryption: Option to encrypt the data in the request for security.
      3. Response Attribute: The data to be received from the API response.
    2. Update API: A section to configure the API settings for updates.
      1. HTTP: Same configuration as the HTTP data source used for updating API information.
        1. Data Connection: The connection settings required to establish communication with the data source.
        2. Method: (mandatory) Select method from the following GET, PUT, POST, PATCH, DELETE or POCO.
        3. API URL: (mandatory) The URL used to connect to the API endpoint for updating data.
        4. Query Parameters: Additional data to be passed in the update request.
          1. Key: The name of the query parameter.
          2. Value: The value associated with the query parameter.
          3. Query Variable: A variable that can be used within the query.
          4. Select Type: The type of data the query is selecting.
        5. Headers: Additional metadata for the request.
          1. Name: The name of the header.
          2. Value: The value associated with the header.
        6. Others: Additional options for the update request.
          1. Enable raw query: Option to send raw query without processing.
      2. Enable Encryption: Option to encrypt the data in the request for security during update.
      3. Response Attribute: The data expected to be received from the API after updating.
  2. Mapping
    1. Field Mapping: Click on “Add New” button depending on how many fields you want to map in the grid based on the requirement. After clicking the refresh button to reload the API response, start mapping the following fields.
      1. Binding: This refers to the connection of form fields to API response fields.
        1. Label: The label displayed for the field.
        2. Data Field: From API – The corresponding field in the API data.
        3. Data Type: Choose the data type from the following options: None, Email, Date, Title, Image, etc.
      2. Web View: Configuration for how the field appears in web view.
        1. Label Option: Select label option from the following: Name Only, Name & Icon, Icon Only, or None.
        2. Disable Word Wrap: Option to disable word wrapping in the label text.
      3. Mobile View: Configuration for how the field appears in mobile view.
        1. Label Option: Select label option from the following: Name Only, Name & Icon, Icon Only, or None.
        2. Hide in Mobile: Option to hide the field in mobile view.
    2. Document Upload API: The API used for uploading documents.
    3. Timeline Date Field: The field that stores the date of a timeline event.
    4. Document Field: The field that stores the document related to the form.
    5. Timeline Unique Field: The unique identifier field used for timeline entries.
    6. User Id Field: The field storing the ID of the user who is involved in the process.
    7. Who will create question (Role): The role responsible for creating the question.
    8. Who will respond (Role): The role responsible for responding to the question.

3rd Step – Advance

  1. Color Theme: Select the color theme option from the dropdown menu.
  2. Show Reply Button: Configure the visibility and settings for a reply button.
    1. Button Type: Select the button type from the dropdown menu.
    2. Button Text: The text displayed on the button.
    3. Button Size: Select the button size from the dropdown menu.
    4. Form Id: Select the form ID from the dropdown menu.
    5. Form Action Type: Select the form action type from the following options: Write, Edit, Read, or Filter.

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