openSAP

Building Portal Sites on SAP Cloud Platform

Week 3 Unit 1

00:00:11 Hi, my name is Ido Shemesh and I am part of the SAP Cloud Platform Portal’s product
management team. Welcome to Week 3 of the openSAP course "Building Portal Sites on
SAP Cloud Platform".
00:00:23 In the first week of this course we introduced the portal, which is delivered as a service on
the SAP Cloud Platform and provides organizations with a flexible offering to build business
sites
00:00:33 and engage with employees, customers, and partners. We mentioned that the portal offers
two main user experience options that fit different business needs.
00:00:42 The first being the Fiori launchpad portal sites which we covered in depth during the second
week of this course. This week we want to focus on the second user experience option –
freestyle portal sites.
00:00:55 Freestyle sites provide portal users with the flexibility of combining business applications
with Web content in a real Web site experience. While Fiori launchpad sites offer a pretty
structured tile-based, dashboard-like application launcher experience,
00:01:11 the freestyle option is just that – free, open to your design, creativity, and mistakes. Before
we dive into the details of building and managing freestyle sites, let’s start with some useful
tips and pointers on designing them.
00:01:28 Okay, so you’re ready to start designing the screens of your freestyle portal site. This
means that by now you should have a pretty good understanding of what you're trying to do.

00:01:38 To check yourself, try to answer the following questions: First of all, what is the overall
business goal of your portal site? What are you trying to achieve?
00:01:48 Second, who will be using your site and what will they be trying to achieve? Are they
professional enough to complete the tasks ahead or will they need assistance?
00:01:58 Have they been performing these tasks before elsewhere? If so, they might have
expectations that you need to be aware of. Third, what is the storyboard? What is the
sequence of screens the users will encounter upon executing their tasks?
00:02:15 What were they doing before entering the site to prepare for these tasks? And what will they
be doing after completing them? And fourth, what is the goal of each screen in the
storyboard screen sequence?
00:02:27 Every screen has a purpose, something to do, something to read, and so on. Within the
context of each screen, you need to ask yourself:
00:02:35 What are the actions and information needed to complete the task for this screen without
help? What are the questions the users might ask themselves here?
00:02:44 Do they have all the answers to the questions available or accessible on the current
screen? Do they have everything they need to move on to the next screen?
00:02:53 If you have the answers to these questions in place, you’d want to consider the following six
tips when moving on to the design phase. The first one is consistency – be consistent.
00:03:07 Nothing says "amateur hour" more than an inconsistent site. An inconsistent site will
discourage the user's trust and might prevent them from attempting to use it.
00:03:17 Inconsistencies create confusion and the user might lose orientation within the site. And
inconsistent sites make it difficult to learn and remember.
00:03:29 Humans tend to remember recurring patterns, positioning, and shapes. Therefore, your
users will expect every site page to offer a similar user experience as the previous page.
00:03:41 So how do we achieve consistency? Here are three pointers:
00:03:45 The first one is position – the layout templates you use in your site are the site’s basic
structure. Keep the number of different layouts to a bare minimum.
00:03:55 It’s okay to have a different layout for your home page, but beyond that, try to have a basic
structure and grid for the entire site. You can play around within the content area as
needed, but keep the recurring elements of your site in the same place –
00:04:09 the menu, the logo, the page titles, and the footer links should all be in a fixed position.
Second, when it comes to forms, make sure that all your buttons look and act like buttons,
meaning they trigger an action.
00:04:23 Make sure that all your links look and act like links, meaning they navigate the user to
another place. Be, you know, consistent.
00:04:32 And third, your titles and labels should be meaningful, clear, and self-explanatory, otherwise
your users might get lost in their efforts to follow your intentions.
00:04:43 Okay, let's move on to the second tip – navigation. There are four basic navigation
paradigms for sites,
00:04:51 and most sites actually use more than one, depending on the site users and the tasks that
they need to perform. The navigation paradigms are:
00:04:59 A hierarchical navigation – for example a one or multi-tier menu. The second one is
contextual navigation – for example navigating from an inline link to another topic in
Wikipedia.
00:05:13 The third one is the search-induced navigation. And the fourth is a process-driven
navigation, like a wizard.
00:05:21 Now selecting the right navigation mechanisms depends on your site’s content and your
user’s needs. Here are some pointers:
00:05:30 If you don’t have a lot of content, a simple navigation menu will suffice. If you do have a lot
of content but the users know exactly what they are looking for, then a search will work fine,

00:05:40 and will save the user a lot of clicking and navigation. If you do end up adding search
capabilities, consider the results page.
00:05:51 If your users will get many results, you may need to support them with some kind of faucet
filter mechanism to refine the search. If you offer some kind of process in which the user
needs to advance step by step, in this case a wizard will go a long way.
00:06:08 Consider supporting contextual navigation when it makes sense to offer the user related
suggestions, topics, information, and more. Okay, let's move on and talk about layouts.
00:06:22 Earlier we talked about consistency, and recommended you try and use one major fixed
structure for all your site pages. Try to list the major recurring areas you may need in all
your site pages,
00:06:34 for example a header, the logo, the menu, a footer, a search bar, a news feed, and so on.
For the page’s content area try doing the same – try to define the areas you may need and
the hierarchy between them.
00:06:49 Now, let's talk about real estate, or what we call the available screen size. There is a major
difference in available real estate between desktop and mobile, and between regular
screens and touch screens.
00:07:05 If we focus on desktop, most of the screens today are wide, so we have more width to work
with than height – though it's important to note that you shouldn’t use the whole width for
text because long lines are difficult to read.
00:07:19 So for instance, placing a menu on the left side will be a better usage of our real estate than
if we place it at the top of the screen. Another important aspect of real estate is Fitts's Law,
which predicts the amount of time taken to move to and select a target.
00:07:41 When talking about user experience design, the conclusion is that: Objects that are used in
the same sequence chain should be placed as close as possible to each other.
00:07:51 Interactive elements on the screen – like buttons – should be designed as large as
reasonable considering the size of the screen. And finally, don’t try to be original.
00:08:04 Look at some similar solutions and copy what’s right for your site. Okay, let's move on.

2
00:08:15 Our fourth tip is about design patterns. Now you need to start designing the details of your
screen.
00:08:23 For example, you want to design the menu. There are many types of menus, so how do you
pick the right one?
00:08:29 For instance, if you have five to seven menu entries, then a horizontal menu can work just
fine. However, if you have more entries, you would probably like to avoid horizontal scrolling
and will be better off with a vertical menu.
00:08:42 If you have a great number of menu entries and establish a hierarchal menu with several
levels of navigation, you might want the user to be aware of the navigation context and
should consider using a fly-out menu
00:08:54 in which all menu levels are displayed until a selection is made. Of course, when it comes to
design, there are endless considerations and options to choose from.
00:09:07 And the best course of action is, again, don't try to be original – look at common design
patterns. There are many design pattern galleries available online that you can use as a
reference.
00:09:18 The important thing is to understand your challenge. Applying this on our menu challenge –
open a design pattern gallery, like the one linked here below,
00:09:27 and you can download the PowerPoint later to access the link. Go to the navigation section,
read about the different types of menus and their optimal use cases.
00:09:37 And now you can make an educated decision. Okay, let's move on to the fifth tip – design
validation.
00:09:46 Before writing a single line of code, it’s important to validate our solution. It's always easier
and cheaper to perform changes in the design stage.
00:09:53 It's much more complicated and expensive when you’ve already started your
implementation. Start with defining a list of tasks – these are the common end-user
scenarios you'd like to validate in your design.
00:10:08 Create the design prototypes of your site screens that support these tasks. There are
various tools you can use to design these prototypes,
00:10:17 like Balsamiq, or SAP Cloud Platform which offers Build as a prototyping tool. Now you
need to gather test users who will perform the tasks.
00:10:27 For the most accurate results, your test users should be as close as possible to the actual
target audience. A group of around five users should provide sufficient data for our
feedback.
00:10:40 For the user validation test itself, make it clear to the users that they are not the ones being
tested, but rather the design.
00:10:47 Ask the users to think out loud or record their feedback so you can understand their way of
thought when challenged to complete a task. Ask the users leading questions like: "What
confuses you?", "What did you expect to happen?",
00:11:02 "What are you looking for: a button, a link?" – questions like that. Now after collecting all the
insights you can refine your design.
00:11:09 Our next step is the branding of the screens, which leads us to the final tip. Assuming you're
not a visual designer, here are some basic tips to make sure your site looks wholesome.

