Experience SAP HANA Cloud Portal

Develop business applications for SAP HANA Cloud Portal

sites, leveraging on-premise and cloud solutions, simply
and intuitively.

Table of Contents
Exercise 1: Setting up the Work Environment ........................................................................... 4
1.1. Prerequisites: set up your environment ........................................................................ 4
1.2. Access your trial account .............................................................................................. 4
1.3. Access SAP Web IDE ................................................................................................... 4
1.4. Set up a Git repository for SAP Web IDE ..................................................................... 5
1.5. Activate Cloud Portal Plugin for SAP Web IDE ............................................................ 6
1.6. Get the source code ...................................................................................................... 7
Exercise 2: Creating Lightweight Applications .......................................................................... 8
2.1. Create the Fiori designed application ........................................................................... 8
2.1.1. Create a project in SAP Web IDE .................................................................... 8
2.1.2. Import the source code into your project ........................................................ 10
2.1.3. View the project tree ....................................................................................... 11
2.2. Create the Opportunity Form Application ................................................................... 12
2.2.1. Import the source code into your SAP Web IDE ............................................ 12
2.2.2. Create the model and connect it to the view .................................................. 13
2.2.3. Cross-site request forgery .............................................................................. 15
2.2.4. Create Opportunity ......................................................................................... 16
2.2.5. Create the Partner Registration Application ................................................... 17
2.2.6. Import the source code into your SAP Web IDE ............................................ 17
2.2.7. Add the OpenSocial specification xml file to the application .......................... 18
2.3. Deploy and manage your code in the SAP HANA Cloud Platform Git ....................... 19
2.3.1. Deploy the fioriwidget application to SAP HANA Cloud Platform .................. 19
2.3.2. Deploy the destination file .............................................................................. 20
2.3.3. Start your application...................................................................................... 22
2.4. Customize the fioriwidget application ......................................................................... 23
2.4.1. Preview fioriwidget in SAP Web IDE .............................................................. 23
2.4.2. Customize the fioriwidget application ............................................................. 24
2.4.3. Commit your changes and create a new application version......................... 25
Exercise 3: Adding Widgets to Cloud Portal ............................................................................ 27
3.1. Test the URLs to the widget files ................................................................................ 27
3.2. Access Cloud Portal .................................................................................................... 28
3.3. Manually create widgets for use in Cloud Portal ......................................................... 29
Exercise 4: Creating and Configuring a New Cloud Portal site .............................................. 30
4.1. Manage files in the document repository .................................................................... 30
4.2. Import a site from the Cloud Portal Market Place ....................................................... 31
Exercise 5: Adding Content and Managing Pages in Your Site ............................................. 32
5.1. Update the Register page ........................................................................................... 32
5.2. Update the List and Create Opportunity subpages..................................................... 32
5.3. Restrict access to the Opportunities page .................................................................. 33
5.4. Reorder the site pages ................................................................................................ 34

Exercise 6: Managing Page Templates in Your Site ................................................................ 35

6.1. Add a new page template and assign it to a page ...................................................... 35
6.2. Edit the new page template ........................................................................................ 35
6.2.1. Open the template editor and remove the menu ........................................... 35
6.2.2. Edit the left panel ............................................................................................ 36
6.2.3. Edit the header ............................................................................................... 36
6.2.4. Edit the right panel and the footer .................................................................. 36
6.3. Edit the default page template .................................................................................... 37
Exercise 7: Managing Roles and Groups.................................................................................. 38
7.1. Define organization roles ............................................................................................ 38
7.2. View the roles in Cloud Portal ..................................................................................... 38
7.3. Restrict access to the site and pages ......................................................................... 39
7.4. Explore page authorizations ....................................................................................... 40
7.5. Remove roles from pages ........................................................................................... 40
Exercise 8: Previewing the Site and Publishing it ................................................................... 41
8.1. Preview the site ........................................................................................................... 41
8.2. Publish the site and edit the site URL ......................................................................... 41
8.3. View the site in consumption mode ............................................................................ 41
8.4. Access the site with your mobile device ..................................................................... 41
8.5. View the site usage analytics ...................................................................................... 41
Exercise 9: Adjusting the Site Layout and Theme ................................................................... 42
9.1. Download the theme ................................................................................................... 42
9.2. Edit general settings of the site ................................................................................... 42
9.3. Upload the new theme and apply it to the site ............................................................ 42

Appendix: Setting up Your Trial Account...43

Welcome
Welcome to our hands-on for SAP HANA Cloud Portal site and content development. We will guide you in developing
widgets for your Cloud Portal site, deploying them to SAP HANA Cloud Platform, and then building your complete site
in SAP HANA Cloud Portal. After this session, you will have the knowledge and skills to:

Work in SAP Web IDE to develop SAPUI5 applications

Manage your development projects in your own Git repository

Deploy your applications to the cloud as Cloud Portal widgets

Create Cloud Portal sites and populate the site pages with the content that you have developed

Enhance a site layout and theme

Preview sites and publish them

Exercise Agenda
1. Setting up the Work Environment
To begin, you will activate your SAP HANA Cloud trial account (if you havent already), access and activate
SAP Web IDE, enable the Cloud Portal plugin for the Web IDE, and learn about the online cloud-based tools
that you will use to develop your widgets for your portal site.
2. Creating Lightweight Applications
In this section, you will develop SAPUI5-based applications in the SAP Web IDE, and store them in a
dedicated Git repository.
3. Adding Widgets to Cloud Portal
You will then deploy your applications to SAP HANA Cloud, and add them as widgets to SAP HANA Cloud
Portal.
4. Creating and Configuring a New Cloud Portal Site
Once your content is ready, you will create a new Cloud Portal site based on an existing site that you import
from the Cloud Portal Market Place.
5. Adding Content and Managing Pages in Your Site
In this exercise, you will focus on finalizing your page structure.
6. Managing Page Templates in Your Site
You will learn how to use and customize page templates to create different page layouts.
7. Managing Roles and Groups
In this section, you will learn how to define organization roles and use them to restrict site and page access to
selected groups of users.
8. Previewing the Site and Publishing It
Before you publish your site for end users, you can preview it on the different devices.
9. Exploring Advanced Site Management and Authoring Features
Once your site is published, you can learn about additional features for building your Cloud Portal sites.

