Experience SAP HANA Cloud Portal

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. Activate Cloud Portal Plugin for SAP Web IDE... 5 1.5. Get the source code... 6 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 1

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 2

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 haven t 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. 3

Exercise 1: Setting up the Work Environment In this exercise, you will initiate a free SAP HANA Cloud trial account, start SAP Web IDE 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 account s 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. 4

SAP Web IDE opens. 1.4. 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 IDE s 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

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.5. 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 6

o Resources: o o o o partnerregistration 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 7

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 fioriwidget opportunityform partnerregistration Description A Fiori designed application displaying a list of records from the Cloud for Customers Opportunity entity in the master-detail paradigm A form that enables users to create a new opportunity record in the Cloud for Customers back end 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. 8

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. 9

2.1.2. Import the source code into your project Import the application s 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. Click Import. 6. Click OK on the confirmation dialog 10

You ve 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 application s data model to the application s 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 project s 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 application s 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 Sale s 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. 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 provider s 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. 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. Application Name: fioriwidget (lowercase only). b. Password: your SAP HANA Cloud Platform trial account/scn password. c. Create Version: Create a version from the code that you are deploying by selecting the checkbox and entering a version name (for example: 1.0). d. 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 you ve 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 application s 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 and Push at the bottom left side of the Git pane. 4. 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. 9. In the navigation menu, click Version Management. 26

10. Select the version that you just created and click the (Activate) icon to activate this version. The Restart Application dialog box opens. 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 (New folder) toolbar button, change the folder name to Assets, and press Enter. 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 (Upload file to the repository) toolbar button again, and browse to the following image file: site_bg.png. 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 (Widget options) menu. 3. From the side-panel menu, click 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 (Page options) menu, and change the Page Template from Partner Portal to Custom Template. 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 (Widget options) menu, and click Remove to delete the page navigation bar. 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) to return to the Cloud Portal Site Directory. 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 company s 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

Copyright 2015 SAP SE SE or an SAP SE affiliate company. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE. The information contained herein may be changed without prior notice. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. National product specifications may vary. These materials are provided by SAP SE and its affiliated companies ( SAP SE Group ) for informational purposes only, without representation or warranty of any kind, and SAP SE Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE 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. SAP SE and other SAP SE products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE in Germany and other countries. Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices.