Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
gauravdey
Advisor
Advisor

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


InputOutput
  • 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


InputOutput
  • 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


InputOutput
  • 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.


InputOutput
  • 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


InputOutput
  • 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.


InputOutput
  • 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.


InputOutput
  • 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.


InputOutput
  • 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.


10 Comments