00:11:22 The first tip is the colors rule of thumb. Brand your site with no more than three to four
colors, otherwise your site might end up looking like a mess.
00:11:32 Choose a palette combination of colors that work well together. There are several sites
online like Paletton, which is linked here.
00:11:41 And again you can access the links if you download the PowerPoint. So these sites can
help you find the right combination.
00:11:50 A good palette will define the mood of the site and consist of some contrasting colors that
would make it easy for users to differentiate between the foreground and the background.
00:11:59 The second tip is about the font size. Remember that texts have their own hierarchy

3
00:12:04 and you want to make sure your users will differentiate between titles, subtitles, paragraph
text, and links. Also here, four to five different font sizes are more than enough.
00:12:15 And third – font types. There are two major font families:
00:12:19 The serifs, like the Times New Roman font, have small decorative flourishes on the ends of
some of the strokes that make up letters and symbols.
00:12:29 They work great for large texts like titles but are very difficult for reading when they are
small and are viewed through a digital medium. The second font family is sans serif, like the
Arial font.
00:12:43 They do not have these details or flourishes and therefore work great as both titles and text
blocks. Okay, so you are now ready to go and design your site screens.
00:12:55 Don’t forget to apply the six tips we covered in this unit: Be consistent in your designs.
00:13:01 Select the right forms of navigation. Select a consistent layout for your screen.
00:13:06 Always leverage existing design patterns and don’t try to reinvent the wheel. Perform design
validation tests with the right target audience.
00:13:15 And when it comes to branding – choose a palette, keep text hierarchy in mind. And don’t
forget – serif fonts are for titles and sans serifs are for text blocks.
00:13:25 Okay, that’s it for this unit. See you in the next unit when we talk about the different building
blocks of a freestyle portal site.
00:13:32 Goodbye.

4
Week 3 Unit 2

00:00:11 Hi, welcome to Unit 2 of Week 3. In this week we’re focusing on building freestyle portal
sites.
00:00:18 In the previous unit we listed some tips that you should consider while designing your
freestyle experience. And now we want to introduce the different building blocks that make a
freestyle portal site.
00:00:32 Portal admins can choose between two main user experience options when creating their
business sites: Fiori launchpad and freestyle sites.
00:00:41 Both options offer end users a responsive, role- based central access point to business
transactions and data. Fiori launchpad sites offer a consistent user experience – the tile-
based application launcher dashboard page –
00:00:56 suitable for employee-centric scenarios. In comparison, the freestyle sites option enables
the creation of actual Web site user experience
00:01:06 and provides greater flexibility in building business sites, suitable mostly for engagements
with customers and partners. With freestyle sites, portal admins enjoy extensive capabilities
through the portal admin tools and can:
00:01:21 add multiple pages to their site; design layouts and repeatable UI elements like header,
footer, company logo, and others;
00:01:30 they can set business applications together with Web content in site pages; expose site
pages as publicly accessible on the
00:01:40 they can even combine a Fiori launchpad page together with freestyle pages in their site,
and more. We can see the differences between these two portal user experience options
00:01:50 if we compare the Fiori launchpad site that you created in last week’s exercise to the
freestyle site that you will be building in this week’s exercise.
00:02:01 So this is the Fiori launchpad site that you built in last week's exercise. It basically has tiles
that launch the applications that you developed.
00:02:12 And if you compare it to the freestyle site – this is the freestyle site – you can see that this
has an actual Web site look and feel.
00:02:21 So it has a public landing page, which is accessible publicly on the Web. It consists of
multiple pages.
00:02:30 So it also has a navigation menu here at the top. And it has a consistent look and feel.
00:02:36 So it has a header with the company logo and a footer with relevant links that are consistent
throughout the pages. And the important thing is that it combines your business applications
together with Web content and data.
00:02:58 Okay. Now let's move on to introduce the various building blocks that make up a freestyle
portal site.
00:03:09 The main building block when creating a portal site is the site template. Portal sites are
based on a site template, so when portal admins create new sites in the portal Admin
Space,
00:03:19 they start by selecting one of the available site templates. A site template is a blueprint of a
solution which contains a set of predefined page templates, layouts, branding, applications,
and content.
00:03:32 The portal is delivered with a set of site templates out of the box, which offer a great deal of
flexibility and enable portal admins to easily create sites in the portal Admin Space.
00:03:43 However, if you would like to introduce a different design or custom capabilities that are not
available with the existing site templates, new ones can be made available in three ways.

00:03:55 The first one – you can have your developers develop new custom site templates using the
portal tools in the SAP Web IDE. The second one – leverage one of the site templates and
accelerator solutions available as open source.
00:04:09 We will elaborate on these two options in the upcoming units. On top of that, additional
templates can be made available by subscribing to the SAP Cloud Platform accounts

5
00:04:20 of partners or third parties who offer custom site templates. From the site template we move
on to the site instance.
00:04:30 A portal site instance – or a site – is created by portal admins in the Site Directory based on
a selected site template. The site is created as a copy of the site template which it is based
on,
00:04:43 and inherits its branding, page templates, layouts, default content, and more. Once created,
the site instance is opened in a visual editor called the Site Designer,
00:04:56 which allows portal admins to easily add content, configure, and design the site instance. If
we go back to our freestyle site that we will be developing in this week's exercise...
00:05:09 So we saw the runtime of this site, but let's see how an admin would create it. So we go into
the portal Admin Space and we go into the Site Directory.
00:05:19 Now this is where an admin would create a new site. And when you create a new site, you
need to base it on one of the available templates.
00:05:31 So as we said, SAP provides a set of templates out of the box. So we can see the "Starter
Site", the "Basic Layout Set", the "SAP Fiori Launchpad" site template.
00:05:40 Some other templates that are available from And the templates that were custom
developed on our account, like the openSAP template that you will be developing this week.

00:05:52 Now once you create the site instance from the site template, you can access it here from
the Site Directory. And when you click on "Edit", the site instance will be opened in the Site
Designer.
00:06:11 And here it is, the Site Designer in the design- time environment. Okay, let's continue.
00:06:21 When a portal admin creates a new site, it is created with the set of page templates defined
in the site’s original site template. A page template defines the layout of a page and is
divided into content sections.
00:06:34 Portal admins can add applications and content into those sections. This is useful when a
specific layout or content is repeated on several pages of the site, having for instance a
common header and footer.
00:06:47 The portal admin can design and edit the content of a page template in the Site Designer
and then create pages based on these templates.
00:06:56 SAP Cloud Platform Portal is provided with a set of page templates with various layouts, like
a full-page layout, header and footer, tall header, and others.
00:07:06 These layouts are pretty flexible but if you require a specific layout or design that is not
available, you can have your developers develop additional page templates with the portal
tools in SAP's Web IDE.
00:07:21 Now after designing the page templates, the next building block is the page instance. Portal
admins use the Site Designer to create multiple pages in their freestyle portal sites.
00:07:32 Pages are created as a copy of one of the available page templates, inheriting its template's
layout, sections, and predefined content.
00:07:43 Once admins create a page instance, they can continue to: add additional content and apps
to the page;
00:07:50 they can configure the page’s appearance; they can add the page to the site’s menu
hierarchy or just leave it hidden from end users;
00:07:58 and they can configure access permissions, defining the page as publicly accessible or
restricted – which requires a login and a specific business role in order to access the page.

00:08:09 So if we go back to the Site Designer of our freestyle site, you can see that on the left-side
panel we can access the "Page Templates" editing environment.
00:08:21 And we can see the list of all the page templates that are available within the site and that
were basically inherited from the site template that we created our site from.
00:08:32 So as you can see, we customized the "Header and Footer" page template, and we added...
which is divided into three sections...

6
00:08:41 it has a header, a footer, and content in the middle. So we added the repeatable elements
to the header, which consist of a login widget and the company's logo,
00:08:54 and in the footer section we added social links and additional links. And we want these to be
repeated throughout the site's pages.
00:09:04 Now if we move on to the "Pages and Apps" editing environment... we can see all the
available page instances that have been created within this site.
00:09:16 And we've created all these page instances based on the page template that we edited. So
if we click on "New Page", we can select the "Header and Footer" page template.
00:09:32 We can define that the page is either publicly accessible or it requires login and can be
viewed only on role-based access. Once we've finished, basically the page template is
duplicated into the page instance.
00:09:52 Now an admin can go on and add content into the content section. Okay.
00:10:06 So after creating a site and adding the pages, it's time to add the actual content to the
pages. The basic unit of content in a freestyle site is called a widget.
00:10:18 Widgets are lightweight applications consisting mostly of client-side coding – SAPUI5,
JavaScript, HTML, and other JavaScript-based libraries.
00:10:28 The portal is delivered with a set of widgets for displaying Web content and media files in
your site, like images, videos, HTML snippets, and others.
00:10:38 In addition, any custom lightweight application developed by your developers or made
available through partners can be added as a widget. Portal admins can add multiple
widgets from the content catalog into the sections available in their pages and page
templates.
00:10:58 Another unit of content is the shell plug-ins. These are applications that are initialized while
the site is loading.
00:11:05 They are similar to the shell plug-ins available for Fiori launchpad sites as introduced in last
week’s units. Plug-ins allow portal admins to add UI elements and capabilities to the site
shell.
00:11:17 Some examples of what you can do with shell plug-ins: for instance, add a navigation
element, add a popup welcome page, create a user feedback dialog, and more.
00:11:29 So if we go back to our freestyle site and we go, for instance, to the "ITProducts" page that
we will create, we can see that the page is divided into three sections:
00:11:45 the header section, the content section, and the footer section. And the content section is
the one that varies between the various page instances.
00:11:54 And here we've added two out-of-the-box widgets. One's for displaying images in an image
carousel and one's for displaying videos.
00:12:06 And underneath them we've added the business application that you developed in the first
week. So in this way we're creating Web pages that combine business applications together
with Web content.
00:12:27 Okay, so what have we learned in this unit? We've mentioned the main differences between
the two user experiences offered by the SAP Cloud Platform Portal.
00:12:36 We listed the main building blocks of a freestyle portal site, which include: the site template,
the site instance derived from that template,
00:12:44 the page templates that define the layout and content of repeatable elements, the page
instances which are created as copies of those page templates,
00:12:53 and finally the basic unit of actual content in a site – the widget applications and the shell
plug-ins. Okay, join us for our next unit where we will introduce the concept of portal
accelerators and templates.
00:13:07 Thank you, goodbye.

7
Week 3 Unit 3

00:00:11 Hi, welcome to Unit 3 of Week 3. In the previous unit we introduced the building blocks of a
freestyle portal site.
00:00:20 We outlined the flow where portal admins use the portal admin tools to create new sites
from site templates, create pages, design layouts, and add content widgets.
00:00:31 The portal is delivered with a predefined set of content which enables admins to easily start
building sites and add content to them. The default offering includes:
00:00:41 A set of site templates – those contain flexible layouts and content for common scenarios.
Portal admins can leverage them to quickly create new sites using portal admin tools.
00:00:53 The default offering also includes a set of widgets – provided out of the box with portal.
Admins can add these widgets to their site pages to add collaboration capabilities through
integration with Jam,
00:01:05 and to display Web content and media files like images, videos, and other things. In
addition, the default offering includes default navigation menus for desktop and mobile that
admins can add to their sites,
00:01:20 allowing end users to navigate between the site pages. In addition to the portal’s default
offering, additional content, capabilities, and comprehensive portal solutions
00:01:31 are made available through a concept that we call "templates and accelerators". So what
are templates and accelerators?
00:01:39 Templates and accelerators are a set of open- source portal solutions, widgets, and plug-ins
delivered on SAP’s GitHub version control repository.
00:01:49 They are intended to accelerate your portal implementation by providing additional ready-
made site and page templates, applications, widgets, and shell plug-ins.
00:02:00 Portal admins can leverage these accelerators by incorporating them directly into their
portal sites. And portal developers can use these open- source accelerators as a starting
point to extend and customize
00:02:13 or simply use them as a reference, or a code sample, for their custom development. So
what's included with the accelerators?
00:02:22 The widget accelerators include several applications that portal admins can add to their site
pages as-is and developers can use as a starting point for custom development and
extension.
00:02:37 They include a side navigation menu widget, a breadcrumbs widget, and a login widget,
allowing end users to log in and log out from your portal sites.
00:02:47 In addition, a sample Rich Text Editor extension widget is provided as part of the
accelerator widgets. The portal is shipped with an out-of-the-box Rich Text Editor widget.
00:02:58 It's an editor for adding and formatting text, tables, and combining resources like images,
videos, and more. The editor is based on an open-source component called TinyMCE and
can be extended and customized extensively.
00:03:14 This means that portal developers can use the Rich Text Editor extension widget to add
additional capabilities, menus, HTML templates, and repeatable elements to be used by the
portal admins.
00:03:28 In addition to widgets, you can also find site and shell plug-in accelerators. Site accelerators
are sample site templates featuring major portal capabilities with custom pages, page
templates, and content.
00:03:42 These currently include two templates: a parallax site and a marketing site, which I will
shortly demo.
00:03:49 The available shell plug-in accelerators are similar in their functionality to the widget
accelerators, and include: a horizontal and vertical navigation menu
00:03:59 and a logon plug-in which is added to the Fiori shell header. Finally, as part of the templates
and accelerators,

8
00:04:08 the portal delivers comprehensive site solutions for specific common business scenarios.
These open-source solutions consist of the site template, the underlying business
applications, detailed configuration guidelines, and more.
00:04:23 This way, partners and customers can easily use these solutions as-is on their landscapes
or have their developers use them as a starting point to customize and extend
00:04:33 according to their needs, branding, and specific business requirements. Currently the portal
offers three such site accelerator solutions.
00:04:43 The first one is the self-service support site, which is a comprehensive solution for
organizations to engage with their customers, partners, or employees.
00:04:54 It allows them to create service request tickets and track them online, in addition to
collaborating with service agents to quickly resolve their issues.
00:05:03 The solution integrates with SAP Hybris Cloud for Customer for customer relation
management capabilities, with SAP Jam for collaboration, and uses the SAP Identity
Service for authentication and
00:05:17 The second site accelerator is the partner portal, which is a comprehensive solution through
which organizations can offer their partners a central, Web-based access point
00:05:27 to self-services for jointly managing sales activities. This accelerator includes capabilities
like:
00:05:36 self-registering as a new partner, inviting new partner employees to your partner portal,
00:05:42 adding and managing leads and opportunities, and registering new deals, and other
capabilities.
00:05:49 The solution integrates with SAP Hybris Cloud for Sales and SAP Identity Service, again for
authentication, SSO, and for supporting the self-registration and the invitation flows.
00:06:03 The third solution is a custom developers portal. This solution integrates with SAP Cloud
Platform’s API Management service
00:06:12 and enables organizations to create custom- branded developer portals for their developers
to get information about all the available APIs, products, and subscriptions.
00:06:25 Okay, so now that we understand what accelerators are, let’s see how to work with them.
Accelerators are available on SAP’s GitHub repository.
00:06:35 The first step would be to clone the repository locally with a GitHub client or simply
download it as a ZIP file. Developers can then import the accelerator ZIP files as application
projects into the Web IDE available on their SAP Cloud Platform accounts.
00:06:53 They can either customize the code to adapt it to their needs or use it as it is. And after
deploying the accelerator app to their SAP Cloud Platform account, it will be available for
portal admins to use in their portal sites.
00:07:07 Alternatively, portal admins can import the accelerator directly into their SAP Cloud Platform
account, without going through the development environment, and make the accelerator
available for use in their portal Admin Space.
00:07:22 Okay, so what I want to demo now is actually how I would use an accelerator as an admin
and then as a developer. So let me just refresh...
00:07:35 So first of all, SAP's GitHub is accessible through the link "sap.github.io". And you can find
the portal accelerators and templates if you filter looking for "portal".
00:07:56 So you have the reference to the partner portal, to the service portal, and to the samples
repository, which you can open from here. Alternatively, you can also access these links
through the portal Admin Space.
00:08:12 So the home page of the Admin Space contains links for the accelerators, which you can
launch from here. Okay, now as an admin, I want to experience some of the site templates
that are available here.
00:08:26 So I can either clone this repository... but I'm not a developer... So I can either download
this, the whole repository, onto my desktop as a ZIP file,
00:08:39 or I can access the "releases" tab here and simply download the ZIP file for the marketing
site template that I want to use. So let's download this.