Prerequisites
You have established a trial account for SAP HANA Cloud Portal and have your SAP ID or SCN credentials.
Note: You will need to use the name and password of your trial account in some of the exercises.

Good luck with your content development.

Exercise 1:

Setting up the Work Environment

In this exercise, you will initiate a free SAP HANA Cloud trial account, start SAP Web IDE, set up a Git repository, and
enable the Cloud Portal project plugin for it.

1.1. Prerequisites: set up your environment

You have a trial HANA Cloud account. If you have not set up your account, see the Appendix for the relevant
instructions.

1.2. Access your trial account

1. Open your Chrome browser.
2. Access the SAP HANA Cloud Platform cockpit:
a. Go to https://account.hanatrial.ondemand.com/cockpit.
b. Log on with your SAP ID or SCN credentials.
3. From the side-panel menu at the left, click Services.
4. From the Services list, click Enable to activate SAP HANA Cloud Portal.

SAP HANA Cloud Portal opens, displaying the Site Directory.

1.3. Access SAP Web IDE

All HANA Cloud Platform trial accounts have access to the new SAP Web IDE application. Users can instantly start
developing in this web environment by accessing it from their trial accounts cockpit.
1. In the side-panel menu at the left of the HANA Cloud Platform cockpit, click Subscriptions.
2. Under the Subscribed HTML5 Applications table, notice the webide application.

3. Click the webide link in the Name column. The webide application cockpit screen opens.
4. Click the Application URL link to launch SAP Web IDE. This may take a few seconds.

SAP Web IDE opens.

1.4. Set up a Git repository for SAP Web IDE

1. In the SAP Web IDE main menu at the top, go to Tools > Git Settings.

The Git Settings dialog box opens.

Make sure that you accurately enter the following details; if youre not certain, ask the instructors

2. Enter the following details from your trial account:

a. Git Email Address: the email address that you used (during initial registration) to log onto your SAP
HANA Cloud Platform trial account
b. Git User Name: your SAP ID or SCN User ID

3. Click Update.

1.5. Activate Cloud Portal Plugin for SAP Web IDE

To enable the new Cloud Portal plugin for SAP Web IDE, we need to configure the Web IDEs plugin settings.
1. Switch back to your SAP Web IDE
2. In the SAP Web IDE main menu at the top, go to Tools > External Plugins.

3. If prompted for authentication, enter your SAP ID or SCN credentials.

4. From the Plugin Repository dropdown list, select SAP Plugins.

5. Check the Enabled checkbox to enable the SAP HANA Cloud Portal external plugins.

6. Click OK

7. From your Chrome browser, click F5 or

to apply the changes.

1.6. Get the source code

1. In your Chrome browser, navigate to http://tiny.cc/PartnerEventContent
Note: If prompted to Select a certificate click Cancel to continue.
2. Click on cloud-portal-pcm.zip and save the file to your file system.

3. Extract the ZIP file, which contains the following subfolders:

SAP Web IDE project folders, which contain the solution source code for this exercise:
o fioriapp
o opportunityform
o partnerregistration

Resources:
o

Destinations: the destination files that enable connections from your trial account to external
systems required for this exercise (detailed information about destinations follows).

Documents: the soft-copy version of this exercise. You can use it to easily copy and paste the
needed code.

Project ZIPs: Three ZIP files that contain the projects to be imported into your SAP Web IDE.

Static Content: Contains the various static resources required for this exercise

Exercise 2:

Creating Lightweight Applications

In this exercise, you will develop SAPUI5-based lightweight applications in your SAP Web IDE. The applications
consist only of front-end code. All applications use connectivity to a Cloud for Customers (C4C) back-end instance to
consume or persist data through OData services. You will manage each set of application code and resources in a
dedicated Git repository that is automatically allocated to your SAP HANA Cloud Platform account upon deployment.
At the end of this exercise, the following applications will be ready for consumption in your Cloud Portal.

Name

Description

fioriwidget

A Fiori designed application displaying a list of records from the Cloud for Customers
Opportunity entity in the master-detail paradigm

opportunityform

A form that enables users to create a new opportunity record in the Cloud for
Customers back end

partnerregistration

A form that enables users to register for the partner portal in the Cloud for Customers
back end

2.1. Create the Fiori designed application

We want to create a Fiori-like SAPUI5 master-detail application, to display specific data coming from the Cloud for
Customers Opportunity business object.

2.1.1. Create a project in SAP Web IDE

Create a new SAP HANA Cloud Portal Widgets project, in which you will develop your Fiori-like application.
1. Open your SAP Web IDE.
2. In the main menu, click File > New > Project.

The New Project wizard opens.

3. Enter the following exact project name: fioriwidget

It is important to enter this name exactly, and to use lowercase letters.

4. Click Next.

5. In the second step, Select a Template, choose the SAP HANA Cloud Portal Widgets option from the dropdown
list.
6. Click on the Cloud Portal SAPUI5 Starter Widget tile.

7. Click Next.
A list of Open Social features supported by the Cloud Portal Open Social container is displayed.
8. Mark the first and last features for inclusion in your widget:
a. SAP UI5 integration [sap-xhrwrapper]:
Proxifies requests from our application code, enabling us to perform client-to-client requests through
the SAP HANA Cloud Platform proxy
b. Site Navigation [sap-navigation]:
Allows navigation from the widget to other pages in the Cloud Portal site

