Custom Tile in SAP Cloud Platform Portal Site

[former_member540067]

Introduction:

This blogpost aims at creating the custom tile in SAP Cloud Platform Portal site. Sometimes it is required to show some custom data like micro chart or slide tiles on the portal site but it is difficult to create them using standard options available on the portal. For that, we can create a custom SAP UI5 App and use it as custom tile to show it on the launchpad.

Prerequisite:

Nothing major is required to create this. Basic knowledge of following things works good:

1. Using WEB IDE Full Stack


2. SAP UI5 Controls


3. Portal Site


4. SAP Cloud Platform

Main Content:

Let's Begin to create the custom tile. First of all, we will start from creating a Custom SAPUI5 App.

 

1. Open the WEB IDE Full stack and create a new project in it. Choose project template as UI5 Application.


2. Click Next. Choose your project name and namespace. I have used CustomTileUI5 as Project name and com.blog as namespace.


3. Click Next. Choose the Name for the view. This will be only view that would be displayed on the launchpad. I have used the name for view as MainView.


4. Click Finish. Now you can see the project in your workspace. Now we will code for the view. I am taking the sample code from Here . Open the MainView.view.xml file from View folder.
   

   <mvc:View controllerName="customtileui5.controller.MainView" xmlns="sap.suite.ui.microchart" xmlns:m="sap.m"
   
   	xmlns:mvc="sap.ui.core.mvc">
   
   	<m:GenericTile header="Revenue Dynamics" frameType="TwoByOne">
   
   		<m:tileContent>
   
   			<m:TileContent footer="Country Wise" frameType="TwoByOne">
   
   				<m:content>
   
   					<ComparisonMicroChart scale="M" view="Wide" size="Responsive">
   
   						<data>
   
   							<ComparisonMicroChartData title="Americas" value="10" color="Critical"/>
   
   							<ComparisonMicroChartData title="EMEA" value="50" color="Good"/>
   
   							<ComparisonMicroChartData title="APAC" value="-20" color="Error"/>
   
   						</data>
   
   					</ComparisonMicroChart>
   
   				</m:content>
   
   			</m:TileContent>
   
   		</m:tileContent>
   
   	</m:GenericTile>
   
   </mvc:View>​

   
   


5. The Above code will create a Generic tile in which we will creating a Comparison Micro Chart. All the data shown is dummy data picked from above link at the time of blogpost publishing.


6. Now Run the application to see if it is working fine.


7. You can see that I have changed the reference to controller in the view file. This is because while referring from the launchpad, it should not conflict with the path of the files.


8. Now we will deploy the file to the SAP Cloud Platfom.


9. Now after deployment, we need to configure the portal site to add our tile. Go to the SAP Cloud Platform Cockpit and from services, launch the portal Service.


10. Create a new site from the portal service. Use the Fiori Launchpad site and name it as you want.


11. Create a new app and select the deployed app as resource for the app. Main Changes are in the visualization tab of the application.


12. We have given the path as sap/fiori/customtileui5 because it is the path to the application formed when we set the application to the launchpad.Prefix is given as customtileui5 and Name as customtileui5/view/MainView because this is the reference to the files/view we want to show on the custom tile.


13. Assign the Desired Group and Catalog to the application.


14. Save the Application.


15. Publish the changes.


16. You can see the custom tile on the portal.

Conclusion:

If a user want to show the custom content, Custom UI5 is a good option and user can customize the tile as per the requirements.

Good luck for the future. Posts any doubts.