9
00:08:53 Now once this is downloaded, I can import it directly into my SAP Cloud Platform cockpit,
directly into the HTML5 application repository.
00:09:04 I'll import the ZIP file that we just downloaded... there it is...
00:09:17 and create a versioning... Great – now once this is imported, we need to activate the latest
version.
00:09:27 So let's go inside into the application's dashboard... go to "Versioning"...
00:09:36 and under "Versions" we need to activate the latest version, which is the only version
available. Great – now once this is activated, we can actually already start using it from the
portal.
00:09:51 So if we access the portal from the cloud platform's "Services" page... And we filter the
service by "User Experience", we can launch the portal from here...
00:10:34 Great, okay. So now that we click on "Go to Service"... so the admin environment of the
portal service is open...
00:10:43 And as we saw earlier, we can start by going to the Site Directory and creating a new site
instance. So now you'll notice that we have a new entry here.
00:10:53 And this is the marketing site template that we just imported from the GitHub repository, And
it's under "My Account".
00:11:00 So this is locally on my SAP Cloud Platform account. I can start by giving this a name – "my
marketing site", for instance.
00:11:13 And once I click on "Create", the marketing site instance, which is a copy of the site
template, will be opened in the Site Designer. So I can start editing it and customizing it if I
need to.
00:11:28 Okay, so this is the admin flow. Let's see what the developer flow would look like.
00:11:34 So going back to the Git repository, I know that under "widgets" there's a logon widget that I
want to use – the "sciloginwidget". So again, as a developer I can either clone the whole
repository... or download it.
00:12:04 Sorry – I will clone it with a local Git client that I have installed on my desktop or I can simply
download it. But here I've cloned it.
00:12:15 And if we go to the file system where the files are stored, I can access the "sciloginwidget".

00:12:26 And I will need to zip this into one file. Great – and now I can go ahead and import this
directly into my SAP Web IDE,
00:12:39 into the development environment. So let's go to the Web IDE...
00:12:45 And by right-clicking on the "Workspace" folder, we can import a file from the file system. So
let's go to the location where we created the ZIP file and import the ZIP file.
00:12:59 Great. Now the ZIP file is imported and we have access to the code.
00:13:04 So we can choose to customize the code or we can choose to leave it as it is. And if we do
that, then we just need to deploy it.
00:13:12 And once it's deployed to the Cloud Platform account, it will already be available for portal
admins to use it in their portal sites. Great – so this was successfully deployed.
00:13:25 And now if we refresh the Site Designer on the marketing site instance that we just created,
then as a portal admin I can simply use this new accelerator widget in my portal solution.

00:13:40 And we have it here. Within the content catalog, I can add a "Login Widget" into my site.
00:13:48 Okay, so we saw two flows – one is an admin without going through the development
environment,
00:13:53 and the other one is a developer, where I have access to the code or I can use it as-is,
customized, or just look at it as a reference for future use.
00:14:04 Okay. So let's recap on what we've covered in this unit.
00:14:10 Accelerators are open-source code samples intended to accelerate your portal
implementation by providing a starting point and a reference for development of portal sites.

10
00:14:21 Portal provides accelerators for site templates, widgets, shell plugins, and comprehensive
site solutions. Developers can import accelerators from the portal’s GitHub repository into
their SAP Web
00:14:34 They can then customize them and make them available for portal admins to use in their
sites. Portal admins can deploy the accelerators directly to their SAP Cloud Platform
accounts and use them to accelerate their portal building.
00:14:49 In addition, if you want to go through the GitHub repository, go through the various blogs
that are available on this subject, you can download the slides from the openSAP site and
access the links that are available here.
00:15:07 Okay, that's it for this unit. Join us for our next unit where we will introduce the process of
developing a new site template.
00:15:15 Thank you, bye.

11
Week 3 Unit 4

00:00:11 Hi, welcome to Unit 4 of Week 3. In the previous units this week, we mentioned that portal
admins can start creating freestyle sites
00:00:20 and add content using the portal admin tools. This is possible thanks to the content
delivered with portal that includes site templates, widgets, and more.
00:00:30 The provided site templates offer a lot of flexibility for admins when creating and designing
their sites. However, in some cases you might want to have your developers create your
own custom site templates
00:00:42 and this is exactly what we want to talk about in this unit. Portal developers can develop
new site templates in the SAP Web IDE,
00:00:52 which is SAP’s official development environment for SAPUI5 and client-side coding. When
development is completed, the site template is deployed from the Web IDE to the SAP
Cloud Platform account
00:01:05 and becomes available for portal admins to create site instances from. SAP Web IDE offers
a portal plug-in for developing freestyle site components in a structured manner.
00:01:18 The plug-in consists of a set of wizards for creating site templates and other portal
components, and enables developers to execute and run their site templates in preview
mode from within the development environment.
00:01:35 So when should you develop a custom site template? Developing your own site template
gives you a lot of flexibility to introduce custom capabilities and design.
00:01:45 This makes sense when the layouts provided out of the box with the SAP portal are not
sufficient for your design and you want to create new ones,
00:01:54 or when you’d like to set predefined content in your site pages and page templates – for
instance setting repeating content elements like a header, a footer, or a company logo.
00:02:07 In addition, developing your own site template allows you to harness the power of client-side
coding and introduce new capabilities to your sites, like adding animations, transitioning,
and more.
00:02:20 Next, we will describe and demo a typical flow of a portal developer. I want to focus on the
process of developing a site template.
00:02:32 In the next unit – Unit 5 – I will show how a developer enables business applications for
portal. And then in Units 6 and 7 we will see the flow of a portal admin building a site and
bringing all these parts together with the portal admin tools.
00:02:51 Okay, so before we start, we need to enable the portal plug-in for SAP Web IDE – this
enables the various portal features and capabilities within the development environment.
00:03:03 Let's switch to the Web IDE... and go to setting the preferences of my development
environment.
00:03:11 This is under "Tools" and "Preferences". So we open the preferences and we go to
"Plugins".
00:03:18 And this lists all the available plug-ins that we can enable and disable within the
development environment. So from the repository, let's choose the "Portal Service".
00:03:26 And then we have the portal plug-in here – it's already enabled. Once you enable it, you
need to save.
00:03:33 So the Web IDE would refresh and your changes would come into effect. Okay.
00:03:45 Now we can start developing our site template. The first step is to generate a site template
project using the wizard provided by the portal plug-in.
00:03:54 The wizard generates the site template and all its underlying components, packaged
together in one deployable SAPUI5 project. It includes the definitions of page templates,
pages, initial content, permission, menus, your own custom coding, and more.
00:04:12 So let's see how this is done. Okay, so we go back to the Web IDE, into the development
environment.
00:04:21 And I already have some projects here. And we create a new project by selecting the root
folder of the workspace,

12
00:04:29 right-clicking, selecting "New", and "Project from Template". Now I have various project
templates that I can create here.
00:04:38 And one of them is enabled by the SAP Cloud Platform Portal plug-in that we just enabled,
so I select this from the category dropdown list.
00:04:47 Then I select the "Site Template" tile. I click "Next" and I need to give the project a name.
00:04:53 So I select "MySiteTemplates"... click "Next". Now I need to choose one of the available site
templates that I will base my new template on.
00:05:08 So as we discussed earlier in the previous units, we have various site templates available in
our account. Some are made available by SAP, and others are the ones that we've custom-
developed or imported into our environment,
00:05:22 like the marketing site here in the bottom-left corner that we imported from the "templates
and accelerators" GitHub repository yesterday. Well let's choose the "Basic Layout Set" and
click "Next".
00:05:36 And now we need to give this site template a name. Let's call it "My OpenSAP Template"...
and click "Next"...
00:05:52 and then finally "Finish" to finish the wizard. And now that we're exiting the wizard, a new
SAPUI5 project is actually generated
00:06:04 with all the underlying components that make up this site template. Now at this point, we
can already run this site template in preview mode.
00:06:13 So we right-click on the folder that was created. Select "Run", "Run as", and "Preview Site
Template".
00:06:22 Okay, so as you can see, the underlying components contain the definition of the page
templates that are already included within the site.
00:06:31 Each page template is an SAPUI5 component application that contains its own XML-based
view that describes the layout, its controller where you can inject your custom coding,

00:06:44 and other resources that you can add, like style sheets, and so on. Other definitions here
include the menu structure, the available page instances, and more.
00:06:55 So if we go back to the preview, we can see that the site template is already provided with
one page instance that is called "Header Footer",
00:07:04 and is based on the header footer template. And it contains three content section areas –
00:07:11 the upper section, which is a header section, the middle one, which is the body section, and
the lower one is a footer section.
00:07:17 And we can actually start adding content in here. Okay, let's go back to the demo, to the
slides.
00:07:30 So the second step might now be to create new page templates. A page template defines
the layout of the page and optionally can also define its initial content.
00:07:40 This is useful when a specific layout or content is repeated in several pages of the site.
Each page template is an SAPUI5 component app included in the site template project.
00:07:52 The portal plug-in for Web IDE provides a wizard for creating new page templates – and
generates the SAPUI5 component app with an XML view representing the page.
00:08:05 Developers can then continue to design the page’s layout using SAPUI5 grid and layout
controls or design with HTML tags. In addition, developers can add content section controls
to the layout containers.
00:08:21 They can choose to populate the sections with widgets, adding Web content and
applications. In any case, portal admins can later add or modify this content within the portal
admin environment.
00:08:35 In the third step, developers can create specific page instances and include them in the site
template definition. This is useful when you know the intended content of a specific page,