9. Click Next.
10. Click Finish. A new project is created in our project panel.

2.1.2. Import the source code into your project

Import the applications source code, located under: ..\ cloud-portal-pcm\Resources\Project ZIPs\fioriapp.zip
1. Open your SAP Web IDE.
2. Right-click on the fioriwidget project root and click Import > Archive.

The Import Archive dialog box opens.

3. Browse to the Project Zips folder under the cloud-portal-pcm folder
(\cloud-portal-pcm\Resources\Project Zips\) that you unzipped previously.
4. Select the ZIP file named fioriapp and click Open.

Make sure that you import the correct ZIP file named fioriapp.zip; if you have questions, consult with
the instructors.
5. Leave the Import as a project checkbox unchecked.

6. Click Import.
7. Click OK on the confirmation dialog

10

Youve successfully created a new Cloud Portal Widget project and imported the implemented source code for its Fiorilike application. Your project tree should look like this:

2.1.3. View the project tree

From the folder hierarchy at the left, expand the fioriwidget project.

The view folder contains the JavaScript resources for this application, separated according to the MVC pattern.

splitapp.controller.js is responsible for setting the applications data model to the applications
view. This is done in the onInit method

splitapp.view.js is responsible for building the application UI. The various UI elements are initiated
and returned in the createContent method.

Under the projects root folder, you can find the following resources:

project.json is the descriptor of the SAP Web IDE projects.

index.html serves as the end point for our application. It builds the view of the application linked to its
dedicated controller and places it inside the application markup.

neo-app.json describes the application welcome file, required destination files for connectivity,
authentication level and so on.

fioriwidget.spec.xml is the specification XML file that enables the application to run inside the
Cloud Portal OpenSocial container. The file points to the SAPUI5 applications index.html and contains
the required OpenSocial features that we selected in step 2.1.1

11

2.2. Create the Opportunity Form Application

We want to create an SAPUI5 form that allows users to create a new Sales Opportunity record and persist it in
the Cloud for Customers back-end system.

2.2.1. Import the source code into your SAP Web IDE
Import the SAP Web IDE projects that you extracted from the ZIP file into SAP Web IDE.
1. Open your Web IDE.
2. Click on the root Local folder.
3. Right-click and click New > Folder.

The Create Folder dialog box opens.

4. In the Folder name field, enter opportunityform, and click Create.
The new folder is created under the main Local folder.
5. Right-click on the opportunityform folder and click Import > Archive.

The Import Archive dialog box opens.

6. Click Browse in the Open dialog box, and navigate to the ProjectZIPs folder under the folder that you extracted
(...\cloud-portal-pcm\Resources\Project ZIPs).
7. Select opportunityform.zip and click Open.

12

8. In the Import Archive dialog box, select the Import as a project checkbox.

9. Click Import.
The opportunityform source code is imported into the Web IDE environment.

When you finish, the Web IDE should look like this:

2.2.2. Create the model and connect it to the view

The form.view.js creates the SAPUI5 elements needed to display a list of customized rows.
The controller creates a model object in order to connect the actual back-end data (model) to the UI (view) in a twoway mode for reading and creating data. The model object references a specific OData service in this example, the
OpportunityCollection service supporting CRUD operations on data from the Opportunities business object. This is
accomplished in the onInit function, which is one of the four hook methods available in the controller.
1. From your SAP Web IDE environment, go to the opportunityform project.
2. Browse to the view folder.
3. Open the form.controller.js file.
4. Look for the onInit method.
5. Create an ODataModel and bind it to the view.

13

a. Instantiate a new sap.ui.model.odata.ODataModel object instance. (Notice that the constructor

receives the service URL as a parameter (defined at the top) and a Boolean for receiving the results in
JSON format.)

var oDataModel = new sap.ui.model.odata.ODataModel( this.oDataServiceURL, true );

b. Bind the oModel object to the application view.

this.getView().setModel(oDataModel);

6. Save the file by clicking File > Save or by pressing Ctrl+S.

Your onInit method should look like this:
onInit: function() {
/****
*2.2.2 - Place your code here
*/
var oDataModel = new sap.ui.model.odata.ODataModel( this.oDataServiceURL );
this.getView().setModel(oDataModel);
/*
* 2.2.2
******/
/****
*2.2.3 - Place your code here
*/
/*
* 2.2.3
******/
},

14

2.2.3. Cross-site request forgery

To prevent cross-site request forgery, OData service providers protect their resources by using a CSRF token. Any
client that requests a change in the service providers back-end resources must initially perform a GET operation with
an x-csrf-token: fetch header in its request. The response from the service provider will then contain a CSRFtoken key. The client should use this token in its header when performing any state changing requests on the service
provider for the rest of his session.
The ODataModel API includes an easy-to-use implementation of this procedure.
1. From your SAP Web IDE environment, go to the opportunityform project.
2. Browse to the view folder.
3. Open the form.controller.js file.
4. Complete section 2.2.3 of the onInit method by handling the security token:
Use the auto-complete (Ctrl + space bar) on the oDataModel object instance to explore its available
methods and find the relevant one. The method receives two callback functions as parameters already
implemented in the code.
5. Save the file by clicking File > Save or by pressing Ctrl+S.

oDataModel.refreshSecurityToken(this.refreshTokenSuccess, this.refreshTokenError, true);

When done, the onInit method of your form.controller.js file should look like this:
onInit: function() {
/****
*2.2.2 - Place your code here
*/
var oDataModel = new sap.ui.model.odata.ODataModel( this.oDataServiceURL );
this.getView().setModel(oDataModel);
/*
* 2.2.2
******/
/****
*2.2.3 - Place your code here
*/
oDataModel.refreshSecurityToken(this.refreshTokenSuccess, this.refreshTokenError, true);
/*
* 2.2.3
******/
},

15

2.2.4. Create Opportunity

