My Learnings in SAPUI5 Development – Part 1

I have started learning and developing apps in SAPUI5, few months back. While developing few applications I have learnt few things, which I would like to share. These learnings may not be new or interesting but these are part of my learning path towards development my applications, hence I would like to share. Hope they will be helpful to someone.

1. Dynamic Table as pop-up to accept user input in one of the Column

Little Background on the Requirement:  Few of my colleagues have developed a Shop Floor application. The application has ability to accept single Resource id and crew size of the resources to work on an activity. With this, the application has features to monitor the overall activity.

After few days, we have realized that we have missed a feature to accept resource ids for rest of the crew. Thus, the requirement for a view, which can accept multiple resource ids based on crew size came into picture.

Details of the Development:

1. a) Declare a Table with template as mentioned below.

“SNo”               – Serial Number for additional resources;

“Resource Id” – Input option to enter Resource Id

Table with above template is displayed as Popup

1. b) Prepare two buttons, one for Save and one for Cancel like shown below

Save button is to save data, then close the popup and Cancel button is to close the pop up. On Pressing Save button, we can get values entered in Resource Ids either by following oBinding or oModel.

1. c) Prepare Popup and add Table, two button created in above steps

Create a Dialog and add table, two buttons.  Add this dialog to the View

1. e) Add rows to the table

Create a JSON Model with template assigned to table. Dynamically create empty records based on Crew size. Assign JSON Model to the Table

Final Output:

Deploy the application and run the application, we will see below screen

Till Crew Size is > 1 button ‘Enter Resource ids for Crew Members’ is not enabled

Enter Crew Size > 1, for eg- 4. Button is enabled like shown below

Click on the Button, Input enabled Table with 4 rows is displayed as popup

Change value of Crew size to 23

Click on Button, Input Enabled Table with 23 rows displayed as popup

Conclusion – Dynamic Input enabled Table with predefined template can be done using above method. If we use fragment instead of JS declarations then the architecture would have been better.