00:08:46 and you want your site template to already include that page when the admin creates a site
based on your template. So let's see how that works.

13
00:08:56 If we go back to the development environment and we select our new custom site template,
we can right-click, select "New", and select to create a new "Page Template".
00:09:07 Now also here we're basing our page template on an existing page template, so it will be
duplicated from it.
00:09:13 So we'll select the Header and Footer page template and click "Next". Now we need to give
it a name, so I'll be very innovative and I'll call it "My Page Template"...
00:09:25 and we'll click "Next"... and "Finish". And now this page template component app will be
generated here, in the "pageTemplates" folder,
00:09:34 creating the XML view definition of the page, with a controller, a component, a configuration
file, and other resources.
00:09:43 Now we can go ahead and create a site instance based on this template. So let's do that
again – selecting the root folder of the project, clicking "New" and "Pages".
00:09:57 And now we need to select the page template on which to base the page instance. So we'll
select "My Page Template", click, "Next", and give the page a name.
00:10:07 So again – very innovative – we'll call it "My Page", we'll click "Next"... we can actually
generate several pages in one shot... and click "Finish".
00:10:19 Now you can see that a new file was created here under the "pages" folder. And in order to
see it, we can actually add it to the menu item.
00:10:38 The menu is described by a JSON file, so we can just add another entry here under
"entities", describing this entry – the title and the target, the target for the navigation.
00:10:54 And now let's just change the "pageTemplates" structure a bit and add an additional content
section below... called "content2". Great – and now we can go ahead and preview our
changes within the development environment.
00:11:18 So as you can see, we have the same initial page that the template was created with, and
we have an additional entry here in the menu that is called "My Page" – it's the page
instance that we created.
00:11:29 And it points to the new page template that we created, containing an additional content
section below. Okay.
00:11:40 Let's go back to the slides. So at this point we’re in development mode.
00:11:45 We're in iterations of customizing, developing, and previewing our changes in the SAP Web
Developers can perform advanced operations to continue and customize the site template
project.
00:11:58 They can do things like adding widgets to a section of a page or of a page template, they
can configure the site settings, the menu structure – like we did – and the catalog to assign
pages to specific roles,
00:12:10 or add client-side coding capabilities and leverage portal APIs. At any point, developers can
run the site template in preview mode and test their changes within the Web IDE
development environment
00:12:26 So after those iterations of developing and previewing, we can finally reach the final state of
our development. And let's preview the site template that you will be creating in this week's
exercise.
00:12:46 So this template was also based on the same Basic Layout Set template. We just applied
some additional custom development to it,
00:12:53 and you can view the source files in the exercise. So what we did here – you can see the
capabilities – first of all we've added content to the header section.
00:13:05 We added an image widget to show the company logo. Then in the footer content section,
we added additional widgets,
00:13:16 a rich text editor with links, and social network links widget here at the bottom right. In
addition we've also added a shell plug-in that is hovering here in the bottom-right corner.
00:13:31 And when clicking on it, it displays a video. Okay, so our custom development is ready, our
custom site is ready, and we're ready to deploy the site to our account.

14
00:13:51 And make it available basically to the portal admin... in the portal admin environment. So
this is done again by selecting the project, clicking on "Deploy", and "Deploy to SAP Cloud
Platform".
00:14:09 Now this template is already deployed so we will just be updating with the last version.
We're updating the admin environment with the latest version of our development.
00:14:23 Okay... So finally, once the development is complete, developers can deploy the site
template project
00:14:34 from the Web IDE to their SAP Cloud Platform account. As we said, this will make the site
template available in the portal Admin Space,
00:14:41 and portal administrators can create site instances based on it. Okay, so what have we
learned in this unit?
00:14:52 We saw that in addition to the site templates provided out of the box, portal developers can
develop custom site templates in SAP Web IDE.
00:15:00 Portal provides a plug-in for SAP Web IDE that allows developers to generate site template
project and other portal site artifacts. In addition, they can preview the site template in the
development environment.
00:15:14 Developers can then go on to customize and create new page templates, design layouts,
set content, and more. Once the template is deployed to SAP Cloud Platform, portal admins
can create sites based on these templates.
00:15:28 Okay, so we're done here. Join us for our next unit where we will see how to create portal
widgets.
00:15:35 Thanks, goodbye.

15
Week 3 Unit 5

00:00:10 Hi, welcome to Unit 5 of Week 3. In the previous unit we saw how portal developers can
develop and customize new site templates using the SAP Web IDE.
00:00:21 The Web IDE is SAP’s official development environment for Fiori and lightweight
applications using SAPUI5 and client-side coding. So in addition to developing site
templates, the Web IDE is most commonly used for developing lightweight business
applications
00:00:41 interacting with various back ends – SAP and third-party solutions. In Week 2 we saw how
portal admins can add these applications to their Fiori launchpad sites,
00:00:52 but admins can also use these same business applications as portal widgets and add them
to their freestyle sites. Offering their end users access to the same business data and
transactions, just in a flexible freestyle experience.
00:01:09 So what are portal widgets? Portal widgets are the basic building block in freestyle sites.
00:01:15 They are used to display the actual content and apps in our site pages. The widgets
themselves are lightweight, client- side based applications developed in SAPUI5, HTML,
JavaScript,
00:01:28 and third-party libraries embedded into the pages of a site. The portal is delivered with a set
of widgets out of the box.
00:01:35 This means that a portal admin building a freestyle site can start adding widgets into the
content sections available in the site pages without any further development.
00:01:45 In addition, any lightweight SAPUI5 application can be added as a widget to a freestyle site.
These include applications that your developers developed locally on your SAP Cloud
Platform account,
00:01:59 and applications from other accounts made available by partners or other vendors through
subscription. Now, we mentioned the set of widgets SAP provides out of the box with the
portal.
00:02:14 These include three types of capabilities: The first set are widgets for displaying Web
content and media files,
00:02:21 like an image widget for displaying images, a video widget to embed YouTube or Vimeo
content, an HTML widget to display HTML snippets, rich text editor to add formatted text
with tables, images, links, and so on,
00:02:36 and a bunch of additional widgets. The second set are navigation widgets displaying the
site’s menu hierarchy.
00:02:44 These include a side navigation menu widget, which displays all the pages and subpages of
the site up to three levels. And, in addition, a breadcrumbs widget, which shows the position
of the currently viewed page in the site hierarchy,
00:02:59 allowing the users to click on any of its parent pages for convenient navigation. These
widgets are in addition to a horizontal navigation menu that is provided by default to all sites

00:03:10 and can be used or disabled by a portal administrator. The third set are collaboration
widgets – adding collaboration capabilities to your portal site through integration with SAP
Jam.
00:03:26 These include three different widgets that display the content and documents of a selected
Jam group, or the collaboration feed of a selected Jam group,
00:03:37 and the third one is a search widget to search throughout the Jam account. We will
elaborate on Jam integration in next week’s units.
00:03:52 In addition to the widgets provided with the portal, any HTML5 app available in your SAP
Cloud Platform account can be used as a widget in your freestyle sites.
00:04:02 This includes both applications developed by your developers deployed to your Cloud
Platform account and applications available through subscription to other SAP Cloud
Platform accounts.

