Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
krish469
Contributor
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.

 
1 Comment
Labels in this area