Getting Started - SAP Store

Getting Started

Table of Content

1. Introduction

2. First thing to do after adding ShortPoint Widget Beta

2.1. Step 1: Create a new site from a Support Template

2.2. Step 2: Replace HTML Widget with ShortPoint Widget Beta

2.3. Step 3: Add a Nice Background with a Welcome Message

3. Designing Content using ShortPoint Built-In Sample Pages

4. Copy Designs from ShortPoint Live Demo Site

5. Copy the whole page into ShortPoint Widget

6. Copy a single element into ShortPoint Widget

website: www.shortpoint.com email: [email protected] tel: +971 4 501 3900 fax: +971 4 501 5200 P.O. Box 341110

ShortPoint FZCO License #1377 D&B Number® 55-794-6379 Dubai Technology Entrepreneur Centre, Dubai, United Arab Emirates

Formed Pursuant to law no. 16 of 2005 with limited liability

2

http://www.shortpoint.com/

mailto:[email protected]

Getting Started

Introduction Note: Before going through this guide, you should have already installed ShortPoint Widget into your SAP HANA Cloud Portal, in case you did not, please refer to the Installation Guide before moving on with this one .

In this guide, we will walk you through the very basic concepts of designing beautiful pages using ShortPoint, and we will showcase some pre-designed pages, that you can easily add them into your site.

If you have any questions or found any issues with either the ShortPoint Widget or even this documentation, please contact us at [email protected]




3




Getting Started

First thing to do after adding ShortPoint Widget Beta

Step 1: Create a new site from a Support Template From the Admin Space, in SAP HANA Cloud Portal, go to Site Directory

Then Create a new site by clicking on the ( + ) button

From the available Templates, choose Support Site




4



Getting Started




5



Getting Started

Step 2: Replace HTML Widget with ShortPoint Widget Beta Now you have created a Site from Support Site Template, now navigate to Homepage from the menu on the left panel




6



Getting Started

Delete the first HTML Widget that contains the message Welcome to Atomic Support

Now on the same place that used to have the HTML widget, click on the ( Section + ) button

And choose “ShortPoint Widget” from the “Add Content” dialog

Now you will see a big yellow info box, as in the next image.




7



Getting Started




8



Getting Started

Step 3: Add a Nice Background with a Welcome Message

Edit the ShortPoint Widget Beta

After you click the edit, the yellow box will not appear ( as we exited the render mode ), and entered the edit mode, where it will show a ShortPoint rich text editor and the wireframe that shows a general structure of the design rather than the final design

Remove the default content, by clicking on the ( x ) that appear on the section element

Click on the Blue Insert Button

It will open ShortPoint Inserter Tool, that will allows you to pick design elements, and choose their options.




9



Getting Started

On the search box, type "Background", to clear all other elements, and click on the Background.

Now you can start customizing the "Background" ShortPoint, we'll start from the "Settings" tab, Scroll down until you see the "Height" field, update its value to be 70% ( this means the background image will fill up 70% of the screen )




10



Getting Started

Now navigate to the "Background" tab and fill the Image field with the value ( http://www.shortpoint.com/wp-content/uploads/2015/08/rocky-beach.jpg ), as shown in the next image

Then click on Insert




11



Getting Started

Basically we have configured this element, to have an image background ( to a nice beach ), and we have set the height of this background element to 70%, which means that this background when it will be available in the viewport, it will occupy 70% of the screen device's height. Now put the cursor inside the Background element, and type a Welcome Message ( e.g: “Welcome to Our Support” )

Update the font size to make it big ( e.g: 48 )

And hit the Save button




12



Getting Started

And now you have a nicely designed background banner for your support site! Note: You need to publish your page ( using the Publish button as shown in the next image ), in order to let your site visitors see your designed pages, otherwise only site page editors will be able to see your changes.




13



Getting Started

Designing Content using ShortPoint Built-In Sample Pages ShortPoint Widget Beta does not only come with a set of design elements, there are even design templates available with a click of a button for you to jump start the process of designing your sites, and to get you more familiar with what ShortPoint Widget Beta can do in terms of revamping your site design. Note: This chapter assumes a basic understanding of how to edit the widget and update its content, If you are not familiar with those concepts, we recommend you to check the previous chapter first ( First thing to do after adding ShortPoint Widget Beta ) In this chapter, we will show you how to use those pre-defined templates, to get some inspiration. For the demo purposes, we will continue from the Support Site we have created recently, but feel free to create a new site or site page for this chapter. Edit ShortPoint Widget




14



Getting Started

Click on Sample Pages drop down menu.

As you can see, there are currently 5 sample pages that are ready for you to use them ( in the future there are going to be more! ) Once you click on any of those sample pages, the whole content of the widget will be replaced with this sample page, as shown in the next image. Pick up the template that you like, and click Save




15



Getting Started




16



Getting Started

Copy Designs from ShortPoint Live Demo Site We have created a live site that contain a set of nicely designed pages and templates, that you can copy them into your ShortPoint Widget with a touch of a button. We are constantly adding new pages and designs to the demo site so you will always be inspired. In this chapter, we will show how you can copy either a single element from the design or the whole page design into your widget.

Copy the whole page into ShortPoint Widget

Open http://demos.shortpoint.com/, you will find a set of nicely designed template, pick the template you like the most, and click on it to open ( for the purpose of this example we will open Let’s Move template )

On the top of the page, you will see a black toolbar, that contain a blue Copy blue button in the center, click on it.

Now go into your ShortPoint Widget, and clear everything first, by clicking on the ( x ) button for all the elements in the editor




17

http://demos.shortpoint.com/



Getting Started

Paste the design you just copied from ShortPoint demo site, by either clicking ( Ctrl + V ), or right click and Paste

As you can see the whole design has been copied into your widget

Save the widget, and now you have the exact design from our demo site right into your widget




18



Getting Started

Copy a single element into ShortPoint Widget

Let us say that you only like one element from the demo site, and you do not want to copy the whole design and delete the parts that you do not want, well you can easily copy a single element, and here is how to do this From the same black toolbar at the top of the demo page, there’s a toggle called “Allow to copy single ShortPoint”, make sure it is checked

Once it is checked, you can roll over the page with your mouse, and you will see that all elements have a light blue overlay on top of them, with a gray “Copy” button.




19



Getting Started

Copy any element you want, and paste it directly into your ShortPoint Widget, the same way you did before with the full page content

And save the widget

Congratulations! You now have some beautiful pages designed with ShortPoint




20



Documents

Getting Started - SAP Store