In the world of internet it has become very important for all organizations to communicate with its customer for 24 hours a day, 7 days a week, 365 days a year. A website for the organization is the best way to interact with its customers. It’s like opening a door and welcoming its customers and prospects into the organization. A website is not only important for private organization; it can also be very useful for government organization. We so often change our cities and usually struggle to get all the information regarding the city. With a city portal, it will be easier for the official to communicate with the citizen and citizen will get all information at one stop point. It can easily be said that a website is a must for all. But the point to keep in mind is that, though website is a must for all organization, it should not be an overhead for the organization which means a website should be created quickly and the maintainability of the website should be minimum.
With the latest HANA Cloud Portal feature, it helps organizations to create portal site quickly and efficiently. A portal can be created quickly; it can be also be previewed in from different devices and publish the site when it’s ready for usage. It provides statistics of the usage of the portal on different devices also.
Let’s take an example of a city portal. The city portal should provide information and services to the citizen based on their preferences. The city portal should be accessible from different gadgets like desktop, tablet, smartphone. The look of the portal should be interesting so that citizen should visit it more often for its queries rather than finding other ways of getting information.
To support this kind of use-case, HANA cloud portal fits the bill perfectly. Once an account is created in HANA Cloud Platform and portal service is added to the account. The user can start creating the portal site.
1.1 Architecture
SAP HANA Cloud Platform is an in-memory cloud platform based on open standards. It provides access to a feature-rich, easy-to-use development environment in the cloud. The platform includes a comprehensive set of services for integration, enterprise mobility, collaboration, and analytics. HANA Cloud Platform can be used to deploy and host SAP UI5 application also. It provides cloud connectivity which helps in communicating with the on premise system in a secured fashion.
One of the features of the HANA Cloud Platform is the HANA Cloud Portal. SAP HANA Cloud Portal is a cloud-based solution for fast and easy portal site creation. SAP HANA Cloud Portal lets users build, brand, and publish external and internal web sites. 
1.2 Design
In the HANA Cloud Portal following tab will be seen.
Ø Site Directory: Create and maintain sites. Sites can be published or deleted. Sites can be exported or imported from another system also.
New site can be created via Site Directory-> Add Site
Ø Marketplace: Existing templates provided by the portal. These templates can be used in the site directly.
Ø Content: List of widgets available which can be used for developing the site. If a widget is developed by the same user of the HANA Cloud Platform, it will be auto discovered. Otherwise we can add the widgets also with the deployed links. To add a SAP UI5 application as widget, spec.xml needs to be created and deployed along with the SAP UI5 application.
Sample spec.xml:
Ø Theme: Existing theme provided by the portal. New theme can also be created ro suit our requirement.
Ø Authorization: User can be given roles like administrator or creator. Administrator has access to all resources in the portal account. Creator role has access to sites only created by them.
Ø Analytics: Provides information on number of visitors, device used, browsers and operating system. This information can be retrieved for each specific site or accumulated of all sites.
Ø Document: Repository to store documents which can be used across the sites. All documents uploaded in the public folder can be shared/ used by the sites.
Site Creation:
Once the new site is created, the following option is available:
Ø Site Setting: Site URL can be changed to make it more readable link. Site access level can be set. Private Site can be accessible only to users assigned in user management and in portal authorization tab. Public Site can be accessible to all. Restricted site can be accessible to all portal users.
If the site is down a default site link can be provided. Since the smartphone UI rendering is different, a site created specifically for smartphone can be provided which will be access by the same site URL which is used by desktop.
Administrative details are also shown in the tab
Ø Content Catalog: Few widgets are already provided by the portal like HTML viewer, List viewer etc. To create the site we can drag and drop these widgets and put the content in the widgets. HTML file can be uploaded or the one uploaded in document repository can be used.
In URL widget, we can assign any URL which will be shown in the site itself. Links can be added to another site pages or URLs.
Video widget helps in creating direct streaming of videos. Any images uploaded in the document repository can be used in Image Widget also.
Also widgets which are deployed in the cloud are visible and can be used. The widgets can be auto discovered or it can be added in the content.
Ø Design Setting: Page templates and themes can be selected here. The site page setup can be altered in this tab. In the “Site Layout” various options is available to change the look of the site like fixed site width and minimum space between widgets.
Ø Page Management: New pages can be added. Various page setting option are available. Each page access level can be assigned. By default it takes the site access level. The access level is same as site access level: Private, Public, and Restricted. A page can be hidden from user access. Different page template can be assigned to the pages.
Ø User Management: Users can be added as end users and author. If a site or page is private, only the end user or author can access it.
Ø Site Preview: Responsiveness is provided by the portal. For desktop and tablet, the UI is rendered in a similar way, but for smartphone the UI rendering pattern is different. Few widgets don’t support smartphone.
Ø Publishing Options: The site can be published to make it accessible to all users based on the site access level.
Theme Creation
Creating a new theme in the portal is also quite simple. To keep it easy, you can download the existing theme from the theme tab in the HANA cloud portal and make the necessary changes.
The theme will be downloaded as a “less” file. The file will contain different parameters. We can add our inputs to this existing parameters. Currently it is not possible to add new parameters, but with a large variety of parameters available, we can customize the theme as we want.
Examples:
@SiteFontFamily: Arial, Calibri, Tahoma, Geneva, monospace;
@SiteBackgroundColor: #2B73BF;
@SiteBackgroundImage: url('/portal-web/cloud-portal/applications/ODP/images/site_background.jpg');
1.3 Sample Screen layout
The city portal contains three tabs: Home, City Services and Upcoming events in the city.As per the design of the portal the required widgets can be drag and dropped from the content catalog. To edit the added widget, select the widget and click on the ‘Widget Options’ icon.
Ø The Home tab will provide different information related to the city for example, images shown in a carousel, video showing the aerial view of the city, contact information and quick links.
a) The tab of Home, City Services, and Upcoming Event is set to stretch. Option of setting it to left or right is also available.
b) The banner is created via Rich Text Editor (RTE) Widget. The background can be changed in the source by the following code: <style type="text/css">body{
background: #0A5796;
}
</style>
c) The carousel is created by a HTML code uploaded in HTML widget. The images are uploaded in document repository
d) The quick links is added as a list viewer widget and for the youtube videio, a video widget is added.
e) The Parking Permit is linked to SAP UI5 application which is deployed in the HANA Cloud Platform. The link will open the application directly in a separate window.
Ø The City service tab will provide information to different kind of services provided to the citizen. The services are clubbed in specific topics like Business, Transportation etc. The recommender service is also shown in the same screen. Admin console and task creation are also part of the screen.
a) The service list created by list viewer widget.
b) The ‘Tasks’ area is designed using a rich text editor widget and specific styling has be added to get the view.
c) Images are added via the image Widgets
d) The Admin console is linked to a hidden page. In the hidden page it will open a SAP UI5 application added as widget.
Ø The Upcoming events tab provides details on the events happening across the city. It provided information on the initiatives taken by the city to improve the citizen’s lifestyle. The tab design is the simplest, the look is created using image, RTE widgets.
1.4 Pros and Cons
Pros:
- The site can be easily developed with little knowledge on HTML
- Any complex functionality can be achieved with UI application like HTML/JS or SAP UI
- New widgets can be developed to support the requirement which is not provided by the portal yet.
- Publish-Subscribe widgets help in flow of data among different widgets. The Publisher Widgets will publish the data in a key value pair in a common memory called context memory. The subscriber widget can reads the data using the key and take subsequent steps.
- All commonly used resources can be stored in the document repository
- Preview in different devices can be seen at design time
- Default themes and templates available
- Social Media integration is provided out of the box
- Statistics on usage is available
Cons:
o Search Option: Portal search is not provided, but its planned for Q2
o No drag and drop option available for HTML code development.
o Any changes in HTML code have to be uploaded again. No Option of writing the HTML code directly in the widget
o Few widgets are supported in smartphone
- SAP Managed Tags:
3 Comments
