Description:

This form of UI control provides in-place data editing with a certain level of functionality. It can also have columns with links configured to render form instances. This form UI control can be used only once on the form design.

Use a SELECT SQL statement to fetch records from a single table or form a data table and display them in a grid. Configure the form control and route the form through a workflow where a FlowWright administrator can approve the row modifications. The SELECT statement can also fetch records from multiple tables, and the grid behaves in read-only mode.

With In-place editing of data;

• Define what fields (columns, rows) can be modified or not
• Ability to define editable controls with complex configuration
• Use (text box, drop-down, checkbox, date picker) controls for editing 

Features:

Design:

Example:

Let’s build and execute the “EditGridDataTableDef” example.  

• Create a new form definition called “EditGridDataTableDef.”  
• Select the Open Designer checkbox and click the “Create” button
• Drag an EditGridData form widget to the canvas. Drag the form save, submit, and approve buttons. 

• Double-click on the widget to configure the inputs as shown in the below graphic
• Use the Settings tab to configure the Select SQL statement tab and the DB connection. Configure the connection string in the Integration - Connections menu prior. 

• Click on the “multiple tables” checkbox if the SQL statement refers to many tables. The EditGridData table behaves in read-only mode with a checkbox enabled. Click on the preview to view the top 10 records.

• Configure the Column Definitions as shown in the below graphic. Column definition configuration lets you configure the following: 
  • Add any number of new column definitions
  • Modify a selected column definition
  • Remove a selected column definition
  • Order/rearrange the column definitions
• Select the form definition to configure widgets like textbox, checkbox, date picker, and dropdown controls. Each column desired to be displayed should be mapped with an appropriate widget control. Use the "Add row" feature to map the selected columns to their form definition widgets. Use the unique column to map to the “key-field” feature to help update or delete the row. Drag and drop the fields vertically to arrange their order. A summary label info is required when any column checkboxes are selected. Based on the column definition settings, the summary row will compute the SUM of each column and display the value as text (read-only). When row data is changed, the summary row will automatically update the summary data in real time. A field appears read-only during runtime when its widget is configured as read-only. An editable field is mandated by the input data type and size based on its control widget configuration.   

• The form definition is configured beforehand with widget controls like a textbox, checkbox, date picker, and dropdown. The widget configurations can be required, read-only, or accept certain data types and sizes as inputs.  

• Configure the Actions as shown in the graphic below. Select appropriate checkboxes to define the behavior of the EditGridData table during execution. A flag value of 1 is captured when the selected row is approved during runtime. The FlowWright Admin user has all action privileges irrespective of the configuration done here.  

• In the Styling tab, select the colors for the columns. Then, click the Refresh icon to load the columns the first time. 

• Customize the ​column colors by referring to the #hex code.  

• Globalize the form as shown in the below graphic. Select the language culture from the drop-down. 

• Click on Translate. Click on Save to confirm the changes. 

• Create a process definition to route the EditGridData form as shown in the below graphic. 

• Save the process definition, create a process instance and execute. Render the task to view the form EditGridData. 

• Save the process definition, create a process instance and execute. Render the task to view the form EditGridData. 

• Click on the modify icon to edit the record. The fields appear editable and require certain data types and size information as input, as per the widget configuration mapped during design. Click on save (tick icon) to confirm the changes. 
• The privileges for the regular user (non-admin) depend on the ACTION configuration mapped during design. The modifications can also be limited to only the record created by the user. An audit trail facility runs in the background taking note of the changes done. 
• Click on Select All to mark all rows as selected quickly. 

• Click on Unselect All to unmark all rows quickly.

• Select single or multiple rows and click on Approve selected rows. The rows are marked approved with the flag value. The approved rows may be locked as per the setting.  

• The Admin user's privileges override the ACTION configuration mapped during design. The admin user may modify the grid data as necessary. An audit trail feature tracks row updates, deletions, and approvals. The audit records are stored in the SQL table [deEditGridDataAudit]. 

• The EditGridData can have columns with links configured to render form instances. EditGridData can also refer to a text box value that filters the data. To do this, use the settings tab to configure the Select SQL statement tab, as shown below. A sample code reference is provided here to copy-paste for quick modifications. 

SELECT  '<a target="_blank" href="RenderForm.aspx?mode=render&formInstID='+convert(nvarchar(50), formInstID)+'"> <img src="images/formDefIcon.svg"/></a>' AS Image,  '<a target="_blank" href="RenderForm.aspx?mode=submit&formInstID='+convert(nvarchar(50), formInstID)+'">'+ txtfirstname + '</a>' as TxtFirstName, sectionName, txtaccountratingcode, txtjobtitle, formRowID, formInstID FROM FormData_LUKECRMFORM  WHERE txtjobtitle like '%${text1}'

• The links are constructed using regular HTML tags. A reference to the image is possible if the resource is located within the FlowWright\Image folders. Click on "Preview" to view the SQL statement, as shown below. By default, only the top 10 records are displayed as resultsets.  

• Configure the Column Definitions as shown in the graphic below. The image column should be mapped to the "EMPTY" control in the dropdown. The hyperlink column is mapped to an editable control in this example, and it can be configured as read-only in the form design view if required. The "key-field" feature helps update or delete the row, and it should always be mapped to a unique column.  

• Save the process definition, create a process instance and execute. Render the task to view the form EditGridData. Click on the image or the first name link to render the form instance.