Note:
Note that "SAP HANA Cloud Portal" and "SAP HANA Cloud Platform, Portal Service" are rebranded to SAP Cloud Platform Portal starting in March 2017.
-------------------------------------------------------------------------------
As you may have heard, the SAP HANA Cloud Portal team has recently begun to offer public sample content – sites, plugins and widgets. You can download this content from GitHub and import it to SAP Web IDE, where you customize it, and deploy it to your HCP account for consumption in the Cloud Portal Admin Space, to enhance and boost your sites. Based on SAPUI5 controls for smooth integration with your sites, the enhancements include navigation options, login options, map and video widgets, and a parallax page. In this blog, we'll show you how to consume and customize the sample parallax scrolling option, step by step.
First, go to Cloud Portal's GitHub and click "Download ZIP", or log in to GitHub and clone the content. The parallax page is offered in a sample site template, so open the ZIP file and navigate to the cloud-portal-samples-master > sitetemplates > parallaxsitetemplate folder and zip its contents. Make sure to zip only the contents, without the folder itself, and name the ZIP file same as the folder name, i.e. “parallaxsitetemplate.zip”.
Now, open Web IDE from the SAP HANA Cloud Platform cockpit. Import the ZIP file you created, and make sure the name of the imported folder is "parallaxsitetemplate". It should look like this:
To see the behavior of the parallax scroll in the sample page, you can deploy the site to your account as is, and create a new parallax site in the Site Designer; or right click the project in the workspace and select Run > Run as > Preview Site Template. You can see the first background image, of a sunset with hot air balloons, and one balloon in the foreground that disappears upward as you scroll down, at a faster pace than the background scroll. In addition, as you scroll down, you can see that the sample "SAP HANA Cloud Platform" text scrolls downwards. Scrolling down the page, you can see several more examples of the scrolling effects, but we'll focus on these first three elements (background, foreground balloon and text), by way of demonstrating how to customize and implement parallax effects in your site. Remember that after importing the site, you can now create a new Cloud Portal site based on this template, create a new page based on the sample parallax page, or simply work directly on the sample code in the Web IDE workspace.
1. The Background Image
The background image is a "parallax element" which is part of the sample offering of the parallax site, and as such, has a built-in editor for configuring the scrolling settings. In Web IDE, you can find the relevant <div> component in the HTML file of the project. It looks like this:
You can edit the parameters for the background image in Web IDE. However, since the editor is included, the easiest way to change the background is in the Admin Space, by editing the widget's settings. In the Admin Space, to the right of the image, click on the parallax icon to open the editor:
As you can see, you can choose the file type (an image or a video), change the file itself, align it differently, and set the scroll pace.
2. The Foreground Image
The balloon that zooms up in the foreground was also created as a standard Cloud Portal image widget, and therefore has no built-in editor for the parallax settings. Let's see how we can use Web IDE to change the image itself, the pace and the direction of the scroll, and learn about a few other settings you can implement in this element or any of the others.
Changing the Image
- In the project folder structure, open pageTemplates > ParallaxPage.
- Right-click the Assets folder and select Import > From File System to upload the image file from your computer.
- Open the manifest.json file and locate the relevant "settings" section that contains the balloon image. You can simply open a find window (Ctrl+f) and search for "balloon".
- Replace the string "balloon.png" with the name and extension of the new file. For example: /sap/fiori/parallaxsitetemplate/parallaxsite/pageTemplates/ParallaxPage/assets/MyImage.png
Data Effects
Many types of CSS data effects are supported in the parallax site, such as: translate X or Y (the image moves upwards, downwards or sideways on its X or Y axis), 3D rotation, and opacity or grayscale transitions as the user scrolls through. Let's demonstrate playing around with the foreground image.
Open the template.view.html file and locate the relevant div tag for this image; then apply the transitions. In the following example, we applied to the foreground image the following effects: translate Y (negative value moves the image upwards), opacity (transitions from 1 to zero, i.e. from fully visible to transparent) and 3D-rotation on the X axis:
Here's the list of supported data effects. You can also find them in the template controller file in the project. Note that the rotate and scale effects listed here are 3D effects.
| Data Effect | How to Configure it |
|---|---|
| translateX | enter value in pixels or as a percentage |
| translateY | enter value in pixels or as a percentage |
| translateZ | enter value in pixels or as a percentage |
| rotateX | enter value in degrees |
| rotateY | enter value in degrees |
| rotateZ | enter value in degrees |
| scaleX | enter value in a float number |
| scaleY | enter value in a float number |
| scaleZ | enter value in a float number |
| opacity | enter value between 0 and 1 |
| grayscale | enter value between 0 and 1 |
| blur | enter value in pixels |
In that same template controller file, you can add to the list of effects simple data effects from the CSS library (single-parameter effects) such as simple rotate, scale and skew, and define their default values. So, if for example, I want to add a simple rotate (not the 3D rotate which is already there), I'll add a "rotate" line and its default value, below the blur effect:
Other parameters you can apply to the transition is to determine whether the effect happens when scrolling in to this section of the page or scrolling out, and define that it happens only once per page load:
- data-effects on: possible values are "enter" or "exit"
- data-effects once: possible values are "true" or "false"
3. The Text
In this sample, the "SAP HANA Cloud Platform" text is implemented as an HTML widget. As you would with an HTML widget, you can simply manually change the text and its values (e.g. color) in the code line in the manifest file in Web IDE, or work on the HTML file offline with any text editor, and copy the code into the relevant location in the file.
- SAP Managed Tags:
3 Comments
