Skip to Content

Add a Workspace to SAP Build Work Zone, advanced edition

Create a workspace and add content to it that you can share with other members of your workspace.
You will learn
  • How to create a new workspace
  • How to add content to it and design the layout
LindsayBertLindsay BertFebruary 5, 2023
Created by
LindsayBert
October 19, 2021
Contributors
thecodester
LindsayBert
MichaelCzcz

Prerequisites

You have an environment set up and you can access your SAP Build Work Zone, advanced edition.
 

SAP Build Work Zone, advanced edition is not available in a trial account.

In this tutorial, you’re going to create a workspace where employees who joined the company hackathon challenge, can interact with other members of the workspace, ask questions, and find out all that they need to know.

  • Step 1

    Before you start, download these image files so that they’re on your computer ready for you to add to your workpage for the workspace that you will create.

  • Step 2

    Workspaces are the building blocks of SAP Build Work Zone, advanced edition. You can add all kinds of content to it and you can invite other users to join as members.

    1. In your site, click Workspaces in the top-level menu, and then click New Workspace.

      Create workspace
    2. Select No Template from the dropdown list of available templates.

      Select template

      You can also select one of SAP’s out-of-the-box templates. In this case, you’ll get a professionally designed workpage with widgets including everything you need to get started quickly. You can then customize the content to suit your needs. For this tutorial you won’t use a template.

    3. Enter this name for your workspace: Employee Innovation Hackathon. In workshops, use: <your unique identifier>_Employee Innovation Hackathon.

      Tip: Always use a name that would help users distinguish your workspace from others.

    4. Copy and paste this description for your workspace: Get together and find the answers to your questions about the hackathon!

    5. Select Private.

      Selecting private makes your workspace available to a specific set of members that you’ve invited to the workspace. If you later want to make it public so that everyone in the company can see it, click Edit Workspace Settings at the top of your screen and change the setting to Public.

    6. Click Create.

      New workspace settings

    Your workspace is created.

  • Step 3

    When you create your workspace, you may be prompted to define the frequency of email notifications.

    1. Select Daily to get any updates to the workspace every day.

    2. Click Accept to ensure that you’ve joined the workspace.

    Define workspace settings

    You can now start building your workspace.

    Start building a workspace

    Now, let’s add content to the workspace.

  • Step 4

    When you create a new workspace, the header has a dark and light blue background. You can replace this background with your own.

    1. Hover over the background in the workspace header to expose the Edit cover photo button and select Upload Photo.

      New cover photo
    2. Browse for the following image that you downloaded: workspace_header-image.

    3. Reposition your photo to display it as you want, and then click Save.

      Save cover image
  • Step 5

    In this step, you’ll add a workpage to your workspace - this workpage will describe the purpose of the workspace and will feature relevant content.

    1. Click + to add a page tab.

      Add page tab
    2. From the Add New Page screen, select the Workpage tile.

      Add overview page
    3. Select the blank layout at the bottom right of the screen and click OK. The Page Designer is now active.

      Select layout
    4. Enter a title for the workpage: About the Hackathon.

      Title of overview page
  • Step 6

    In this step, you’ll add two text widgets next to each other in the first section of the workpage.

    1. Click Add Widget in the first section to open the widget gallery.

      Add widget
    2. Select the Text widget.

      Add text widget
    3. Design the Text widget as follows:

      Text Type in the following: Approach our experts with all your questions.
      Font Select the text and change to Arial 14pt.
      Color With the text already selected, choose black from the chart.
      Design text widget
    4. On the right side of the widget that you’ve just added, click the + to add another column.

      Add second widget
    5. Click Add Widget in the second column and select the Text widget.

    6. Design the Text widget as follows:

      Text Type in the following: More Information
      Font Select the text and change to Arial 14pt.
      Color With the text already selected, choose black from the chart.
  • Step 7

    In this step, you’ll add images to the second section.

    1. Click the + under the first section to add a new section.

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

      Add widget to row 2
    3. Select the Image widget.

      Add image widget
    4. Click the link in the widget to browse for the image that you saved on your computer: workspace_row2_image 1

      Empty image widget
    5. Click the cog icon in the top right of the image to edit the image widget.

      Open image settings
    6. Design the Image widget as follows:

      Caption Carla Grant, IT Expert
      Caption Layout Inline
      Caption Alignment Left
    7. Click Save.

      Define widget settings
    8. On the right side of this widget, click the + to add a new column.

      Add column
    9. Click Add Widget in the new column, select the Image widget, and then click the link in the widget to add this image that you saved on your computer: workspace_row2_image2.

    10. On the top right of the widget that you’ve just added, click the cog icon to edit your image widget.

      Open settings for second image widget
    11. Design the second Image widget as follows and then click Save.

      Caption Michael Hill, ML Expert
      Caption Layout Inline
      Caption Alignment Left
    12. Click + next to the second image widget to open a third column.

      Add another column
    13. Add the following 4 image widgets one under each other in the third column. Keep clicking Add Widget and select an image each time until you’ve added all these images:

      First image workspace_image_with_icon1
      Second image workspace_image_with_icon2
      Third image workspace_image_with_icon3
      Fourth image workspace_image_with_icon4
      Add widget 4 times
    14. Click the cog icon at the top right of the first image widget and design as follows. When you’re done, click Save.

      Caption Real Customer Challenges
      Caption Layout Overlay
      Background Opacity 0%
      Caption Alignment Left
    15. In the same way, design the other 3 images as follows. When you’re done click Save each time:

      Caption Second image: Product Documentation
      Third image: Submission Criteria
      Fourth image: Stay Involved
      Link To Add this link to the second image widget that you named Product Documentation: https://help.sap.com/viewer/product/WZ/Cloud/en-US
      Once you’ve published your site you can click on this image to open the SAP Work Zone documentation product page.
      Caption Layout All images: Overlay
      Background Opacity All images: 0%
      Caption Alignment All images: Left
    16. Use the dividers between the 3 columns to align all the images. Also make sure to adjust the text headings above the images.

      First preview
    17. To increase the spacing between this section and the first section, hover over the section to expose the settings on the right, and click the cog icon to edit the spacing.

      Edit section settings
    18. Under Padding Top, add the value 30 pixels and click Save.

      Edit row pixels
  • Step 8

    In this step, you’ll add an Action widget, a Forum widget, and a Feed widget.

    1. Click + at the bottom of the second section to add another section.

      Add the third row
    2. Click Add Widget.

    3. Select the Action widget.

      Adding an Action widget enables workspace members to choose from a selection of commonly used action types. In this tutorial, we want the workspace members to ask questions or add ideas.

      Add an action widget
    4. Enter the Widget Title: Add your Hackathon Questions & Ideas.

    5. Uncheck all options except for Ask a Question and Add an Idea. Click Save to add the widget to your workpage.

      Design actions widget

      Now let’s create the Forum widget.

    6. Click the + next to the widget you just created to add another column.

      Add another column
    7. Click Add Widget.

      Add a widget to 2nd column
    8. Select the Forum widget.

      Adding a Forum widget enables a workspace member to view questions, ideas, and discussions submitted by their workspace members.

      Add a forum widget
    9. Under Maximum Items to Display, move the slider to number 2, change the title to Ask Questions About the Hackathon, and click Save.

      On the workpage, only 2 of the questions, ideas or discussions from the forum will be displayed.

      Design the forum widget

      Now let’s add the Feed widget.

    10. Add another section.

      Add another section
    11. Click Add Widget

      Add another section
    12. Select the Feed widget and keep the default setting to show all events in the feed. Click Save.

      You’ve now added all three widgets.

    13. To increase the spacing between this section and the section above, hover over the section to expose the settings on the right, and click the cog icon to edit the spacing.

      Edit row settings
    14. Under Padding Top, add the value 30pixels and click Save.

    15. Now Publish the workpage to make it visible to members of the workspace. Without doing this, the workpage is only visible to you.

      Publish
    16. In the popup, leave the Show in Feed Updates selected and click Publish.

      Publish again

      By leaving the Show in Feed Updates checked, all workspace members will be informed of your changes. In the future, if the changes you make to your workspace aren’t significant, you can uncheck this option.

  • Step 9

    Apart from the Forum widget, you’re going to add a dedicated Forum page tab. From this page, workspace members can see all the questions, ideas and discussions in the forums that have been created for the workspace.

    1. Click the + icon.

      Add new page tab
    2. In the Add New Page screen, under the Content category, select Forums to add the Forums page tab to your workspace. The forum page tab opens a screen displaying all the different forum topics.

      In the next steps, we ask a question in the forum.

    3. Go back to your workpage by clicking the About the Hackathon workpage.

      Go back to overview page
    4. Scroll down to your Actions widget that you added previously and click Ask a question.

      Add new question
    5. Add this question: What time does the hackathon start? Then click Publish so that members will be able to see your question. You’ll get a confirmation message that your question was created.

      Add first questions
    6. Go back to your workspace by using the breadcrumbs at the top.

      Go back to Forums page

    You can see that your question has been added to your workpage as well as to your feed.

    View question
  • Step 10

    This is how your workspace looks:

    Final workspace

    Closing

    What is the difference between a private and a public workspace?

Back to top