Using the sap.ui.model.odata.ODataModel APIs to create a new record in the back end performs a POST
operation with the payload data of the new records. In this part, we will complete the implementation of the callback
method createOpportunity, invoked from the view when the user clicks the Register button and creates the new
opportunity record in the back end.
1. From your SAP Web IDE environment, go to the opportunityform project.
2. Browse to the view folder
3. Open the form.controller.js file.
4. Find the createOpportunity method.
5. Notice the oEntry variable, which contains the opportunity properties and values read from the form.
6. Create a new params map variable with success and error keys pointing to the already-implemented
createOpportunitySuccess and createOpportunityError methods.
var params = {};
params.success = this.createOpportunitySuccess;
params.error = this.createOpportunityError;

7. Invoke the create method of the ODataModel with the Opportunity service path, the new entry, and the
parameter map.
oModel.create('/OpportunityCollection', oEntry, params);

8. Save the file.

When done, the createOpportunity method in your form.controller.js file should look like this:
createOpportunity: function(){
var core = sap.ui.getCore();
var viewElement = core.byId("form");
viewElement.setBusy(true);
var oModel = viewElement.getModel();
var oEntry = this.createEntryObject();
/****
*2.2.4 - Place your code here
*/
var params = {};
params.success = this.createOpportunitySuccess;
params.error = this.createOpportunityError;
oModel.create('/OpportunityCollection', oEntry, params);
/*
* 2.2.4
******/
},

16

2.2.5. Create the Partner Registration Application

We created a SAPUI5 form that allows partners to register themselves for the Partner Portal. The registration will
create a new record in the Cloud for Customers back-end system.
The implemented lightweight application is similar to the previous two applications. Browse through the application
resources and note the use of the ODataModel APIs and the destination file.

2.2.6. Import the source code into your SAP Web IDE
Import the projects that you extracted from the ZIP file into SAP Web IDE.
1. Open your SAP Web IDE.
2. Right-click on the root Local folder and click New > Folder.

The Create Folder dialog box opens.

3. In the Folder name field, enter partnerregistration, and click Create.
The new folder is created under the main Local folder.
4. Right-click on the partnerregistration folder and click Import > Archive.

The Import Archive dialog box opens.

5. Click Browse in the Open dialog box, and navigate to the ProjectZIPs folder under the folder that you extracted
(...\cloud-portal-pcm\Resources\Project ZIPs).

6. Select partnerregistration.zip and click Open.

The Import Archive dialog box opens.

17

7. Select the Import as a project checkbox,

8. Click Import.
The partnerregistration source code is imported into SAP Web IDE.

When you finish, the SAP Web IDE hierarchy should look like this:

2.2.7. Add the OpenSocial specification xml file to the application

In this section, we will create a specification XML (spec XML) file that defines the required dependencies and enables
the rendering of the application as a widget by the OpenSocial container (Shindig ) in SAP HANA Cloud Portal.
1. In your SAP Web IDE, go to the partnerregistration project.
2. Right-click on the project folder, and click New > File.

The Create File dialog box opens.

3. Enter the file name partnerregistration.spec.xml and click Create.

18

4. Paste the following code into the new file:

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Partner Registration Form">
<Require feature="sap-xhrwrapper"></Require>
</ModulePrefs>
<Content href="index.html" view="authoring, consumption, mobile, preview"></Content>
</Module>

5. Save the file.

Note:
The specification XML file points to the SAPUI5 application. In addition, the required feature
sap-xhrwrapper, enables you to load SAPUI5 modules and any related application resource, and to
perform OData AJAX calls. This feature "proxifies" all AJAX requests using the Cloud Portal proxy.

2.3. Deploy and manage your code in the SAP HANA Cloud Platform Git
In this part of the exercise, we will deploy our SAP Web IDE application project to SAP HANA Cloud Platform, and
manage the source code in the Git repositories allocated for the application. The application deployment to SAP HANA
Cloud Platform automatically creates a Git repository that stores all artifacts of our project that have been staged,
committed and pushed to it.

2.3.1. Deploy the fioriwidget application to SAP HANA Cloud Platform

The following steps describe the deployment of the fioriwidget project and should be repeated for the
opportunityform and partnerregistration projects as well.

1. From the SAP Web IDE project hierarchy, select the fioriwidget project node.
2. Right-click and click Deploy > Deploy to SAP HANA Cloud.

The SAP HANA Cloud Server Connection Properties dialog box opens.

19

3. Enter the following properties:

a. Project Name: fioriwidget (lowercase only).
b. Account: your SAP HANA Cloud Platform trial account ID (for example: p1940349974trial).
c.

User Name: your SAP HANA Cloud Platform trial account/SCN user name (for example:
P1940349974).

d. Password: your SAP HANA Cloud Platform trial account/SCN password.

e. Create Version: Create a version from the code that you are deploying by selecting the checkbox and
entering a version name (for example: 1.01).
f.

Active: Select the checkbox to activate and start the newly-created version of your application.

4. Click Deploy, and after a successful deployment, click OK in the Success dialog box.

2.3.2. Deploy the destination file

The deployment has created Git repositories for our application. We can now create versions of the application based
on individual commits that we push to each Git repository from our SAP Web IDE environment. We can then activate
specific versions of our application and make them available for consumption. These actions are available through the
applications dashboard.
1. Go back to the SAP HANA Cloud Platform cockpit.
2. Click HTML5 Applications in the navigation menu at the left.
3. Notice that the fioriwidget application that you deployed is now available in your account.

20

4. Click the link of your newly-created application to navigate to the applications dashboard.
Notice the red square in the Referenced Destinations table. This means that a destination file named
c4cservices, required by the fioriwidget application (as we stated in the applications neo-app.json file), is
missing from our Cloud Platform account. Our application will fail to connect without it.

