show / hide menu

Dynamic Grid complex column view

DYNAMIC GRID – ROW SPLIT

The Dynamic Grid feature in AppForms has been upgraded with a ‘Row Split’ feature as compared to the older build. This particular enhancement in the latest build of AppForms would facilitate the user to split a row in a dynamic grid based on its index (column and row).  Below mentioned is the guide to configure the Dynamic Grid.

Dynamic Grid – Configuration.

        Step 1:  Login into AppForms.

Figure 1

Step 2: Create a New Folder and within that folder create a New Form.

Figure 2
Figure 3

 Step 3: As shown in the figure 4, in the ‘Data’ from the ‘Toolbox’, select the Control ‘Dynamic Grid’ and create a form.

Figure 4

 Step 4: Configure the dynamic grid with a DataSource.

Figure 5

 Step 5: Select the data source type from the ‘DataSource Type Select’ window and click the ‘Ok’ button.

Figure 6

Step 6: Click on the ‘Ok’ Button (Figure 6) and select the ‘Site’ (Figure 7) and the ‘List’ (Figure 8) from the ‘DynamicGrid Configuration’ window.

Figure 7
Figure 8

 Step 8: Add the required columns by entering the respective fields and click the ‘+’ symbol in the ‘DynamicGrid Configuration’ window. Later click on the ‘Next’ button.

Figure 10

Dynamic Grid – Row split

       The basic difference between the Dynamic Grid and the new feature, Dynamic Grid – Row Split is an enhanced view of Data entered into the grid.        
       Below given Preview (Figure 11) is achieved through an advanced row formatting feature which is an added feature in the version, which is explained from Step 7.

Figure 11

Step 9:  Select ‘Advanced Row Formatting’ button in the ‘DynamicGrid Configuration’ window so that the DG- Row split can be implemented.

Figure 12

Step 10: The data inside the Dynamic Grid can be re-arranged as per the user’s convenience based on the numbers entered into the column index and row index. As seen in the below example, the preview is achieved by entering the values 1 and 1 in both the column and row index respectively so that the data is positioned in the left-topmost cell of the table. Thereby in-order to enter a value in the leftmost 2nd cell of a table, the value is entered in a format of 1st column and 2nd row. Thus the formats continue and later click on the ‘Ok’ button.

Figure 13

    Command Configuration
       The necessary commands (Select, Insert, Update and Delete) can be configured in the Dynamic Grid – Row Split.

Step 11: Here, in the below given scenario, the commands, Select and Insert are configured.  After Step 9, in the ‘DynamicGrid Configuration’ window opt the command ‘Select’ from the combo box and click on the ‘Add’ button.

Figure 14

 Step 12: In the appeared window (‘SharePoint Commands’), map the columns to the control and here ‘tid’ is used in the criteria part to take all values that are equal to the value that is given in the text box ‘txtIDD’ and then click ‘Ok’ button.

Figure 15
Figure 16

 Step 13:  After mapping the columns, click on the button ‘Manual trigger’ to set the trigger and as shown in figure 17, associated rule will be created and rule name will be displayed in the right side (figure 18).

Figure 17
Figure 18

 Step 14:  Later (if required) opt the command ‘Insert’ from the combo box and click on the ‘Add’ button and as shown in figure 19,in the appeared window (‘SharePoint Commands’) map the columns to the control and click on the ‘Ok’ button.

Figure 19
Figure 20

Step 15: After mapping the columns, click on the button ‘Manual trigger’ to set the trigger and as shown in figure 21, associated rule will be created and rule name will be displayed in the right side (figure 22).

Figure 21
Figure 22

 Step 16:  In the ‘DynamicGrid Configuration’ window the configured commands will be listed below the ‘Command Configured’ section. After completing all the necessary command configuration (Update and delete if required), click on the ‘Finish’ button.

Figure 23

Output
         Step 17:In figure 24, on clicking the button ‘Insert’ configured for Insert command enable the user to insert the values into the table.

Figure 24

  Step 18:  In figure 25, on clicking the button ‘Select’ configured for Select command, enable the user to view or select the values from the table, based on the given ‘ID’ in the Form.

Figure 25

 Conclusion
           Below given figures shows the Dynamic Grid and also the Dynamic Grid after implementing the new feature, Dynamic Grid – Row Split, respectively.

Figure 26: Dynamic Grid (Before implementing Row Split)
Figure 27: Dynamic Grid – Row Split (After implementing Row Split)