SolMan 7.2 Modifying UI5 apps

[chupakebr]

If you was configuring Solution manager Web UI in the past, you may know that it`s very easy to make fields mandatory there. But now SAP introduced new UI5 applications for ITSM, and Charm, and we can`t change thous as easy as old good Web UI.

In this blog I will try to show how it`s possible to modify UI5 applications for Solman.

Concept

Lets assume that we would like to make Categorization field mandatory in Indecent UI5 APP:





To modify the code we would need i.e. Web IDE.

System connection

You can use either online or offline edition. I will describe how we can modify apps with Personal Edition Web IDE (offline one).

After installation of Web IDE you would need to connect to your system. For that you can create a flat test file with destination configuration in the folder were you installed Web IDE (i.e. C:\SAPWebIDE\config_master\service.destinations\destinations\SID😞

Description=SID
Type=HTTP
TrustAll=true
Authentication=NoAuthentication
Name=SID
ProxyType=Internet
URL=http\://address\:port
WebIDEUsage=odata_abap,ui5_execute_abap,dev_abap
WebIDESystem=SID
WebIDEEnabled=true
sap-client=001

Then you can run C:\SAPWebIDE\orion.exe and try to access your personal Web IDE, by opening the following link in your browser:

http://localhost:8080

There you would be able to create a new account and login to the Web IDE:



Once this is done, you would need to import application from your system:



To get the list of application (or to run the application) you would need to provide your username and password for the system:



Then you would need to select corresponding application, which you would like to change. In example for incidents app we can select AI_CREATE_INC application, and copy it to the Z namespace:

Then you can check if you can also run this application (some times you may need to run this app several times):



If app is big, you can get timeout, while downloading it. In that case you can also use program - /ui5/ui5_repository_load Enter the name of the SAPUI5 app and specify whether you want to update, download, or delete it. You can also specify whether or not the line endings are adjusted automatically during the upload. In contrast to the ABAP team repository provider, the report does not offer a built-in code merge.

To upload an SAPUI5 app from a zip or war archive, use the report /UI5/UI5_REPOSITORY_LOAD_HTTP.

To upload multiple SAPUI5 apps from a zip or war archive at once, use the report /UI5/UI5_REPOSITORY_LOAD_HTTPN

Modify Application

Now we can finally change the code of the standard app. As soon as we would like to make category field mandatory, we need to perform 2 changes:

• We will add a star to the input screen, to show that this field is mandatory:

For that we would need to change view file in the standard app (Details.view.xml). So we will add required="true" parameter to the Category Lable, then we can try to save the app and see that our changes are really working:

If all was done correct we would be able to see that now our Category field is marked as mandatory one:

• But then we would also like to add check for this field. To show the error if the field is not filled:

To achieve this, we would need to modify controller file of the app (Details.controller.js). But when we open it first time the code of the controller is displayed as one string, so if we would like to to read it we would "Beautify it":



Then we would be able to analyze the code.

In the code I can see that there is already onSave: function() exists, which also reads Category Input:



So i will just add my check here, similar to the one which we already have in the code:

			if (d == null) {

				v.byId("CategoryInput").setValueState("Error");

				n = false;

			}

Now we can run application once again and confirm that our check is actually working:

After that we can finally deploy our application back to the server:



You may Deploy your APP as a replacement for an existing AI_CREATE_INC one. It will be easy and fast, but then when you upgrade your system, changes may be lost.

To deploy your app you still need to have developer key in the system. So you would need to open AI_CREATE_INC to edit mode and provided Developer and Object key to the system. It can be done in Gui with transaction se80 for BSP application AI_CREATE_INC.

Otherwise you may get following error during the deployment:

Deploy own Z application

To avoid the lost of your changes after upgrade you may also deploy your app as your own Z one. Then after the deployment, you would need to perform some extra steps, to make it avalieble:

• Create a new Launchpad  Role  in t-code LPD_CUST


• Create  a  Semantic  Object  in  /UI2/SEMOBJ


• Create  Catalog (if required),  Target  Mapping  and  a  Static  Tile in  the Fiori Launchpad Designer:
  http://yourservername:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html


• Create  a  PFCG  Role  for  the  Catalog  and  Group (if you created your own Catalog)

Let`s review this process in details:

