Learn how to use SAP Work Zone |Summer Tutorial Series |Lesson 2: Page Builder

Welcome back to our summer tutorial series on SAP Work Zone. In this second lesson of the series, you will learn about the page builder experience in SAP Work Zone. You can find all the beginner friendly tutorials of this series on our YouTube channel and continue learning throughout the summer season.

The Lesson 1 was about giving an overview of SAP Work Zone, in Lesson 2 we are going to explore the no-code page builder experience. The page editor we’re going to look at is used across the my workspace, regular workspaces, and homepages.

Lesson 2: Page Builder

Watch this YouTube video for the detailed demo

 Subscribe to our YouTube channel to continue learning throughout this summer

As mentioned in Lesson 1, the role used in this demo is of Stephanie, Head of customer service strategy at ´´AirX´´. In the next part of this blog, I will go over the Lesson step-by-step explaining the page builder experience of SAP Work Zone.

Step 1 – Reaching the page setting options

Stephanie can reach the page setting options by clicking on the ´magic wand´ icon at the right corner of her homepage. Here she can find the following options:

• Language selection and translation
• Revert to previous version of page
• Copy page to use as a starting point to build other pages
• Delete page tab

Step 2 – Editing the page using page designer

The page editor can be accessed by clicking on the ´pencil´ icon right above the ´magic wand´ icon. The page editor provides a grid-based layout with up to six columns and flexible number of rows. You as a page designer start by creating the required grid layout, to which you then add the relevant content placeholders in the form of so-called widgets or cards.

Step 3 – Exploring collection of cards and widgets  

There is a broad collection of cards and widgets that can be accessed by Stephanie by clicking on the ´Add Widget´ button. Here you can find a rich catalogue of out-of-the-box widgets provided by SAP. There are a several categories of widgets from which Stephanie can select.

• Standard tools

• Filters and Lists

• Content and Documents

• Extensions and Integrations

• UI Integration Cards

In addition to these pre-built widgets, the page builder provides the ability to include the UI integration cards that you can create in low-code as well as pro-code approaches

Step 4 – Adding a multi-media widget  

Stephanie will select a desired place on her homepage where she wants to add her widget. She will click on the ´Add Widget´ button to explore the widgets available. She will start with using a Standard Tool and add a multimedia to her homepage. She will add a video by simply copy pasting the YouTube video´s URL and adding a title to her widget.

Step 5 – Adding an event´s widget  

She also wants to add a few more widgets to her homepage before moving forward. She will go again to the ´Add Widget´ button. She now wants to add an event´s widget which can be found under the content and documents section. She will search in a public SAP Work Zone workspace, where she can find the related events. She searches for the ´Healthcare and benefits´ workspace for this purpose.

After selecting this workspace, she will go down and click ´ok´. Now she will be able to see all the upcoming events from this workspace on her homepage as a widget.

Step 6 – Adding company logo as a widget

Lastly Stephanie wants to add her company logo at the top of her homepage. She can do that by customizing her homepage layout and adding a row at the top. As explained above, she can add the widget simply with a few clicks.

It will show up here oh her homepage exactly how she wanted it. Now she is fully satisfied with how her SAP Work Zone homepages looks like.

Step 7 – Publishing the changes

Stephanie is now ready to publish all the changes that she made to her homepage. She will go up to the publish button and click on it to save the page design and make it available to any users who have access.

She will then be able to see all the changes made on her homepage. This is how easy it is for citizen developers to leverage from the capabilities of SAP Work Zone. Join me in the next lessons to learn more.

---

Watch the Lesson 1 of this summer tutorial series:

• Learn how to use SAP Work Zone | Tutorial Series | Lesson 1 – YouTube

Learning Journey on Low-code/No-code with a dedicated lesson on SAP Work Zone:

• Utilize Low-Code/No-Code Applications and Automations for Citizen Developers

Additional Material:

Hands-on Tutorials: