Building Portal Site on SAP Cloud Platform Example - Hyderabad Metro - SapUi5

[former_member295118]

Introduction:

This blog illustrates how to create a Portal Site on SAP HCP, adding standard widgets, creating custom widgets.

We will be implementing below sample requirement (Site for Hyderabad Metro) using basic layout site template:

1. Create a single page site


2. Create / Add standard cards Ex: Gallery, Events, and address.


3. When we click on a particular card, Application should open URL in a new tab.


4. Create a custom widget: Simple Form to show address


5. Based on the authorization, only admins can edit the address / Contact number


6. Add Footer (Social network links)

 

 

1. Creating a single page site

Step 1:

Open SAP HANA Cockpit and click on portal service >> Go to Service.

Step 2:

In the site directory, Click the Create New Site. Enter a name and confirm





In the above screenshot, we can observe some standard site template are there which we can use. These site templates will create the basic layout of page, menu and some standard widgets.



Basic Layout Site Template

We would need only one page to implement the requirement so we can delete other pages by clicking on down arrow of each page and click on the delete button.

Use setting icon of the page to Rename the page /  Change Authorization settings.



 

Step 3:

Click on menu editor and hide the menu for all the devices:

Menu Editor >> Settings >> Uncheck two checkboxes >> Save



Next target is to remove the fiori shell header. Follow below steps to delete the header which contains Search, User Personalization settings, a Company logo.

• Go to setting using the side navigation


• Click on the edit button


• Change the SAP Fiori Site Header switch to No


• Click on save button

Single page template creation is completed. Below is the screenshot:

2. Creating a Create / Add standard cards Ex: Gallery, Events and address.

Step 1:

Change background image by clicking on setting icon of the section:



Below is the screenshot after changing background image:



Step 2:

Use standard widgets and create title, subtitle and some cards.



Follow the below steps to create standard cards

• Click on add button of the section


• Search for gradient Image Card and select the widget


• Select the cards section and click the edit button to change the image and text like shown below

 

 

 

 

3. When we click on a particular card, Application should open URL in a new tab.

Click on the edit button of card and give URL and select the external link. Enter the site URL and save.



Publish the changes and click on the preview button.

 

 

After all the changes, the Site will be like this :

 

Using a standard widget option, we can add videos and grid layout.

4. Create a custom widget: Simple form to show address.

Step 1:

            Open Hana Cockpit >> Select Web IDE full stack >> Go to Service

Step 2:

• Create a new sap UI5 project


• Create a simple form to display the address in view.


• Add User service in neoApp.json


• In Controller by using user details service we can retrieve first name, last name, user id, etc…. In controller onInit method we can control the widget visibility by validating the user.


• After Deploying UI5 project successfully. Right click on the project and select Use As SAP Cloud Portal Template and enter name.


• 

Step 3:

Add a custom widget to portal site:



Below is the site screenshot after completing the above steps:

6. Adding Footer: Social Network URLs.

Click on add button and select social Networks



After adding the above widget, we can add URL by clicking on the settings icon.

We need to publish the site after completing the development.

Click on publish button and open site URL in a new tab.

Final Site Preview:



 

https://flpportal-p1942743970trial.dispatcher.hanatrial.ondemand.com/sites/HydMetro?evictCache=true#...

 

Thanks,

Ajay.