Skip to Content

Design SAP Work Zone's Home Page

test
0 %
Design SAP Work Zone's Home Page
Details

Design SAP Work Zone's Home Page

November 9, 2021
Created by
October 19, 2021
Beginner
20 min.
Open the Home page, add content to it, and change the overall layout.

You will learn

  • How to open SAP Work Zone
  • How to design a SAP Work Zone Home page
QR code

Prerequisites

A subaccount in SAP BTP that includes a subscription to the SAP Work Zone service has already been setup for you.
 
Note that SAP Work Zone is not available in a trial account.

In this group of tutorials you’ll learn how to build a digital workplace solution using SAP Work Zone.

The Home page is the landing page when you first open SAP Work Zone. It is the first menu item in the top navigation bar.

In this tutorial, you’ll be designing a SAP Work Zone Home page. You’ll add rows and columns to configure its layout and also add widgets with static content to it. In later tutorials, you’ll add apps and cards to this page.

Note that you can also design the overview page of a workspace the same way.


Step 1: Download resources that you'll be using for this tutorial

First download these image files so that they’re on your computer ready for you to add to your page:

Log on to answer question
Step 2: Access SAP Work Zone
  1. Open your browser and navigate to your subaccount in SAP BTP.

  2. Click Instances & Subscriptions in the left navigation panel.

    Click Instances & Subscriptions
  3. Under the Subscriptions tab, click SAP Work Zone.

    Open SAP Work Zone
  4. Enter your log on credentials.

    When you open SAP Work Zone, you’ll see the runtime of the company’s work zone with the Home page in focus. By default, SAP Work Zone is preconfigured with a shell with different content and features. You can configure SAP Work Zone and add your own content.

    Open work zone

SAP Work Zone includes the following menu items:

 
Home - displays information that is relevant to everyone in the company who has access to the work zone.
 
My Workspace - a personal workspace. All users of SAP Work Zone can create their own workspace. This workspace can be used as a favorite page for frequently used content and applications.
 
Applications - provides access to all business apps that the logged on user can access and that are configured for display.
 
Workspaces - a central place for you to create workspaces. These workspaces can become available to any group of company users and to external users.
 
Tools - provides access to different tools like company knowledge base, calendar, and more.

 

In the next steps, you’ll learn how to design the Home page of the company Velotics.

Log on to answer question
Step 3: Open the Page Designer of the Home page

The Page Designer tool is used to edit the Home page and also to edit overview pages of any workspace in SAP Work Zone. In this step, you’ll access the page designer for the Home page.

You can use the Page Designer to add, move, resize, align, configure widgets, and modify the overall layout of your page. As you design a page, your work is automatically saved so that you don’t lose your changes prior to publishing or saving as a draft.

  1. With the Home page in focus, select the Switch page view icon on the left side of the screen.

    Switch page view
  2. In the dialog box that opens, click Company.

    Click company view
  3. Click + to add a page tab.

    Add a page tab
  4. Name the page tab Home and click Create.

    Name the page tab
  5. This opens the Page Designer Tips screen. You can close it for now.

The Page Designer is now active and you can use it to design your Home page.

Note that the Home page can also be designed and managed from the Administration Console – a tool where all administration tasks are performed for SAP Work Zone. You can get to the Administration Console, by following these steps:

  1. Under your avatar at the top right of the screen, open the dropdown menu, and click Administration Console.
  2. From the Administration Console, expand the Area & Workspace Configuration menu item and click Home Page.
  3. Click Manage Home Page to open the home page.
Log on to answer question
Step 4: Add a header with a title for the Home page

Let’s start designing the Home page.

  1. Before you start, first remove the placeholder widgets. Hover over each widget to expose the settings in the top right of the widget and click the trash icon.

    Remove the default widgets

    Your screen will look like this:

    Empty home page
  2. Now, hover over the first row and click the trash icon to remove the 2nd and 3rd columns.

    Remove columns

    Your screen now looks like this:

    Home page without columns
  3. In the first row, click Add Widget to open the widget gallery.

    Click add widget
  4. Under Standard Tools, select the Rotating Banner widget.

    Select Rotating Banner widget

    You can also use the search feature to find it.

  5. Design the first slide of the rotating banner as follows:

    Image Click the link in the image widget to browse for and select this image that you downloaded: home_row1_rotating_banner1
    Title Welcome to Velotics
    Description Access all key information and apps that you need
    Text Placement Top Left
    Design first slide
  6. Click + Slide to add a second slide to your rotating banner.

    Add second slide
  7. Design the second slide of the rotating banner as follows:

    Image Select this image: home_row1_rotating_banner2
    Title Welcome to Velotics
    Description Work anywhere using your mobile device
    Text Placement Top Left
  8. Click OK.

