Gaurav Dey

October 9, 2015 8 minute read

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

Follow RSS feed Like

0 Likes 1,127 View 9 Comments

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.

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.

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.

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.

Alert Moderator

9 Comments

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

Former Member

March 15, 2016 at 2:15 pm

Thanks for the important information. Can we somehow make it work offline?
- Like(0)
- Gaurav Dey Post author
  
  March 16, 2016 at 5:54 am
  
  Yes.. with SMP native application you can leverage the offline capability.. These might help.
  
  SAP Fiori & SMP
  
  Getting Started with Kapsel – Part 15 — Offline OData (New in SP05)
  - Like(0)
Former Member

April 24, 2016 at 10:29 am

Hi Gauvrav,

Thanks for sharing this wonderful content.

I am having a requirement to Integrate HCP and C4C to carry out the Sales processes in HCP.

Requirement: Creating a Site for Sales Person to handle the sales processes like creating and updating of Accounts,Contacts,Opportunities and Leads from HCP .

Kindly provide me details regarding the OData Services which I need to consume for displaying these Sales data in HCP and also for Creating new set of data and updating the existing data from HCP.

I am very new to HCP module please share the steps to achieve this requirement.

Thanks in advance.

Regards,

Navin
- Like(0)
Gaurav Dey Post author

May 3, 2016 at 9:20 am

Hi Navin,

Have a look at your metadata for which fields to consume and regarding the creation and updation you have to perform CRUD operations.
- Like(1)
Former Member

October 20, 2016 at 6:30 am

Hi Gaurav, great content
My scenario is to create a service ticket in c4c using hcp…i’m able to consume the data using odata services https://myxxxxxx.crm.ondemand.com/sap/c4c/odata/cust/v1/iot/$metadata but i’m unable to create a ticket.I am using CRUD master application to achieve this..Please help me with your valuable inputs.
Thanks in advance.
Regards,
Giridhar
- Like(1)
- Gaurav Dey Post author
  
  October 20, 2016 at 11:41 am
  
  Hi Giridhari,
  
  Thanks for trying this blog. What error are you receiving ?
  
  Regards,
  Gaurav Dey
  - Like(0)
Sohil Vidja

June 8, 2017 at 2:35 am

Hi Gaurav,

Thanks for the writing this blog. Nowadays it seems very applicable for various cloud solutions.

In above example, how does user to customer mapping work? meaning how do portal user gets his/her service tickets and customers from C4C?

Thanks,

Sohil.
- Like(1)
- Gaurav Dey Post author
  
  June 9, 2017 at 7:36 am
  
  Hi Sohil,
  
  If I understood your question correctly then you want external users to access your portal site where the C4C app is displayed, then you need to configure those users or their IdP on SAP CP and set the trust between them. Once it’s done then the user will get authenticated once they access the portal site.
  
  If this is not what you were asking kindly elaborate the question.
  
  Regards,
  
  Gaurav Dey
  - Like(0)
  - Sohil Vidja
    
    June 19, 2017 at 6:42 pm
    
    Hi Gaurav,
    
    Thanks for your response.
    
    My question is in terms of user to C4C mapping. So if user X is a contact person working for customer A, and using UI5 app. In that case, user data like service tickets, customers needs to be retrieved from C4C. and for that query might be something like
    
    a. get contact person of user using email address
    
    b. get customers using contact person
    
    c. get list of service ticket associated for those customers.
    
    In order to read all of these user specific details. Is there a standard integration available or it has be developed using oData service? And are these details needs to be persisted in SCP or retrieved every time user logs in?
    
    Thanks
    
    Sohil.
    Like(0)