16
00:04:13 The flow for developers working in SAP Web IDE is: To develop a lightweight application
using SAPUI5, JavaScript, and HTML.
00:04:24 The application can integrate with other SAP solutions like SuccessFactors, Hybris,
S/4HANA, or any third-party system; When development is completed, developers can
convert the app to a portal widget by using the conversion wizard in SAP Web IDE,
00:04:43 which is made available through the plug-in. This mainly creates a descriptor file describing
the appearance of the application in the widget catalog available in the portal's Site
Designer;
00:04:55 The third step – the developer deploys the application to the SAP Cloud Platform account.
This makes the application available for portal admins in the widget catalog.
00:05:06 Optionally, developers can choose to leverage the widget settings API – provided by SAP
Cloud Platform Portal – to enable portal admins to configure certain settings of the app in
the Site Designer.
00:05:23 Portal administrators creating and editing the content of a freestyle site within the Site
Designer add widgets into content sections of pages and page templates.
00:05:33 By clicking on the content section, an admin can open the widget catalog and select any
one of the available widgets – either the ones provided out of the box or the custom-
developed ones – and add it to the section.
00:05:45 In addition, the portal admin can configure the widget settings to control their appearance
and business logic as assigned to the widget by the developers.
00:05:54 An admin can add multiple widgets into one section and can then position the widgets and
design the layout and appearance of the section.
00:06:03 Now, I’d like to demo the process of converting an SAPUI5 business app to a portal widget.
In the next unit, we will demo the end-to-end process of building a site instance
00:06:14 and show how a portal admin adds and configures widgets to his site. So we'll move back to
the development environment, to the SAP Web IDE.
00:06:23 Now in here in my development workspace, I have the business applications that you used
in the first week's exercise and in the second week's exercise to add to the Fiori launchpad
site.
00:06:38 So this is the "es4Products" application that connects to the ES4 on-premise Gateway
demo system. And we can preview it and run it from within this environment and see what it
looks like in runtime.
00:06:57 Great – and now as portal developers we want to enable this application and make it
available for portal administrators to add to their business sites.
00:07:06 So we need to convert it to a widget. Now, converting it is very simple.
00:07:11 Basically we just need to select the project, right-click, and select the option "Convert to
Portal service component". Now this is made available through the portal plug-in that we
enabled earlier this week.
00:07:22 What we have to do here is basically point to the component app that we want to convert –
and we only have one component app in this folder – and just give the widget a name.
00:07:30 So let's call it "Product Catalog"... and click "OK". And basically this generates... the
descriptor file,
00:07:49 which describes the appearance of the widget in a content catalog and some other
changes. Now what we can also do here is choose a thumbnail icon that will be available
within a catalog.
00:08:04 So we can choose it from the SAPUI5 icon library. So this library is available online in the
SAPUI5 demo toolkit.
00:08:17 So we can simply search for SAPUI5 on Google, and probably the first or second entry will
be the UI5 SDK demokit. Now if we access it, the "ICONS" option here will open the icon
library,
00:08:34 and we can simply choose one of the icons that we want for this application. So let's search
– surprisingly – for a "product" icon... and there's one available here.

17
00:08:45 So we can just add its ID to the "thumbnail", so with the "sap-icon" prefix... and then the
name of the icon – "product".
00:09:04 Okay, and now the SAPUI5 application is converted into a portal widget, and we can simply
deploy it to our Cloud Platform account.
00:09:19 And that will make it available for portal admins to add as widgets into their freestyle sites.
And we'll see that in the next unit.
00:09:29 Okay, so what did we cover in this unit? We've basically learned that widgets are the
content and apps that portal admins add to page sections,
00:09:40 and that SAP provides a set of widgets out of the box for navigation, Web content, and
collaboration with Jam. We've learned that portal developers can create widgets from any
custom SAPUI5 application.
00:09:54 They can use portal APIs, like widget settings, to expose widget settings for portal admin
configuration. And then portal administrators in the admin environment can add multiple
widgets to content sections,
00:10:08 they can configure the widget settings, and they can set the widget's position and define the
section’s appearance – and we'll see that in the next unit.
00:10:16 Okay, so that's it for this unit. Join us for our next unit where we will see how a portal admin
brings everything together and builds a freestyle portal site.

18
Week 3 Unit 6

00:00:11 Hi, welcome to Unit 6 of Week 3. In the previous unit we talked about portal widgets and
showed how a portal developer can convert apps to widgets
00:00:22 and make them available for admins to use in their freestyle sites. In this unit we want to
show the end-to-end process of a portal admin building a freestyle site –
00:00:33 from creating a new site, to adding widgets and positioning them, to publishing it to our end
users. So let's get started.
00:00:43 As we mentioned earlier, administrators build new sites in the SAP Cloud Platform Portal
Admin Space. The Admin Space includes various tools and services for managing the site
lifecycle and we will focus on that in the next unit.
00:00:59 The entry point for creating new sites is the Site Directory, which is part of the Admin Space.
This is where portal admins can create new site instances.
00:01:09 For editing site instances, the portal Admin Space provides the Site Designer, which is a
visual editor for editing, configuring, and bringing together all the components that make up
a freestyle portal site.
00:01:24 The Site Designer enables portal admins to manage page templates, create new pages,
and edit their settings, add widgets from the content catalog to page layout sections and
configure their positioning, configure site settings,
00:01:40 manage the site themes, translations, and assets, preview and publish the site, and other
functionalities. Now, let's see what an actual flow of building a freestyle site looks like.
00:01:55 As a portal admin, the first step is to open the SAP Cloud Platform Portal Admin Space and
create a new site instance based on a site template in the Site Directory.
00:02:07 So let's switch back. Again, the portal Admin Space is accessible from the SAP Cloud
Platform cockpit account.
00:02:15 If we go to "Services" and we select the "User Experience" category, there's a portal tile
here, and we can launch the Admin Space.
00:02:25 And now in order to create a new site, what I need to do is go to the Site Directory and
select the "+" tile. And then I have the available site templates in my account,
00:02:39 and I can select the site template that we developed in the fourth unit of this week. So let's
give this site a name... "My OpenSAP Site"...
00:02:55 Select the template that we developed earlier and click on "Create". Now once we create
the site, it's opened in the visual Site Designer,
00:03:06 created as a copy of the site template that we based it on. So you can see that – as we had
in the template that we saw in the Web IDE development environment –
00:03:18 we have a one-page instance called "Home" with the header, the image logo, and the footer
with two additional widgets for links and social links, and the shell plug-in for the video
popup.
00:03:36 Okay. So in the second step we would like to use the Site Designer to edit a page template
and set repeatable content in its header and footer
00:03:48 in order to achieve a consistent "look and feel" to our site. The third step, after determining
the look and feel of my page templates,
00:03:56 would be to create multiple pages based on the available page template. Those pages will
inherit the layout and content that we defined in the template.
00:04:07 One of the options that is always available for me is to add a Fiori launchpad page to my
freestyle site – and create a hybrid site. This can be useful when I want to combine Web
content together with a launchpad and offer freestyle pages –
00:04:21 like public landing or logoff pages together with the application launcher page. After creating
the page instance, I can go ahead and add content to the page, set its access level as
public or restricted,
00:04:37 and add it to the site’s navigation menu, and more. So let's go back to the Site Designer and
edit the page template.

19
00:04:44 Now when we develop the site's template, the developer's already added content. But as a
portal admin, I would want to modify the content and add additional widgets here.
00:04:57 So, for instance, I want to add the login widget accelerator that we used in the previous
units. So I click on the header section and I have two action buttons.
00:05:08 One of them is to add content from the widget catalog, and the other is to change and edit
the section settings. So let's start by adding the login widgets.
00:05:21 So the widget catalog is open and I can simply select the login widget. And there it's added
very nicely next to the image widget and the company logo.
00:05:36 And now, since this is an openSAP site, I want to change the logo image. So I click on the
image widget and I have the action buttons that are available with the image widget.
00:05:51 So I click on "settings"... And what I can do is either select an image that is available in the
asset repository of the site or I can upload a new image from my computer.
00:06:11 There it is. Great.
00:06:20 Save this – so we change the image. Now I want to change the text here and update it to
the 2017 site.
00:06:31 Great – so we've added a widget and we've changed the widget settings of the available
widgets in the template. And now the template suits my requirements and I can go on and
create page instances based on these templates.
00:06:46 Now notice the existing page that we have here is based on a template, and it inherits all
the changes that we performed on a template.
00:06:55 So we don't have to go back and change each and every page on our site. So this is the
home page, and we want to edit the settings to make this home page publicly available on
the Internet,
00:07:12 sort of create a landing page. So we go to the page settings – this cog icon here – we click
on "Edit",
00:07:19 and then we can first of all change the name of the page. And the second thing is that we
can change the access level.
00:07:28 So instead of "Role-based", which means that the user needs to log on and then he can
view the page depending on his business role or the catalog that he's assigned to,
00:07:38 we will change this to be a "Public" page. Great – so now we want to create a new page.
00:07:51 So we click on the "+" here below, and select "New Page". Now as in the development
environment, also here admins create pages, of course based on page templates,
00:08:01 and they will inherit the template's look and feel. So we want to choose the "Header and
Footer" page template that we just selected,
00:08:10 and we will create a page called "Products". We'll click "Next", then we can set the access
level for this page.
00:08:20 This page will display a business application, so we want its access level to be restricted.
00:08:25 So only users who are authorized and have login credentials into my site can have access
to this page. So let's click "Finish", and you'll see that the page is added here to the list of
pages,
00:08:41 and is generated and opened here, inheriting the look and feel of the page template that it's
based Okay, let's go back to the slides.
00:08:55 So now that we've created and configured the pages, it's time to add the actual content with
portal widgets. Now, under the "Pages and Apps" tab in the Site Designer, portal admins
can add widgets to the content section available on their pages
00:09:11 as predefined by the page templates. By clicking on the content section, an admin can open
the widget catalog and select any one of the available widgets
00:09:20 provided out of the box or custom developed, and add them to the section. In addition, the
portal admin can then configure the widget settings to control their appearance and
business logic
00:09:30 as assigned to the widget by the developers. An admin can add multiple widgets into one
section and can then position the widgets

