Description:

This UI control provides in-place or form editing with a certain level of functionality. It can also have columns with links configured to render form instances. This control can be used only once in 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 and Form 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
• The Settings tab allows you to configure the Select SQL statement tab and the DB connection. You can also configure the connection string in the Integration—Connections menu. 

• 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. You may select between Inline and Form editing by clicking the appropriate button. 
• Inline Editing enables the user to change the content directly on the line. Form Editing allows the user to change the content on a form as a popup window. This feature enables the user to modify multiple columns of data using the vertical scroll feature on the form. By default, the Inline Editing button is focused. 

• Configuring the Form Editing feature shall render the UI as below. You may reposition the row items by dragging and dropping them vertically.  Configure the DB table name reference. 

• The form definition is configured beforehand with widget controls such as textboxes, checkboxes, date pickers, and dropdowns. 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. When the selected row is approved during runtime, a flag value of 1 is captured. The FlowWright Admin user has all action privileges, regardless of the configuration done here.  

• In the Styling tab, select the columns' colors. Then, click the Refresh icon to load the columns for 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. Then, render the task to view the EditGridData form. 

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

• Click on the modify icon to edit the record. For Inline Editing, the fields appear editable and require inputting certain data types and size information, as per the widget configuration mapped during design. Click on save (tick icon) to confirm the changes. 

• Click on the modify icon to edit the record. The fields appear editable for Form Editing and require an input of certain data types and size information, as per the widget configuration mapped during design. Click on the save button to confirm the changes. 

• The privileges for the regular user (non-admin) depend on the ACTION configuration mapped during design. Modifications can also be limited to only the record created by the user. An audit trail facility runs in the background, noting the changes made. 
• Click on Select All to mark all rows as selected quickly. 

• Click on Unselect All to unmark all rows quickly.

• Select a single row or multiple rows and click on Approve selected rows. The rows are marked approved with the flag value. The approved rows may be locked according to 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}'

• A sample code reference is provided here to copy-paste for quick modifications. 

• 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. In this example, the hyperlink column is mapped to an editable control, but it can be configured as read-only in the form design view if necessary. 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. Then, render the task to view the EditGridData form. Finally, click on the image or the first name link to render the form instance. 

Definition Sample:

You may download the sample definition(s) from the link here and later import it (drag-drop) to your FlowWright Process Definition (XML file) or Form Definition (HTML file) page.

NOTE: Please verify and complete the process steps for any missing configurations, such as file path references and database connections after import. Then, save the definition to confirm the changes.

Click here to download the sample file.