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 🙂