Product Information
How to use Page builder in SAP Build Work Zone? |Summer Tutorial Series |Lesson 2: Page Builder
Disclaimer: Please note that this blog was published prior to the re-branding related to SAP Build portfolio, which was announced at SAP TechEd 2022. SAP Launchpad service and SAP Work Zone come together under the SAP Build Work Zone brand, with two editions: standard edition (formerly SAP Launchpad service) and advanced edition (formerly SAP Work Zone).
You can learn more in this blog post: SAP Build Capabilities Explained | SAP TechEd | SAP News Center
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:
Learning Journey on Low-code/No-code with a dedicated lesson on SAP Work Zone:
Additional Material:
- SAP Work Zone End User Guide
- SAP Community Page
- Product information on sap.com
- Discovery Center
- SAP Store
- Roadmap
- Videos and product demos
- SAP Help Portal
- SAP SuccessFactors Work Zone
Hands-on Tutorials: