Skip to Content

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.

Modify Application

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.

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):

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.

Deploy 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 in 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

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.

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. Riccardo Escher

    Very informative, thanks. One question. You change by copying. What will you do when SAP changes the original app (for example because of bug fixing), and how will you be alerted that the original app has changed?

    (1) 
    1. Rodion Rodionov Post author

       

      Hi Ricardo. Good question. Once SAP will release new version of the app, your changes may be overwritten if you will make them in the original app.

      So it may be beneficial to copy your app in to the customer namespace. Then you may also need to

      But then, when SAP will change the original app, there wouldn`t be any alerts or automatic changes in your app. So you would need to start using the standard app or change your own app back, to reflect SAP changes…

      (0) 
      1. Anton Malaiko

        Thank you for detailed blog, it’s very helpfull.

        Can you show the steps for this two point?

        • Create a new Launchpad  Role  in t-code LPD_CUST
        • Create  a  Semantic  Object  in  /UI2/SEMOBJ

         

        (2) 

Leave a Reply