20
00:09:38 and design the layout and appearance of the section. And this includes positioning and
arranging the widgets' appearance inside the section – for desktop, tablet, and mobile –
00:09:50 and setting the section's background color or image and defining its dimensions and
margins. Portal admins can also add SAPUI5 applications as full-page applications running
in their site.
00:10:04 In this case, only the selected app will be displayed on the page and admins will not have
the option to add additional widgets to that page.
00:10:13 Okay, so let's see how we add content to our page instance. We already saw that in the
context of the page template.
00:10:23 So this is the page instance that we just created – "Products" – and we want to add some
Web content, some images, and we want to also add the business application that our
developers converted into a widget in Unit 5.
00:10:40 So we start by clicking on the "+" of the section to add content... and we want to add an
image gallery.
00:10:49 So here's an "Image Carousel" widget that we can add into our section. And then in addition
we want to add the "Product Catalog", as you can see, that our developers converted into a
widget,
00:11:04 and they have defined the title and icon that were defined when we converted the widget.
So let's select it and add it to our section.
00:11:17 Great – so now they've both been added into the section, and we can start by editing the
image property.
00:11:25 So for instance in the image carousel we can select our own images. And we can add our
custom caption...
00:11:38 and select additional images and differentiate between the look and feel of this widget within
"Desktop View" and "Mobile View". Let's just save it as it is, and we can go ahead and
configure settings if they're available also for the product catalog.
00:11:57 But I'm pretty happy with how this looks, and I can now go ahead and configure the settings
of the section.
00:12:04 So I can choose, first of all, the layout or how the widgets will be positioned within the
section. So I can configure them to be rendered in one
00:12:18 In desktop, two widgets will appear in a row, and also in tablet. If I save this, then you can
see that the widgets are rearranged, but I don't like how this looks,
00:12:30 so I'll select the custom option and I'll reorder the widgets, so the product catalog will be on
the left. It will take up most of the screen's width.
00:12:48 Great – and once I save this, so this is sort of what I want, and I'll just change the height of
my widget, of the image carousel, so they will be aligned.
00:13:03 Great – well, almost great... Perfect.
00:13:11 Okay, and now we can continue and edit additional settings. We can choose a background
image for this section... for instance this screen... which doesn't really suit...
00:13:25 Or we can select an image... also here. We can upload an image for the background...
00:13:36 Great – so this looks better. And we can set the dimensions – so we can choose to put in
some margins between the content widgets,
00:13:46 set the width of the section, and the minimum height that the content will occupy within the
page.
00:13:57 And let's just disable the background image, select that we won't have any color here.
Great.
00:14:09 Great – okay, so this looks better. Okay, so now that we're done adding content and
creating pages,
00:14:20 let's configure the menu structure. The Site Designer has a dedicated editor for building the
menu structure, supporting a three- level hierarchy of menu items.
00:14:30 A menu item can point to any one of the existing pages defined in a site, or to a link, or
simply serve as a title for grouping other menu items under it.

21
00:14:41 The SAP Cloud Platform Portal provides default navigation modules for desktop and mobile.
And that displays the configured menu structure.
00:14:51 Portal admins can disable this feature and instead use the navigation widgets and plug-ins
provided out of the box, or the ones that are available in the portal accelerator GitHub
repository.
00:15:02 In addition, the portal provides APIs for the menu structure, enabling navigation to the menu
targets. So portal developers can develop custom navigation experiences that suit their
requirements.
00:15:16 So let's see how we configure the menu. So if we go to the left-side panel, we can select the
"Menu Editor".
00:15:24 And as you can see, we can enable or disable the default navigation module, which is
provided with the portal. We already have an entry here for the home page.
00:15:34 We can edit the title of this menu item and the target that it points to. We can add an
additional menu item, either as a sibling or as a child item.
00:15:45 So let's add the "Products" catalog, and select the pages that it will show. In addition, we
can create, let's say, another title item.
00:16:06 And we can create a subitem underneath it as a link that will point to the SAP Web site.
Great – and now we can save this and go ahead with the next step of building our site.
00:16:36 So okay – at this point, the next step could be to view and configure the site settings in the
Site Designer. The site settings allow portal admins to determine the site alias.
00:16:46 So when a site is published, the site URL is automatically generated. The site admins can
override this value by defining a friendlier name.
00:16:54 The SAPUI5 version can also be edited. Admins can select the SAPUI5 version to use for
their site's runtime.
00:17:03 They can choose between two options: The innovation version, which uses the latest
released SAPUI5 version and contains new features and innovations.
00:17:11 As a result, this version is constantly upgraded, and therefore is recommend for testing
purposes in a development environment. The other option is to choose the maintenance
version, which is a stable version of SAPUI5 that is not upgraded automatically,
00:17:25 and therefore lacks new features. We recommend that in a productive environment, you use
the maintenance version.
00:17:30 Another setting that can be configured is the sign-out page, which allows admins to select
which page opens when an end user signs out of a site.
00:17:41 The admin can configure custom site properties, and optionally add and configure key-value
pairs of properties that can be accessed using portal APIs by the implementing applications
–
00:17:59 like the site template app, shell plug-ins, or business applications running within the site.
Admins can also set multiple home pages, and by doing so assign different home pages to
different business roles.
00:18:14 So if I log in to the site and I have a different business role, then I see a different home
page. In addition, admins can configure various end- user settings like enabling Jam
integration,
00:18:26 enabling end user search, and enabling end-user theme selection. Okay, so let's see what
that looks like.
00:18:34 Going back to the Site Designer, we can choose the "Settings" tab. Clicking on "Edit", we
can create an alias for our site... "myopensap"...
00:18:47 And then we can choose between the UI5 version... we can configure the sign-out page. So
either select the default or some external
00:18:56 or one of the available pages within the site which needs to be a public page like the home
page that we configured earlier. We can create key-value pairs that can then be accessed
through the portal APIs by underlying applications.
00:19:11 And we can enable and disable various features, among them the SAP Fiori site header.
Okay, so once we're done configuring site settings, we can save them and go on.

22
00:19:27 Okay. Administrators can configure the access level of each page in their site using the Site
Designer.
00:19:34 A page’s access level can be set to "Guest", which means that the page will only be
available for unauthenticated users – users who haven’t logged in to the site.
00:19:44 They can also configure it to "Public", meaning that both authenticated and unauthenticated
users can access the page. And the last option is "Role-based", which means that only
users with a specific business role can access this page.
00:19:57 Like in Fiori launchpad sites, this is achieved by creating catalogs that map users to pages –
the admin creates a catalog and adds business roles to it, then configures the pages and
assigns the catalog to a page.
00:20:11 This way users have access to all the pages and apps in the site that are assigned to the
same catalogs as their business role. The last step – at every step of building the site,
admins can launch it in the preview environment,
00:20:25 which is available in the Site Designer, and view its current state without actually publishing
its latest version. By clicking on the top action menu in the Site Designer, the admin
launches the preview environment
00:20:39 and can preview the site in the various form factors, orientations, and supported locales.
Finally, when the site is ready, admins can use the top action menu in the Site Designer to
publish the site in its latest state
00:20:52 and make it available to its end users. Okay, so let's see how that works.
00:20:58 This is the preview button, so when we click it, we can preview the current version of our
edited site.
00:21:08 So we have the home page which has no content in it, we have the products page which we
created,
00:21:16 and we have additional options here which lead to an external site. We can preview the
page appearance in "tablet" and in "mobile" as well.
00:21:29 We can also change the orientation, and so on. And now that we're pretty satisfied with the
look and feel of the site, we can go ahead and publish it to our end users.
00:21:45 Okay, so let's see what the runtime environment of our site looks like. So this is the site that
you will be developing in this week's exercise.
00:21:58 So as you can see – let's just refresh this – we have a public landing page, the home page.
And we can only see it because we're not logged in at the moment.
00:22:11 But if we log in... then we get access to all the other restricted content,
00:22:19 and the business applications like the product page that we created. Now you'll notice the
site has the alias that we configured,
00:22:30 and if we log out of it, then we will be navigated back to the home page, like we configured.
Great.
00:22:45 Okay, so in this unit we saw that the Site Designer is a visual editor where portal admins
can build freestyle sites and bring all the site components together.
00:22:54 From creating a site, to editing its page templates, creating page instances, adding and
editing content, configuring site settings, and setting access permissions.
00:23:04 Okay, that's it for this unit – join us for our next unit where we will talk about administrating
portal sites. Goodbye.

