SAP Enable Now – Training for standard authors

Exercise: Create a basic book page

Business Example:
You are asked to create content that shows a comparison between your company and a competitor.

Dependency Information:
This exercise uses the following objects that were created in a previous exercise:

Item Created in the Exercise

n/a

You will proceed working on the content of this exercise in subsequent exercises:

Item Details of data created that will be reused in later exercises

n/a

Tasks
Create a book page providing the requested comparison information.

· There should be an image which animates when the page is loaded.

· There should be two shapes. Each of the shapes should show different texts when hovered
with the mouse.
· A click to one shape (your company shape – in this exercise the shape named SAP) should
open your company web site (in the exercise sap.com).

1. Create a book page

2. Insert a placeholder
3. Insert an image
4. Insert shapes
5. Insert text boxes
6. Align shapes and text boxes
7. Animate an image and insert a link
8. Work with actions
Picture 1: Result example book page for this exercise

Task 1: Create a book page

1) Do not use a template, use the style Flat.

2) Name the new book page Competitive Comparison.

Task 2: Insert a placeholder

1) Insert a new placeholder as the title of the book page (upper area).
2) The placeholder should show the Book page title.
3) Choose a font and a font size for the title.

Task 3: Insert an image

1) Insert a new image in the right area of the book page.

2) Select any image of your choice from your file system.
3) Name the image object My Example.

Task 4: Insert shapes

1) Insert a rounded rectangle from the Shape menu.

2) In the control parameters, write SAP into the text field.
3) Change the shape color to blue in section Design.
4) Set the border width to 0.
5) Insert a second rounded rectangle from the Shape menu.
6) Enter ACME in the Text field, change the shape color to orange and the border width to 0.
7) Place both shapes at the left side of the book page – as shown in Picture 1 under Tasks.
Task 5: Insert text boxes

1) Insert two text boxes.

2) Name one text box SAP and the other one ACME.
3) Place one text box right to the SAP shape and the other one right to the ACME shape (see
Picture 1 under Tasks).
4) Enter some text in the upper text box (for example Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat).
5) Enter some text in the second text box (for example Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat).
6) Change the font, font size and color of both text boxes.
7) Hide both text boxes.

Task 6: Align shapes and text boxes

1) Select the SAP shape and enlarge it a bit.

2) Using the shift key select the ACME shape, too (so that both shapes are selected).
3) Define that both shapes will have the same size.
4) Select the SAP shape, the SAP text box, and the image all together and align them at the top.
5) Select the ACME shape and the ACME text box together and align them at the top.

Task 7: Animate image and insert link

1) Select the page control.

2) Activate the On Page Loaded parameter in the Actions section.
3) Define that the image My Example should Animate in when the page is loaded.
4) Select the SAP shape. In the Link section, activate the Link to parameter. Define that the shape
should link to your company web site (in our example to www.sap.com).
5) Enter a tooltip for the shape.
6) Define that the link target should open in a new window.

Task 8: Work with actions

The two text boxes should be shown when the mouse is hovering over the corresponding shape.
The text boxes should disappear again as soon as the mouse “leaves” the shapes.

1) Select the SAP shape.

2) In the Actions section activate the On Mouse Roll-Over and the On Mouse Roll-Out parameters.
3) Define that on mouse roll-over, the text SAP should be shown and the image My image should
be hidden.
4) Define that on mouse roll-out ,the text SAP should be hidden and the image My image should
be shown again.
5) Repeat steps 1 to 4 for the ACME shape.
6) Preview your work.
Exercise Solution
Task 1: Create a book page

1) Click New Object.

2) Click Book Page.

3) Do not use a template.

4) Name the new book page Competitive Comparison and click Ok.

5) Make sure to use the style Flat in the page properties.

Task 2: Insert a placeholder

1) Click the Insert Object and select Placeholder and position it in the grey upper title area.

2) The placeholder should show the Book page title.

3) Choose a font and a font size as you like for the title.
a) Open the section Design.
b) Activate the fields Font and Font Size. Make sure the squares in front of these settings are
green. If they are not, click them.

c) Define the font and font size as you like.

Task 3: Insert an image

1) Click Insert Object and select Image.

2) Select any image of your choice from your file system.

a) Click Insert File.

b) Browse for the image you want to use, select it and click Open. Then click Ok.

Alternatively you can use the provided graphic Comparison.png from the group Simple
 pages below the solution book page in your workarea. In that case you would click the