5. Switch back to the SAP HANA Cloud Platform cockpit by clicking on the Account ID.
6. Select Destinations in the navigation menu at the left.
7. Above the Destinations table, click Import from File to import the missing destination.

21

8. Browse to the Destinations folder under the cloud-portal-pcm project

(\cloud-portal-pcm\Resources\Destinations) that you unzipped previously.
9. Select the destination file named c4cservices and click OK.
The destination is uploaded, and you can view its configuration properties.

10. Click Save.

The destination file is uploaded and takes effect after 5 minutes maximum.

2.3.3. Start your application

1. Navigate back to the fioriwidget application dashboard by clicking HTML5 Applications > fioriwidget.
2. Notice that the missing c4cservices destination file is now available (status green).

22

3. At the top of the State table, check that the application has started. If the icon indicates that has is not, start it
by clicking the

(Play) icon.

Now that we have an active version of the fioriwidget application, we can run it by clicking on the link displayed in
the Application URL field.

2.4. Customize the fioriwidget application

Up till now youve developed the applications in your SAP Web IDE and deployed them to your SAP HANA Cloud
Platform account. In this section, you will add some changes to the fioriwidget application and preview them in SAP
Web IDE. Once your changes are complete, you will commit and push your changes to the applications Git repository
(allocated by the Cloud Platform upon initial deployment) using the Git Client pane in SAP Web IDE.

2.4.1. Preview fioriwidget in SAP Web IDE

Preview the current state of the fioriwidget application before changing it.
1. Switch back to SAP Web IDE.
2. Open the fioriwidget project tree.
3. Select the index.html file.
4. Click

to run the application in the application preview

The Application Preview opens in a new Chrome tab, displaying the fioriwidget application runtime.

23

5. Click the

button at the top right.

The application preview changes from portrait to landscape and vice versa.
6. Click the Resolution Tool Bar at the top left:
The application preview changes to the selected resolution:
Large Desktop, Medium Tablet, Small Smartphone, or Custom.

2.4.2. Customize the fioriwidget application

In this section, we will add an additional attribute to the details header of selected opportunity records.
1. Switch back to SAP Web IDE.
2. Navigate to the splitapp.view.js file under fioriwidget > view.
3. Double-click to open the file for edit

4. Click Ctrl+F to open the SAP Web IDE search bar, and search for the method name buildDetailPage
5. Complete section 2.5.2 in method buildDetailPage by creating an ObjectAttribute, binding the OData
attribute AccountName to it and adding it to the details header.

At the end of the section, your code should look like this:
/****
*2.5.2 - Place your code here
*/
var newAttribute = new sap.m.ObjectAttribute({
title: "Account Name",
text: "{" + selectedContext.getPath() + "/AccountName}"
});
header.addAttribute(newAttribute);
/*
* 2.5.2
******/

6. Save your changes.

24

5. Click the Run button to preview the changes:

2.4.3. Commit your changes and create a new application version

1. Switch back to SAP Web IDE.
2. Click on the fioriwidget root folder.
3. In the right-panel menu, click

to open the Git pane.

Here you can view all of the resources that have been modified in the project, stage them for commit, and push them
into the branch.

25

1. Select the Stage All checkbox to stage all of your

modifications for commit
2. In the Commit Description text box at the bottom,
describe the changes that you are committing.
3. Click Commit at the bottom of the Git pane.
4. Click Push and select the origin/master branch.
The Authentication dialog box opens.
5. Enter your HANA Cloud Platform trial account/
SCN User ID and password.
6. Click OK.
7. When the Push Completed information dialog box
opens, confirm the push.

Now that your latest changes have been committed and pushed, we can return to the applications cockpit in the SAP
HANA Cloud Platform to create a new activated version for our fioriwidget application.
1. Go back to SAP HANA Cloud Platform Cockpit.
2. In the navigation menu at the left, click HTML5 Applications.
3. Click on the fioriwidget link to navigate to the applications dashboard.
4. In the navigation menu, click the Development option.

5. In the History of Branch Master table, notice that the latest commit now appears in the list
6. Click the
icon in the top row of the Create Version column; this creates an application version from your
latest commit and opens the New Version dialog box.
7. In the Version field, enter a version number, such as 1.02.
8. Click Add to create the new version.

26

9. In the navigation menu, click Version Management.

10. Select the version that you just created and click the
The Restart Application dialog box opens.

(Activate) icon to activate this version.

11. Click Yes.

The updated fioriwidget is now activated and ready.

Exercise 3:

Adding Widgets to Cloud Portal

In this exercise, you will consume your HTML5 applications as OpenSocial widgets running on HANA Cloud Portal.
At the moment, applications running from Git should be manually added to the Content Catalog by a Cloud Portal
administrator, who can then create the widgets in the CONTENT tab.

3.1. Test the URLs to the widget files

OpenSocial widgets are defined by an spec XML file. The HTML5 application that we created and deployed contains
this file. In this section, we will build the URL and make sure that it is accessible
1. Navigate back to the fioriwidget application dashboard.
2. Click HTML5 Applications > fioriwidget.
3. Copy the ApplicationURL value this is the root folder of your deployed project.
For example https://fioriwidget-p1940965887trial.dispatcher.hanatrial.ondemand.com

4. The spec XML URL is the concatenation of the Application URL and the relative path of the spec.xml file.
For example: https://fioriwidget-p1940965887trial.dispatcher.hanatrial.ondemand.com/fioriwidget.spec.xml
5. In a new browser tab, enter the URL for the fioriwidget spec.xml file and verify that it is available:

27

If the XML is available, the project version has been created successfully and the widget is ready to
be created.

3.2. Access Cloud Portal

1. Open your Chrome browser.
2. Access the SAP HANA Cloud Platform cockpit:
a. Go to https://account.hanatrial.ondemand.com/cockpit.
b. Log on with your SAP ID or SCN credentials.
3. From the side-panel menu at the left, click Services.
4. From the Services list, click Enable to activate SAP HANA Cloud Portal.