23
Week 3 Unit 7

00:00:11 Hi, welcome to Unit 7 of Week 3. In the previous unit we saw the end-to-end process of
building a freestyle site –
00:00:19 from creating a new site based on a site template developed by our portal developers, to
adding content to it and publishing it to our end users.
00:00:29 In this unit, we want to talk about the additional tools and services that are available in the
Admin Space for administrating and managing the lifecycle of portal sites.
00:00:42 The entry point for portal admins is the portal Admin Space, which is opened when
launching the portal from the SAP Cloud Platform account.
00:00:51 From the Admin Space, you can access your portal's account "Site Directory", "Services
and Tools", "Usage Analytics", and additional useful links and references.
00:01:01 Let's go to our portal Admin Space. As you can see, it's opened in the home page where we
have access to the list of recently used sites.
00:01:13 We can launch them either in their runtime mode or open them for edit in the Site Designer.
Underneath that, we have some links to the templates and accelerators, to the GitHub
repository,
00:01:28 like we saw in Unit 3 of this week. Under that, some details about the usage analytics,
00:01:39 where can see the number of visits and unique visitors to our portal sites. And some useful
links for the Help documentation for developers and administrators for portal,
00:01:52 the underlying SAP Cloud Platform account, and the SAP Web IDE, and additional links.
Okay.
00:02:09 On the portal Admin Space we can navigate to the Site Directory or we can view the list of
all our existing sites. We can create a new site, duplicate a site, open one for editing in the
Site Designer,
00:02:21 or publish the site in its latest version, or delete it from our account. From the Site Directory,
we can transport sites between SAP Cloud Platform accounts, landscapes, and data
centers.
00:02:34 This is useful, for instance, when we have different accounts for development, testing, and
production. We will elaborate on this option in Week 5 of this course.
00:02:46 When exporting a site we have two options to choose from: We can export only the site
configuration, and this includes the site and page settings, the roles, catalogs, and definition
of groups,
00:03:04 application configuration, and the site assets like the underlying images and HTML snippets,
and the translation files. This creates a ZIP file that we can then import to an SAP Cloud
Platform Portal on a different platform account.
00:03:20 Alternatively we can export our site as a complete content package, which in addition to the
site configuration exports the underlying SAP Cloud Platform business roles
00:03:31 and the applications, which include the site template application, the business applications,
the widgets, and the themes. This export creates an MTAR file, which stands for a Multi-
Target Application Archive,
00:03:49 and is a complete solution that can be imported as-is to a different SAP Cloud Platform
account. Well let's see what the Site Directory looks like.
00:03:58 So we navigate to the Site Directory, and again we have the list of all the available sites in
here. We can open a site for editing, as we've seen before, and this will launch it in the Site
Designer.
00:04:10 We can click here and also take the site offline, so it won't be available anymore. We can
duplicate it, or simply export it.
00:04:20 Then when we click the export, we can choose between a content package, which will
create the MTAR file and will also wrap the underlying applications, the site template
applications, the included business applications,
00:04:35 or just the configuration that would create a ZIP file. We can then import an MTAR or a ZIP
file into our account.

24
00:04:48 And, of course, we can create a new site instance, as we've seen before. Okay.
00:04:59 Another tool that is available in the portal’s Admin Space is the Usage Analytics, which
enables portal admins to analyze site statistics.
00:05:07 It displays a dashboard where admins can view statistical information relating to the portal
sites in their accounts. The Usage Analytics dashboard displays charts, graphs, and tables
of statistical information
00:05:20 about the usage of launchpad and freestyle sites. The usage data differs between the
number of visits and the number of unique visitors, meaning from a unique IP.
00:05:34 The data measures Web traffic by hour, day, week, or month during a selected period of
time displayed by distribution to device types, operating systems, and browser types.
00:05:46 So let's quickly see what that looks like. So here on the left we can choose the Usage
Analytics service.
00:05:54 You can see this dashboard for the usage of my site. We can select the time range or the
range of dates that we want to see information about.
00:06:08 We can see all the sites or see data about a specific site. So, for instance, our freestyle site
had 4 unique visitors – not a lot – and 45 occurring visits.
00:06:22 Well, that's only today. And beneath it we can see, for instance, the number of visits
distributed by device types, so either by desktop or iPhone,
00:06:40 distributed by operating systems, and distributed by the type of browser that was used.
00:06:48 We can switch between a graphic view and a tabular view. Okay.
00:07:03 So additional services and tools are available for each site by accessing the Site Designer:
The theming service opens the SAP UI theme designer where admins can create custom
themes for their portal sites,
00:07:18 and then assign and manage those themes with the theme manager. Another service is the
translation service, and this allows portal admins to translate their site assets
00:07:29 to cater for users with different languages in the same site. Administrators can translate the
texts available on the site,
00:07:37 together with various assets like images and HTML resources. And we will elaborate on
these two services in next week's units.
00:07:46 In addition, the Site Designer offers the asset management service, which displays the
asset repository that stores the various assets and media files available on the site.
00:07:59 Admins can manage the assets used in the site and upload additional ones to the repository
in order to reuse them in various widgets throughout the site.
00:08:09 So these are site instance level services, so we can access them if we open one of the
sites. So if we look at the freestyle site that you will create in this week's exercise, we can
open it in the Site Designer,
00:08:27 and then access it here on the left under "Services and Tools". So you can see the list of
services and tools that are available:
00:08:34 The "Translations" service, the "UI Theme Designer" which opens SAP's UI theme designer
where we can design the theme, and then the "Theme Manager" where we can assign
specific themes to our site.
00:08:49 So we will talk about these services more broadly in the units next week. And additionally
we can see the "Asset Management" which lists the available assets, images, HTML
snippets, videos,
00:09:07 and whatever is included on our site. So all the assets that are added to our various widgets
are stored here,
00:09:14 and we can reuse them within our site from different widgets, or just upload new assets that
can be used and reused among the site pages.
00:09:29 Okay. So that's it for this unit.
00:09:32 Let's recap on what we've learned so far. We introduced the portal Admin Space as the
entry point for accessing services and tools to administrate your site.

25
00:09:42 We saw that the Site Directory is where you managed the lifecycle of all your sites, where
you can analyze site statistics with the Usage Analytics service.
00:09:50 And through the services available in the site designer, you can brand and theme your sites
with the UI theme designer and manager, manage the site's resources and files,
00:10:01 and support multi-language sites with the translation service. Okay, that's it for Week 3 of
this course.
00:10:08 Join us next week when we talk about productizing SAP Cloud Platform Portal sites.

26
www.sap.com

© 2017 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or
for any purpose without the express permission of SAP SE or an SAP affiliate
company.
SAP and other SAP products and services mentioned herein as well as their
respective logos are trademarks or registered trademarks of SAP SE (or an
SAP affiliate company) in Germany and other countries. Please see
http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional
trademark information and notices.
Some software products marketed by SAP SE and its distributors contain
proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for
informational purposes only, without representation or warranty of any kind,
and SAP SE or its affiliated companies shall not be liable for errors or
omissions with respect to the materials. The only warranties for SAP SE or
SAP affiliate company products and
services are those that are set forth in the express warranty statements
accompanying such products and services, if any. Nothing herein should be
construed as constituting an additional warranty.
In particular, SAP SE or its affiliated companies have no obligation to pursue
any course of business outlined in this document or any related presentation,
or to develop
or release any functionality mentioned therein. This document, or any related
presentation, and SAP SE’s or its affiliated companies’ strategy and possible
future developments, products, and/or platform directions and functionality
are all subject to change and may be changed by SAP SE or its affiliated
companies at any time
for any reason without notice. The information in this document is not a
commitment, promise, or legal obligation to deliver any material, code, or
functionality. All forward-looking statements are subject to various risks and
uncertainties that could cause actual results to differ materially from
expectations. Readers are cautioned not to place undue reliance on these
forward-looking statements, which speak only as of their dates, and they
should not be relied upon in making purchasing decisions.