Workarea button and navigate to the group Simple pages.

c) Resize and position the image so that it is at the right half of the book page.
3) Name the image object My Example. Enter the name in the Name field.

Task 4: Insert shapes

1) Click Insert Shape in the toolbar.

2) Insert a rounded rectangle from the Shape menu.

3) In the control parameters write SAP into the text field and click OK.

4) Open the section Design.

5) Change the shape color to blue.

6) Set the border width to 0.
7) Insert a second rounded rectangle from the Shape menu.
8) Enter ACME in the Text field, change the shape color to orange and the border width to 0.
9) Place both shapes to the left side of the book page – as shown in Picture 1 under Tasks. Hint:
There is no text yet. You add that in the next step.
Task 5: Insert text boxes

1) Insert two text boxes.

a) Click Insert Object .
b) Select Text Box.

c) Repeat steps a) and b).

2) Name one text box SAP and the other one ACME. Enter the names in the Name field.

3) Place one text box right to the SAP shape and the other one right to the ACME shape (see
Picture 1 under Tasks). You can do this with drag and drop.
4) Enter some text in the upper text box (for example Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat).
a) Click in the Text field.

b) Enter your text in the text editor dialog and confirm with Ok.
5) Enter some text in the second text box (for example Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat).
Repeat steps a) and b) from point 4 above.
6) Change the font, font size and color of both text boxes.
7) Both text boxes should be hidden initially when the book page is shown.
Select the SAP text box and turn on the checkbox Hide.

Select the ACME text box and turn on the checkbox Hide.

Task 6: Align shapes and text boxes

1) Select the SAP shape and enlarge it a bit. Use the red handles.
2) Using the Ctrl key select the ACME shape, too (so that both shapes are selected).
3) Open the menu Change Alignment and select Same Size

4) Select the SAP shape, the SAP text box, and the image all together. To do so, press and hold the
Ctrl key and click all three objects. Open the Change Alignment menu and select Top Align.
5) Select the ACME shape and the ACME text box together using Shift-click and align them at the
top as explained in point 4.

Task 7: Animate image and insert link

1) Click beside any object on your book page to select the page control.
2) Open the Actions section in the properties panel.

3) Activate the On Page Loaded parameter in the Actions section. To do so, click the grey square in
front of the parameter. It turns green.

4) Define that the image My Example should Animate In when the page is loaded.
a) Click Add in the On Page Loaded field.
b) Select the image My Example from the drop-down list.

c) Make sure to have Animate In defined as an action in the right column.

d) Select the image object My Example and hide it.

5) Define that the shape SAP should link to the company web site (in our example to
www.sap.com).
a) Select the shape SAP.
b) Open the Link section.

c) Click the Edit button of the field Link to.

 d) In the dialog Link to select the button Free. This way you can enter any link you need. Type
in the web address in the field Link Target.

e) Confirm with Ok.

6) Make sure the field Tooltip in the Link section is active (green square in front of the field). Enter
a tooltip for the shape.

7) Turn on the checkbox Open in New Window to define that the link target opens in a new
window.

Task 8: Work with actions

The two text boxes should be shown when the mouse is hovering over the corresponding shape. The
text boxes should disappear again as soon as the mouse “leaves” the shapes.

1) Select the SAP shape.

2) In the Actions section, activate the On Mouse Roll-Over and the On Mouse Roll-Out
parameters.

3) Define that on mouse roll-over, the text SAP should be shown and the image My image should
be hidden.
a) Click Add in the field On Mouse Roll-Over.
b) Select SAP (the name of the SAP text box) from the drop-down list.
c) In the actions drop-down list, select Show.
d) Still in the On Mouse Roll-Over field, click the second Add.
e) Select the image My Example in the drop-down list.
 f) In the actions drop-down list select Hide.
4) Define that on mouse roll-out the text SAP should be hidden and the image My image should be
shown again.
a) Click Add in the field On Mouse Roll-Out
b) Select SAP (the name of the SAP text box) from the drop-down list.
c) In the actions drop-down list, select Hide.
d) Click Add (now in the second line) in the field On Mouse Roll-Out.
e) Select the image My Example in the drop-down list.
f) In the actions drop-down list, select Show.
5) Repeat steps 1 to 4 for the ACME shape.
6) Preview your work.

To view the correct results of this exercise you can open the book page with the solutions. Open the
project Competitive comparison - solution from the group SEN100 Exercises\Simple pages of your
workarea in project editor.