Log on to answer question
Step 5: Design the page's second row
  1. Click + at the bottom of the 1st row to add a new row.

    Add second row
  2. In the second row, click Add Widget.

  3. Under Standard Tools, select the Text widget.

    Select text widget
  4. Design the text widget as follows:

    Text Type in the following: Company News & Events.
    Font Select the text and change to Arial 14pt.
    Color With the text still selected, choose black from the chart.
    Design text widget
  5. Click next to the row to see how your page looks so far. The second row should look like this:

    Preview row 2
  6. To increase the spacing between this row and the first row, hover over the row to expose the row settings at the top right, and click Edit row settings.

    Edit row settings
  7. Enter the following values:

    • Check the box Extend the row to full width.

    • Under Row Padding, add the value 30 pixels in the Top value box and click Save.

    Define row settings

Log on to answer question
Step 6: Design the page's third row
  1. Click + at the bottom of the 2nd row to add a new row.

    Add the third row
  2. In the third row, click Add Widget.

  3. Under Standard Tools, select the Image widget.

  4. Click the link in the widget and select this image: home_row3_image1

    Add image to image widget
  5. Click Add Widget directly under the image and select the Text widget.

    Add widget
  6. Design the text widget as follows:

    Text Copy and paste the following text:
     
    Employee-Led Innovation
     
    The Velotics Venture Studio specifically focuses on fostering an environment of innovation and entrepreneurship. It identifies future opportunities and funding ideas for employee-led innovation.
     
    Once high-potential, entrepreneurial teams have been selected to join the Velotics Venture Studio, they receive “venture” funding to build new, high growth businesses inside of Velotics based on their ideas.
    Font Select the text and change to Arial 10pt.
    Color With the text still selected, choose black from the chart.
    Style Select the title and bold it.
  7. On the right side of the image widget that you’ve just added, click + to add another column.

    Add another column
  8. Click Add Widget and add an Image widget. Then add this image: home_row3_image2.

  9. Hover between the 2 images until you see the column separator and drag it until both images are aligned.

    Adjust images
  10. Directly under the second image widget, add another Text widget, and design it as follows:

    Text Copy and paste the following text:
     
    Twilight Marathon Challenge
     
    The Twilight Marathon through Mannheim and Ludwigshafen will take place next week. The largest mass sports event in the metropolitan region starts this year with a new route.
     
    The revised route is a combination of already known and new sections for the different disciplines, and the organizers hope to be able to attract over 10,000 participants.
    Font Select the text and change to Arial 10pt.
    Color With the text still selected, choose black from the chart.
    Style Select the title and bold it.
  11. Click next to the row to see how your page looks so far. This is how the 3rd row should look:

    Preview of row 3
  12. Hover over row 3 to expose the settings and click the Edit row setting icon. Set the Row Padding to 30 pixels in the Top value box and click Save.

Log on to answer question
Step 7: Design the page's fourth row
  1. Click the + icon at the bottom of the 3rd row to add a new row.

  2. In the fourth row, click Add Widget.

  3. Under Standard Tools select the Text widget.

  4. Design the text widget as follows:

    Text Type in the following: STAY INVOLVED! Capitalize all the letters.
    Font Select the text and change to Arial 14pt.
    Color With the text still selected, choose dark blue from the chart.

    Then in the same widget, enter a new line and design as follows:

    Text Type in the following: Join the hackathon workspace and ask all that you need to know
    Font Select the text and change to Arial 14pt.
    Color With the text still selected, choose black from the chart.
  5. Click outside of the row to see how your page looks. The fourth row should look like this:

    Preview row 4
  6. Hover over row 4 to expose settings in the right corner and click Edit row settings.

    Enter row 4 settings
  7. Enter the following settings:

    • Check the box Extend the row to full width.

    • Color: #E5E5E5

    • Under Row Padding, add the value 30 pixels to the Top value box and click Save.

    Define row 4 settings
Log on to answer question
Step 8: Publish the Home page

Before you publish to all the users in your company, you may want to see a draft version of your Home page first.

  1. Click Save Draft and review what you’ve designed.

    Save as draft
  2. If everything is OK, click Publish to make it visible to other users.

    Publish

Here is your completed Home page:

Final home page

Later, we’ll add apps to the Home page.

If you want to edit the Home page later, you’ll notice that next time you open your work zone, a small wand appears on the right side. Click the wand to expand the page settings. Then click the edit (pencil) icon to open the Page Designer and make your changes to your Home page.
Expand settings

What kind of content can you add to your Home page?
×

Next Steps

Back to top