Skip to Content
Public Sector

Approaches to add multiple new table rows with a single button click

Table of Contents

Introduction

This PBF how-to guide describes different approaches to achieve the functionality of adding multiple rows to the table with a single button click.


In all standard PBF forms with tables, the default behavior of pressing ‘Add’ is to add only one row to the table. If the user needs to add multiple rows then adding one row at a time becomes tedious. The different approaches to change the default behavior are shown below.

  Figure 1

GETTING STARTED

We recommend that you create copies of delivered PBF VC form templates or work on your custom forms. Do not modify the delivered PBF VC form templates directly as any changes will be lost during upgrades.

VC Model Changes

Note:

This part has been divided into two parts since the ‘Insert Rows(s)’ Action in VC was introduced from NetWeaver 730 SP7 and we have only ‘Insert’ Action in all NetWeaver versions prior to 730 SP7.

PART 1: Before NetWeaver 730 SP7

This part describes how to achieve adding multiple rows to the table functionality in all the NetWeaver releases before 730 SP7.

We can achieve adding multiple rows to the table by introducing a new dropdown list box which allows users to select the number of rows to be added to the table. After selecting any number from the given dropdown list box the Action associated with the dropdown box will automatically insert the selected number of rows to the corresponding table.

Here are the steps to be followed to implement the same.

Step 1: Insert a dropdown list box control on the table tool bar.

Figure 2

Step 2: Define a static entry list on the above dropdown list box. Enter the numbers from 1 to the desired maximum number to define how many rows can be added to the table.

Important Note: For example you can have the values 1, 5, 10, 25 and 50 if those are the only options you would like to have for the end users. You do not have to enter each and every consecutive number.

Figure 3

Step 3: Create a local variable of type Numeric under Store and map it to the Value Property of the dropdown list that we have created. You can also set some default value to the local data field.

Figure 4

Now map the above variable to the Value Property of dropdown list box.

Figure 5


Step 4: Assign the ‘Insert’ Action to the dropdown list box. The number of ‘Insert’ Actions required to be added to the dropdown list box should be equal to the maximum number defined in the entry list of the drop down list box.

Now we should have a condition on every ‘Insert’ action to make sure that the number of ‘Insert’ actions to be triggered should be based on the number selected from dropdown list box.

As we have defined the number from 1 to 10 in this example where the maximum number is 10, we need to define 10 ‘Insert’ actions on the dropdown list box as shown in the Figure 6.

Figure 6

On every Insert action we should have a condition to check whether the selected number is greater than the numbers from 1 to 10 as shown below.

1. Insert – condition ( =store@Rows_Count>0)

2. Insert – condition ( =store@Rows_Count>1)

    --------------------------------------------------------

10. Insert – condition (=store@Rows_Count >9).

These conditions will make sure that the ‘Insert’ actions will be triggered according to the number selected form the dropdown list box.

Define ‘assign’ action at the end to reset the value of local variable (store@Rows_Count) to 0 as shown in the Figure 7. It will make sure that even if we select the same number again and again the ‘Insert’ actions will be triggered and the corresponding rows will be added to table.

Figure 7


Step 5: Save all your changes and deploy the application to see the functionality.

Figure 8

You can see in Figure 8 that multiple rows are added to the table according to the selected value from the dropdown list box that was added on the table toolbar.

PART 2: After NetWeaver 730 SP7

Approach 1:

We can achieve adding multiple rows to the table by introducing a new dropdown list box which allows users to select the number of rows to be added to the table. After selecting any number from the given dropdown list box the Action associated with the dropdown box will automatically insert the selected number of rows to the corresponding table.

Here are the steps to be followed to implement Approach 1.

Step 1: Insert a dropdown list box control on the table tool bar.

Figure 9

Step 2: Define a static entry list on the above dropdown list box. Enter the numbers from 1 to the desired maximum number to define how many rows can be added to the table.

Important Note: For example you can have the values 1, 5, 10, 25 and 50 if those are the only options you would like to have for the end users. You do not have to enter each and every consecutive number.

Figure 10

Step 3: Create a local variable of type Numeric under Store and map it to the Value Property of the dropdown list that we have created. You can also set some default value to the local data field.

Figure 11

Now map the above variable to the Value Property of dropdown list box.

Figure 12

Step 4: Assign the ‘Insert row(s)’ Action to the dropdown list box field and map the No.of Rows property to the local variable that we have created in Step 3
(store@rows).

Figure 13

Step 5: Save all your changes and deploy the application to see the functionality.

Figure 14

You can see in Figure 14 that multiple rows are added to the table according to the selected value from the dropdown list box that was added on the table toolbar.

Approach 2:

We can also achieve adding multiple rows to the table by introducing a new input field for users to specify the number of rows to add to the table, and then press the ‘Add’ button to submit the action.

Here are the steps to be followed to implement Approach 2.

Step 1: Insert an input field to enter the number of rows and a button ‘Add’ to submit the action.

Figure 15

Step 2: Create a local variable of type numeric under Store and map it to the Value Property of the new input field. You can also set a default value to the local data field.

Figure 16

Now map the above local data variable to the Value Property of the new input field.

Figure 17

Step 3: Assign the ‘Insert row(s)’ action to the ‘Add’ button that has been created along the input field. Map the No.of Rows property to the local variable that we have created in Step 2 (store@rows).

Figure 18


Step 4: Save all your changes and deploy the application to see the functionality.

Figure 19

You can see that multiple rows are added to the table when clicking the ‘Add’ button according to the number entered in the input field as shown in the
Figure 19.

Former Member

No comments