Explaining the SAP Work Zone No-Code Page Builder Experience

In our previous lesson, we talked about the key building blocks of SAP Work Zone and how homepages and workspaces are essential pillars for creating engaging experiences. But you’re likely wondering what tools exist for this kind of creation that do not require web development skills using (for example) HTML or CSS. In this lesson, we are going to explore the no-code page builder experience that is leveraged across both homepages and workspaces and what role the cards and widgets catalog plays in this process.

The page editor we’re going to look at more closely in this lesson is used across the My Workspace, regular workspaces, and homepages alike. However, there are minor differences depending on the scope of where you use the page builder – that is, certain widgets are specific to the homepage experience, for instance.

Page Editor

While the no-code page builder experience is fully designed with the citizen developer and even the regular end-user in mind, it is not necessarily available for every user of the system. The content we’re going to cover in the remainder of this unit shows the available capabilities when being granted permission to edit the homepage(s) or administer a workspace, for instance.

The page editor provides a grid-based layout with up to six columns and a flexible number of rows. As a page designer you start by creating the required grid layout with the desired cells, to which you then add the relevant content placeholders in the form of so-called widgets or cards (more on that in just a bit).

Once you have created the page experience you are looking for, you can either save it as a draft for further review or publish it right away – once published, the users will immediately see the results on the updated or newly created page. In case you need to undo changes or look at a previous design, you can use the versioning feature to view or even reset back to an older version of the page.

To support localization requirements, you can create translated versions of the pages so that users can see the content and page design in their selected language of SAP Work Zone (for example, their browser language). However, there are no automated translation capabilities; if required, you will need to provide the translated texts, image descriptions etc. when creating the additional variants.

While the no-code page builder allows you to create the layout and overall structure of your pages in SAP Work Zone, it is the broad selection of cards and widgets you can add to the cells that enables the seamless blending of business data, web content and unstructured user input. Let’s take a look at the catalog of these cards and widgets next.

Whenever you are working in the page editor, you have access to a rich catalog of out-of-the-box widgets provided by SAP. Depending on your use case and targeted page structure and design, you will end up using a combination of different widgets from several categories.

Standard Tools

First, the ‘standard tools’ could allow you to create a rotating banner, add an image, or include multi-media assets like an embedded video on your page, for example.

Filters and Lists

Next, there are different ‘filters and lists’ available that provide options for showing selected workspaces, frequently viewed content or, including a search field.

Feed Widgets

When you need to add more productivity-focused information to your page(s), this next category of widgets that includes for example a feed widget that will come in handy for showing recent posts or comments.

Content and Documents Widgets

If, however you are looking to add or show different (web) content on your page, you should explore the ‘content and documents’ category of widgets. Here, you get access to different options such as surface events, knowledge base articles or other documents in various layouts such as a simple list or a content carousel. Like with most other widgets, the content is stored in the content area for your homepage or workspace, and you simply expose the already separately uploaded or created content via these widgets.

Extensions Widgets

The last type of pre-built widgets, there is the "extensions and integrations" category which focuses on business data from pre-built integrations, such as content from an external content repository integrated into SAP Work Zone.

Cards

In addition to these pre-built widgets, the page builder provides the ability to include (UI Integration) cards that you or someone with more advanced technical skills can create using low-code or pro-code approaches. These cards can surface data from connected SAP and third-party business applications in various designs and layouts; we will cover them in more detail in the extensibility lesson of this unit.