SAP HANA Cloud Portal opens, displaying the Site Directory.

28

3.3. Manually create widgets for use in Cloud Portal

You need to manually add HTML5 applications running from Git to the Content Catalog.
Repeat the following process for each of the three applications.

From your Cloud Portal trial account: (See Appendix: Setting up Your Trial Account in the last page)
1. Navigate to the CONTENT tab.
2. Click the

button. The Add Widget dialog box opens.

3. Enter the following parameters:

Type: OpenSocial

Name: Fiori Widget/ Opportunity Form/ Registration Form (respectively)

Description: <free text>

URL: The URL to the spec XML file of your HTML5 application. For example:

fioriwidget
https://fioriwidget-p1940965887trial.dispatcher.hanatrial.ondemand.com/fioriwidget.spec.xml

partnerregistration
https://partnerregistrationp1940965887trial.dispatcher.hanatrial.ondemand.com/partnerregistration.spec.xml

opportunityform
https://opportunityform- p1940965887trial.dispatcher.hanatrial.ondemand.com/spec.xml

4. Click Save.
The new application is now available for use as a widget in the Cloud Portal sites.

29

Exercise 4:

Creating and Configuring a New Cloud Portal site

In this exercise, you will import a site from the Cloud Portal Market Place. You will use your trial account to perform
Cloud Portal site authoring and configuration.

4.1. Manage files in the document repository

1. Click the DOCUMENTS tab above the Site Directory. (If your session has timed out, refresh the page using
F5.)
2. Create a new folder: Click the
Enter.

(New folder) toolbar button, change the folder name to Assets, and press

3. Click the Assets folder to open it and create a subfolder.

4. Click the

(New folder) toolbar button again, and name the new folder Partner.

5. Upload a file to the folder: Click the

(Upload file to the repository) toolbar button and in the Open dialog

box, browse to the header.png file saved on your file system (...\cloud-portal-pcm\Resources\Static Content).
A notification message is displayed when the file is successfully uploaded.
6. Repeat the same step to upload the SAP_logo.png file.

7. In the folder tree at the left, click the Public folder, which contains files used in this site and other files that can
be publically shared by getting their URL from the repository.
8. Click the
site_bg.png.

(Upload file to the repository) toolbar button again, and browse to the following image file:

9. Return to the Home folder and in the Search field at the top right, type site_bg.
The file is displayed in the search results.

30

4.2. Import a site from the Cloud Portal Market Place

1. Click the MARKET PLACE tab. All sites available in the Market Place are displayed:

2. Hover over the Atomic Partner Portal site card.

3. Click More info to view detailed information about this site.

4. Click + Get this Site to import the Atomic Partner Portal site to your trial account. A notification message is
displayed when the site has been added to your Site Directory. This may take a few seconds.
5. Click the SITE DIRECTORY tab to view your available sites. You will see the following new site card:

6. Hover the Partner Portal site and click Edit to open the site for editing.

31

Exercise 5:

Adding Content and Managing Pages in Your Site

In this exercise, you will learn how to add content to pages, expose the new application in your site, and manage pages
by applying page-management capabilities.

5.1. Update the Register page

1. Click the Register page in the site menu.
2. Remove the existing Partner Registration Form widget using the
3. From the side-panel menu, click

(Widget options) menu.

to open the Content Catalog.

4. Find the Registration Form widget and drag it onto the page.
5. From the

(Widget options) menu, click Design.

The Design dialog box opens:

6. Click Set as full page and close the close the dialog box.

5.2. Update the List and Create Opportunity subpages

1. In the site menu at the top, hover over the Opportunities page and click on the List subpage.

2. Remove the existing Leads and Opportunities widget using the

(Widget options) menu.

3. Open the Content Catalog, find the Fiori Widget, and drag it onto the page.
4. Set the widget to show as full page.
5. Under the Opportunities page, open the Create Opportunity subpage.
32

6. Remove the existing Create New Opportunity widget.

7. Open the Content Catalog, find the Opportunity Form widget, and drag it onto the page.
8. Resize the form widget to fit the content area.

5.3. Restrict access to the Opportunities page

Each page in the site inherits its page access level from its parent page. You can restrict the access level for a specific
page and its related subpages to be available for authenticated users only.
1. From the side-panel menu, click
(Access Management). The Access Management panel opens, displaying
a structured list with the site name and page hierarchy.
2. In the Site and Page Access section, click the Opportunities page. The Page Access Permissions screen for
the Opportunities page opens.
3. Select the Set stricter access permissions radio button.
4. Click the Authenticated icon as the access level for the page. Only authenticated users will be able to access
this page and its subpages.
The stricter access level icon

now appears next to the Opportunities page entry.

33

5.4. Reorder the site pages

Authors can drag pages up or down, and to the left and right, to reorder the pages in the site navigation menu.
Dragging a page to a new position may change the page access level.
1. From the side-panel menu, click

(Page Management). The Page Management panel opens.

2. In the list of page items, drag the News page down and place it after the Marketing page.
3. Expand the Opportunities page and drag the Dashboard page left and up, placing it after the News page.

4. Close the Page Management panel and open the Access Management panel.
5. Click the Dashboard page. The Page Access Permissions screen for the Dashboard page opens.
6. Note that the access level for the page is now Public, which is the site (parent) access level.

34

Exercise 6:

Managing Page Templates in Your Site

In this exercise, you will learn how to customize page templates to fit your layout needs. You can customize an existing
page template by resizing its sections, and modifying their content items. The site author can assign different page
templates for use in different pages of the site.

6.1. Add a new page template and assign it to a page

1. In the side-panel menu, click

(Design Settings).

2. Click the Manage Templates button. The Available Page Templates screen opens, displaying a list of the page
templates that are available for use in your site. Page templates are stored in the Cloud Portal repository.
3. To import a page template from the repository, click

(import template)

4. Select the Standard template and click Import. The template is added for use in this site.
5. Click on the template name (Standard) and change it to Custom.

6. From the side-panel menu, click

(Page Management).

7. In the Dashboard page entry, click the

Portal to Custom Template.

(Page options) menu, and change the Page Template from Partner

6.2. Edit the new page template

6.2.1. Open the template editor and remove the menu
1. In the site navigation menu, open the Dashboard page, and hover over the page header to display the page
template container.
2. Click

to edit the new page template.

3. Drag the header resizing handle (

) and adjust the header height to 150 pixels.

4. Go to the top right of the Navigation widget in the header, open the
Remove to delete the page navigation bar.

(Widget options) menu, and click

35

6.2.2. Edit the left panel

1. Adjust the left panel width to 140 pixels.
2. From the side-panel menu, click

to open the Content Catalog.

3. In the Search field at the top, type Navigation Menu.

4. Hover over the widget thumbnail, and click the plus sign at the left to insert that widget in the left panel.

5. Resize the widget to fit the left panel container area.

6.2.3. Edit the header

1. Search for the Image Widget in the Content Catalog and click the plus sign on top of the widget thumbnail to
insert the widget into the header.
2. Adjust the widget size to make the control buttons (Upload Image and Select from Repository) visible.
3. Click Select from Repository, and from the Partner sub-folder, select the SAP_logo.png file and click OK.
4. Add another Image widget to the header (as you did in the previous steps) and from the Partner sub-folder,
select the header.png file.
5. In the

(Widget options) menu, click Design. The Design dialog box opens:

6. Click on both Full Width and Full Height to stretch the image over the header container area.
7. Close the dialog box.
8. In the

(Widget options) menu, click Send to Back.

6.2.4. Edit the right panel and the footer

1. Remove the Social Networks widget from the page footer.
2. Adjust the right panel width to 65 pixels.
3. Open the Content Catalog, find the Social Networks widget and click the plus sign at the right to insert that
widget in the right panel.
36

4. Adjust the widget to accommodate a vertical view.

5. In the

(Widget options) menu of the widget, click Edit and then click the Add Links button.

6. Click the YouTube icon, add the following URL:

https://www.youtube.com/watch?v=345UpSfWl88&list=PLFD0FA2183DC1F3B7
7. Click OK.
8. Click

(Close) in the side-panel menu to exit Edit Page Template mode.

The Dashboard page now has a new unique page template.

6.3. Edit the default page template

1. From the site navigation menu in the left panel, select the Home page, hover over the page header, and click
Edit to edit the Partner Portal template.
2. Open the Content Catalog, find the Logon widget, and click the plus sign on top of the widget thumbnail.
3. Position the widget at the top-right corner of the header

4. Click

(Close) in the side-panel menu to exit Edit Page Template mode.

37

Exercise 7:

Managing Roles and Groups

A role is basically a collection of permissions that defines a function within a portal, to which users and/or groups are
assigned. In this exercise, you will learn how to define organization roles for restricting site and page access to specific
groups of users who have been authorized by the identity provider (SAP ID service or others).

7.1. Define organization roles

Organization roles are defined and managed in SAP HANA Cloud Platform Cockpit.
1. At the bottom of the side panel of the Authoring Space, click
Site Directory.

(Site Directory) to return to the Cloud Portal

2. Click the Cockpit link at the top right to open SAP HANA Cloud Portal Cockpit.
3. In the Content panel on the left, click Services.
4. In the SAP HANA Cloud Portal row of the Services table, click Manage Roles at the right. The Roles definition
page opens.
5. Click New Role and name it Role A.
6. In the Individual Users block of Role A, click Assign.
7. In the User ID field, enter P1314641442 and click Assign.
8. Repeat these steps to create a second role named Role B, with User ID P1314636609.

7.2. View the roles in Cloud Portal

Once the organization roles have been defined in the cockpit, Cloud Portal administrators can view the roles in the
Cloud Portal Admin Space.
1. Return to the Cloud Portal Site Directory and click the AUTHORIZATIONS tab.
2. Click the Organization Roles tab.
The new roles that you just created are listed in the Available Organization Roles table. Refresh the page (F5)
if you cannot see the roles.

38

7.3. Restrict access to the site and pages

1. Click the SITE DIRECTORY tab and open your site for editing.
2. From the side-panel menu, click

(Access Management). The Access Management panel opens.

3. In the Site and Page Access section, click the site name (Partner Portal) at the top of the list.
The Site Access Permissions screen opens.
4. Click the card with the plus sign. The Add Role dialog box opens, with the new roles listed in the Organization
Role Name list.
5. Select both Role A and Role B and click Add. These roles are now available for assigning page access
permissions to them.

6. In the site hierarchy list, click the Marketing page name, and at the left, select the Set stricter access
permissions radio button. This allows you to assign roles to each page, rather than use the parent-level
assignment as default.
7. Click the Role-Based icon as the access level for the page.
8. Hover over the Role A card, and click Allow Page Access, to give that role access to the page.

39

9. Click the News page name and select Set stricter access permissions again.
10. Select the Role-Based access level and assign Role B to that page.
11. Close the Access Management panel.

7.4. Explore page authorizations

1. From the side-panel menu, click

(Publishing Options). The Publishing Options panel opens.

2. Click Publish and then click Publish again in the confirmation dialog box. Close the dialog box.
3. Click the Published Site link in the middle of the panel. A new browser tab opens, displaying the end-user site.
4. To explore the page authorizations mechanism, open a new browser using a new incognito window option:
a. Access the site using the end-user link; only the public pages Home, Dashboard, and Register are
displayed.
b. Click Log On and enter the Role A user credentials: P1314641442/ Abcd1234.
All pages appear including the Opportunities page and its subpages, which are visible for authenticated
users only, except the News page, which was assigned to Role B.

