Developing a sample C4C extension application using HANA Cloud Platform (Part 2).

[gauravdey]

In this section, we will create a Service Tickets Fiori Launchpad site with a tile for launching the Open Tickets application that we created in Part1. Along with it we will also create a dynamic tile to display live data.

Launch HANA Cloud Portal service

Input	Output
In your HANA Cloud Platform cockpit, click Services from the left-side content panel SAP HANA Cloud Portal appears first in the list of services available in your account. Click it. Click the Enable button, if the service is not enabled. (this may take a few seconds)
Click on the tile to launch your SAP HANA Cloud Portal The Cloud Portal’s Go to Service link is now enabled Click on the link to launch your SAP HANA Cloud Portal in a new browser tab. The Cloud Portal Site Directory is opened

Create a Fiori Launchpad Site

Input	Output
From the Cloud Portal site directory click on the first tile with + symbol. Select Fiori Launchpad in the first drop down list. Enter the Site Name – Service Center.
Click Save. Your Fiori Launchpad site is created. With your mouse cursor hover over the newly created site icon.   Click on the ‘Site Actions’ menu and click ‘Publish’.
The Publish Site confirmation dialog appears Click Publish to publish the Launchpad site. This will publish your Launchpad and make it accessible Click Close on the Publish Site dialog box. Once the site is published, you will notice The site icon changes its color to green and Status to ‘Public’. A URL to access the Launchpad runtime from your Site Directory. A Manage button to enter the Fiori Configuration Cockpit.
Click on the Launchpad URL         The new Fiori Launchpad site is launched in a new browser tab. From the Cloud Portal site directory hover over the newly created site icon. Click on the ‘Manage’ button The Fiori Launchpad’s Configuration Cockpit is opened in a new browser tab.

Create new App Tile

Input	Output
Click on the Create App Tile.
The App tile wizard is opened which enables you to create the app tile with desired functionality. This screen helps you to define the properties of the application. Click on the window tile of the App Name it picks the HTML5 applications that you have created and deployed in SAP HANA Cloud Platform. A pop will come for authentication, enter the password of your SAP HANA Cloud Platform cockpit account.
Select the opentickets application from the list. Click OK . Enter the Description as per required. Here we are entering Outstanding Tickets. Click on the window tab of Assigned Catalogs this will show the list of Catalogs under which the application will be listed. Select Sample Catalog and click OK. Click Next.
The screen that you will see is the Target screen. This enables you to mention the location of the required files for the application that will be picked when the applications runs. Enter the details as shown in the figure. Click Next
We are on the Navigation screen. Here multiple things can be done like pass parameters, classify tile properties, assign tile groups etc. We will mention the tile properties. Enter the details as shown in adjacent figure. Click Finish.
Your application is ready. Click on Preview Site. You can now see the Home page of your ticketing application. Click on the tile to see the application running.

Create a New Catalog.

Input	Output
From the Site Content group of tiles in the Fiori Launchpad’s Configuration Cockpit Click on the Manage Catalog tile tab. The Category Manager is opened with the list of available categories.
Click on the + icon to create a new Category Enter the Name of the category – Service Requests Enter a Description. Click Save Click on the Roles icon to allow public access. Click Edit. Click + to add Everyone to the list. Press OK and Save. Click on the Home icon to return back.

Register to SAP Fiori Launchpad

Input	Output
If you already closed the “Successfully Deployed” dialog in the SAP Web IDE, right click on the OpenTickets project folder and select Deploy > Register to SAP Fiori Launchpad.The Register to SAP Fiori Launchpad wizard is opened. Go to SAP Web IDE and Click the Register to SAP Fiori Launchpad to make your application available in Fiori Launchpad Sites.
Enter the application description in the General Information screen as follows: Application Name:    OpenTickets Description:    List of available service requests. Click Next.       The Tile Configuration screen is opened.Configure the appearance properties of the tile that will launch your application in the Fiori Launchpad site.
Enter the details Type : Static Title :  Open Tickets Subtitle: Outstanding open tickets Icon : Click on the Browse button to select an icon
Click Next. The Assignment screen is opened. Assign the application to the Catalog and Group we defined in the previous section. Catalog: Service Requests
Click Next. Click Finish in the Confirmation screen. The Successful Registration dialog box opens. Click OK.

Manage Content in a Fiori Launchpad Site

In this section you will add the OpenTickets business applications as content to your Service Center Fiori Launchpad Site and customize application tiles.

Create a New Group of Tiles (applications)

Configure tile groups to organize the related applications in the current Fiori Launchpad site.

Input	Output
Open the Fiori Launchpad’s Configuration Cockpit Click on the Configure Apps tile from the Site Content group of tiles.           The Tile Groups Manager is opened with the list of available tile groups Click on the + icon to create a new Group Enter the Name of the Group – Service Requests Select the Catalog as Service Request that was created in previous steps.
Click on the Tiles tab to add applications to this group. Click on the Edit icon below, then the + icon on top right corner to open the list of available applications From the list of application, select the OpenTickets applications Click OK. The application are assigned to the group Click Save   From the top navigation bar click on the Home icon to return to the Configuration Cockpit.

Preview the Fiori Launchpad Site

From the Site Content group of tiles in the Fiori Launchpad’s Configuration Cockpit.

Input	Output
Click on the Preview Site tile   The Fiori Launchpad Site is opened in a new browser tab with the application we deployed under the Service Request group of tiles. Click on the tile to launch the ticket application. Click on the Back  or Home  buttons to navigate back to the Launchpad Home page.

Creating a Dynamic Tile.

Input	Output
Launch your Cloud portal site from SAP HANA Cloud Platform Cockpit. Goto Services, click on SAP HANA Cloud Portal and then click on Go to Service Your cloud portal launch pad will be opened. Click on Manage of the Service Center site. Yow will be taken to the Home Page of the Service Center site.
Click on App Configuration. This is the place where your all apps are listed.
Click on + to create a new dynamic tile. Now you are on the Properties section where you can define the name            and other important properties of the dynamic tile. Enter the details as shown in the figure. Component URL: / Is the relative path from you application root to your Component.js file SAPUI5 Component Name: OpenTickets Is the registered name of the SAPUI5 component, defined in the Component.js file, without .Component HTML5 App Name: employees Is the name of the deployed HTML5 application Click Save.
Click on Navigation icon. You are now on the navigation screen where you give the location of service URL from where the data has to be picked. Enter the details as shown in the figure.       Service URL:                Is the URL of an OData query from which data should be read.The format of the URL is as follows:   /<fiori proxy>/<application id>/destinations/<destination name>/<path to OData service>/<ODatacollection>/<query string> /sap/fiori/opentickets/destinations/C4CODataServices/sap/byd/odata/v1/ servicerequest/ServiceRequestCollection/$count This is the query that we have used in this example which shows the KPI of Open Tickets. Click Save.
Your dynamic tile is ready. Click on Site Preview. The tile shown here is representing the count of open tickets in the C4C tenant.

Congratulations! You’ve succeeded in developing a support site application and added it to a Fiori Launchpad Site.