Create a Launchpad Role.

Run transaction LPD_CUST in Solman Gui.

1. Click on “New Launchpad”


2. Enter the following details in the popup
   
   
   
   • Role i.e. Z_CR_INC
   
   
   • Instance: TRANSACTIONAL
   
   
   • Description: i.e. Create Incident
   
   
   
   


3. Click on Yes if asked “Are you sure  that  you  don’t  need  a  namespace”

1. Click on “New Application”


2. Enter the Details below:

1. Click on the “Edit” button next to URL field


2. Enter the BSP Application URL of the SAPUI5 Application  you  uploaded:
   The URL is composite of:  /sap/bc/ui5_ui5/sap/  +  <your_bsp_name>
   Here our app URL is: /sap/bc/ui5_ui5/sap/ZCREATEINCIDENT

1. Click on button “Show Advanced (Optional) Parameters.


2. Click on the “Edit” button next to Application Alias field,
   Enter  : ZXXX
   (Here  we  use  “ZCREATEINCIDENT”)


3. Edit Additional Information: SAPUI5.Component=you.app.namespace
   (Here namespace  is  “sm.itsm.createincident”)


4. Attention  :  “SAPUI5.Component=”  is  case  sensitive.


5. Click on “Save” button

Create a Semantic Object

Run transaction /UI2/SEMOBJ

1. Click on the “Edit” button


2. You may get a message informing  that  the  table  is  cross-­client,  click  on  “OK”

1. Click on “New Entries” button


2. Enter the following:
   
   
   
   • Semantic Object:
     ZCREATEINCIDENT
   
   
   • Semantic Object Name:
     ZCREATEINCIDENT
   
   
   • Semantic Object Description:
     Create Incedent
   
   
   
   


3. Click on “Save” button


4. Chose your transport request (can be created in se01).

Create your tile with Fiori Launchpad Designer

Fiori Launchpad Designer is available in your solman by the following link: http://<yourservername>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html

Once you open it, push the gear icon In the top left corner and select WB transport request which you would use, and package name (this can be created in se01, and se80 transactions correspondingly of solman gui):

1. Select the catalog in which you would like to create your app (in example IT Service Management).


2. Click “Target Mapp…” icon to switch Switch IconTabBar to Target  Mapping  table.


3. Click “Create Target Mapping” button, Create  static Target  Mapping.

1. Select Application Type as SAP Fiori APP using LPD_CUST


2. Fill up the fields with your data


3. Click on Save to save your Target Mapping

Click on the “plus” tile of Detail Page:



Click on “App Launcher - Static” tile to  create  a  Target  Mapping



Select your newly created semantic object and save.



Now you can finally start using your APP!

Further Information

If you would like to know more about MVC model, used in Fiori apps or in general about UI5 development, i would really recommend you Developing Web Apps with SAPUI5 course on open SAP.

For more information on Fiori Launchpad Designer in Solman you can also check out

• gordonleslie.mcdorman articles i.e: SAP Fiori Launchpad in SAP Solution Manager – Creating Your Own Tile Catalogs, Groups, and Roles


• tom.cenens article: Create your own Fiori tile for customer business roles ITSM / CHARM on SolMan 7.2

Also sometimes when you have issues with Fiori, you may need to clean up your cash, as described in some of the notes (pay special attention to report /UI5/APP_INDEX_CALCULATE, which should be scheduled on a regular bases).

More information on cash cleanup may be found in arunkumar.yallampalli article Cache Maintenance in Fiori

Special Thanks for Shmyrev Maxim and Antoine Duan who made this post possible.