7.5. Remove roles from pages

1. Return to your site editing and click Access Management.
2. Click the Marketing page name, and at the left, select the Use parent-level access permissions radio button.
3. Click OK in the dialog box. This changed the current access permissions of the page to Public.
4. Repeat these steps to change the access permissions of the News page as well.

40

Exercise 8:

Previewing the Site and Publishing it

In this exercise, you will learn how to preview your site on a desktop, tablet, or smartphone, and then publish it to your
clients. Once the site is published, you will be able to view the site in consumption mode and access it with your mobile
device.

8.1. Preview the site

When your site is ready, you can preview it as it will appear on different devices.
1. In the side-panel menu, click

(Site Preview).

2. In the Site Preview panel, click the relevant icon to preview your site on desktop, tablet, or smartphone. A fully
functional preview of the site, as it will appear on the selected device, is displayed.
3. Close the Site Preview panel.

8.2. Publish the site and edit the site URL

1. From the side-panel menu, click

(Publishing Options - Modified).

2. Click Publish and then click Publish again in the confirmation dialog box. A notification dialog box opens,
allowing you to access the site or scan its QR code.
3. Close the dialog box.
4. Open the Site Settings panel, and in the Site URL section, click the URL. The editable part of the URL is
displayed in a text box.
5. Type Partner and press Enter. The name shortens the URL and makes it meaningful.

8.3. View the site in consumption mode

1. Open the Publishing Options panel.
2. Click the Published Site link in the middle of the panel. A new browser tab opens, displaying the end-user site.

8.4. Access the site with your mobile device

1. Return to the Authoring Space and open the Publishing Options panel.
2. Click the QR Code link to generate the code, and then scan it with your iPad/ iPhone.

8.5. View the site usage analytics

Administrators and authors can view statistical information related to the usage of their sites.
1. Click the ANALYTICS tab above the Site Directory.
2. In the date-range dropdown list at the top left, select Today.
You can also view additional analytics, such as the device types used to access the site, browser types, and more.

41

Exercise 9:

Adjusting the Site Layout and Theme

Using the default theme provided by SAP HANA Cloud Portal, you can create a new theme based on your companys
branding and site-design requirements. Cloud Portal supports LESS as the stylesheet for site theming.

9.1. Download the theme

1. Click the THEMES tab above the Site Directory. You use this screen to manage the themes that will be
available to your site creators and authors.
2. Select the Partner Portal theme and click Download at the top of the table. The theme file is downloaded.
3. Rename the file to partner_new.less.
4. Open the saved file in Notepad/ Notepad++.

9.2. Edit general settings of the site

Note:
In the following sections, use the Copy and Paste functions to add the code snippets to your LESS file.
Also, use Search (Ctrl+F) as needed.
1. Change the font color of the navigation bar. Search for the @PageNavigationBarTopLevelFontColor
LESS parameter and change its value as follows:
@PageNavigationBarTopLevelFontColor:#000;

2. Change the site background image as follows:

a. Search for the @SiteBackgroundImage LESS parameter, and remove the value of the URL.
b. Go back to the Cloud Portal Site Directory and click the DOCUMENTS tab.
c. Navigate to the Public folder and search for the background image that you have already uploaded.
d. Hover over Share Link and copy the path (URL) of the link.
e. Paste the URL in the brackets.
After the changes, the settings should look as follows:
@SiteBackgroundImage: url(/portal/v1/contentRepository/Public/site_bg.jpg');

9.3. Upload the new theme and apply it to the site

1. Back in the THEMES tab of Cloud Portal, click Add Theme. The Add Theme dialog box opens.
2. Enter the following information:

Name: New Partner Portal Theme

Description: <free text>

Theme Creator: <your name>

LESS File: the partner_new.less file that you edited in the previous steps.

3. Click Add. The new theme is added to the Available Themes table.
4. Go back to the Site Directory, open your site for editing, and in the Design Settings panel, apply the theme to
your site.

42

Appendix: Setting up Your Trial Account

1. In your browser, go to https://account.hanatrial.ondemand.com/.

2. Click Register.
3. Fill in the form, then scroll to the end of the license agreement and select the checkbox.
4. Click Register. You will receive an email notification.
5. Click Continue, A message appears with your trial account name.
6. On your account page, in the side-panel menu at the left, click Services.
7. From the Services list, click Enable to activate SAP HANA Cloud Portal.

43

www.sap.com

2014 SAP SE. All rights reserved.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP
BusinessObjects Explorer, StreamWork, SAP HANA, and other SAP
products and services mentioned herein as well as their respective
logos are trademarks or registered trademarks of SAP SE in Germany
and other countries.
Business Objects and the Business Objects logo, BusinessObjects,
Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and
other Business Objects products and services mentioned herein as
well as their respective logos are trademarks or registered trademarks
of Business Objects Software Ltd. Business Objects is an SAP
company.
Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL
Anywhere, and other Sybase products and services mentioned herein
as well as their respective logos are trademarks or registered
trademarks of Sybase Inc. Sybase is an SAP company.
Crossgate, m@gic EDDY, B2B 360, and B2B 360 Services are
registered trademarks of Crossgate AG in Germany and other
countries. Crossgate is an SAP company.
All other product and service names mentioned are the trademarks of
their respective companies. Data contained in this document serves
informational purposes only. National product specifications may vary.
These materials are subject to change without notice. These materials
are provided by SAP SE and its affiliated companies ("SAP Group")
for informational purposes only, without representation or warranty of
any kind, and SAP Group shall not be liable for errors or omissions
with respect to the materials. The only warranties for SAP Group
products and services are those that are set forth in the express
warranty statements accompanying such products and services, if
any. Nothing herein should be construed as constituting an additional
warranty.