Skip to Content
Technical Articles
Author's profile photo Navya Shree

Integrate SAP Document Center with UI5 Application – Part 2

In my Previous Blog i had showed you how to integrate the SAP Document Center with SAP UI5 Application using Factory function.

After Integrating the Document Center by giving required repository and object id the output looks like below.

The file and folders Icons have no color.

Applications can provide their own icons for the files they expose to SAP Document Center. To use customer-specific icons, we need to map the icon to a MIME type and upload the mapping file using the administration user interface. To provide a flexible solution, the SAP Document Center server provides additional mappings of MIME types to the corresponding icons for all the SAP Document Center apps and the Fiori re-usable component.

Procedure:

1. Log in to SAP Cloud Platform as an administrator, and select Services on the navigation panel on the left. On the new page, choose SAP Document Center from the list of services. and click on Configure SAP Document Center. 

2. Click on Icon Assets tab Under Settings(Settings->Icon Assets). and upload the icons/images you want to display for the files and folders

3. Prepare the icon.json file which consist of mapping of an icon file to a MIME type.

Upload the icon.json file to icon Assets.

{  
   "icons":[  
      {  
         "mimeType":null,
         "objectId":null,
         "objectType":[  
            "cmis:folder"
         ],
         "repository":null,
         "names":{  
            "en":"icon tooltip"
         },
         "fileName":{  
            "fiori":"folder.png"
         }
      },
      {  
         "mimeType":[  
            "image/gif",
            "image/jpeg",
            "image/png"
         ],
         "objectId":null,
         "objectType":[  
            "cmis:document"
         ],
         "repository":null,
         "names":{  
            "en":"icon tooltip"
         },
         "fileName":{  
            "fiori":"file_image.png"
         }
      },
      {  
         "mimeType":[  
            "application/pdf"
         ],
         "objectId":null,
         "objectType":[  
            "cmis:document"
         ],
         "repository":null,
         "names":{  
            "en":"icon tooltip"
         },
         "fileName":{  
            "fiori":"file_pdf.png"
         }
      },
      {  
         "mimeType":[  
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
            "application/msword"
         ],
         "objectId":null,
         "objectType":[  
            "cmis:document"
         ],
         "repository":null,
         "names":{  
            "en":"icon tooltip"
         },
         "fileName":{  
            "fiori":"file_word.png"
         }
      },
      {  
         "mimeType":[  
            "text/plain",
            "text/html",
            "text/css",
            "text/javascript"
         ],
         "objectId":null,
         "objectType":[  
            "cmis:document"
         ],
         "repository":null,
         "names":{  
            "en":"icon tooltip"
         },
         "fileName":{  
            "fiori":"file_richtextfile.png"
         }
      },
      {  
         "mimeType":[  
            "application/vnd.ms-excel",
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
         ],
         "objectId":null,
         "objectType":[  
            "cmis:document"
         ],
         "repository":null,
         "names":{  
            "en":"icon tooltip"
         },
         "fileName":{  
            "fiori":"file_excel.png"
         }
      }
   ]
}

4. Refresh the UI5 application. and you can see the colorful icons in the output as shown below.

 

Thank You 🙂

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Tobias Vogel
      Tobias Vogel

      Great guide,

      Thank you so much!

       

      Regards, Tobias

      Author's profile photo Sri Vishwak Ramesh
      Sri Vishwak Ramesh

      We want to display documents in our custom UI5 application, so do we have any API's to get the documents and display and access as per the user requirement.

      Author's profile photo kiran kumar kandakatla
      kiran kumar kandakatla

      were you able to get the reference of the selected document in your custom UI5  Application?

      Author's profile photo Sri Vishwak Ramesh
      Sri Vishwak Ramesh

      Yes, i'm able to get that..