My Learnings in SAPUI5 Development – Part 2

Here comes my second blog from my learnings

Recently I got to work on an application where I have transposed data of rows to columns. I will not be able to mention anything about my requirement or application, that I have developed, but I will provide information on similar lines with less rows and columns.

Output should be similar to the one mentioned as below.

Plant 1, Plant 2 are part of input. Based on input,

Plant – Standard – Variance – Cost (PSVC) fetched from backend using OData Service for Plant 1 and Plant 2.

Discount is manual entry, will have same value for Plant 1, Plant 2 and User Specified Plant. Value entered will in Percentage

Discounted Price = (PSVC * (100 – Discount)) / 100

User Specified Plant – Selected dynamically by user at Run time. Based on Selected plant, Plant – Standard – Variance of that plant selected from Backend using OData Service and filled in the column.

If we see above information, it is clear that OData Structure is just ‘PSVC’; we get data in this structure. Like,

PSVC – 100.00

PSVC – 200.00

We need to Fill Plant 1 Name, its Description, Plant 2 Name and its Description in the Colum Header.

Apart from Transpose of Rows to columns, we have input enabled calculations field, drop down box field at column header and dynamic column header.

My Approach to the Solution:

1. Create a Table with multi label, Input enabled field and a combo box field as template, as shown below

2. Plant 1 Name and its Description can be filled using respective ids P1_NAME and P1_DESC. Plant 2 Name and its Description can be filled using respective ids P2_NAME and P2_DESC.Input Template is used to enter value for Discount. Combo Box is used as drop down option for User Specific Plant

3. Fetch the data from either OData or from Model and then transpose rows to Columns in Controller as shown below

Lets Discuss in Detail:

1. As we know our Structure for this Model has only field “PSVC”. So we have simulated the data in the same structure

2. Create a Local JSON data which transposes row data extracted in above to Column data, as shown below

Here we create local data called rowData with model “plantwiseModel”. Create a record by transposing row data extracted in above step to Column data. P1 and P2 are values assigned to two Plant 1 and Plant 2 columns as defined in the view.

Therefore, value of PSVC for column “Plant 1” will have 100 and for column “Plant 2” will have 200.

3. Create a record for Discount. As User has to enter value of Discount, we will pass value of Status as “True”. So, that it can be editable by the user.

4. Similarly create records for Discount Price with default values.

5. Set data for Plant 1 Name, Plant 1 Description, Plant 2 and Plant 2 Description 2 using hook function “onBeforeRendering” as shown below

6. When user enters value in Discount field then event “onInputChange” is triggered. Perform all calculation related to Discount and Discounted Price as shown below

7. When User selects specific plant from drop down column, then event “onSelectionChange” is triggered. Fill in all values related to User Specific Plant as shown below

Final Output:

Deploy the application and execute the link. Below screen will display

When User enters a value in Discount field and press enter, Discount Price will be calculated

When User enters selects a plant from drop down list then PSVC value and Discounted Price will be updated for User Specified Plant column

Conclusion:  Records from row can be transposed to Columns in similar fashion agreeing to a point that no of rows are fixed and max of 20 or 30.

I have mentioned the source code at below link.

https://plnkr.co/edit/N2NPWUzVhZ5e8FbSxLic