openSAP

SAP Screen Personas

WEEK 2, UNIT 1
00:00:09

Hello and welcome to our openSAP course on SAP Screen Personas. This is Week 2, and
today we're going to talk about Creating Themes.

00:00:18

But before that let's have a look at the agenda for this week. Well we're going to start out with
Creating Themes.

00:00:25

The rest of the week will be focused on Building Flavors. Peter is going to walk you through
how to do that in two separate sessions.

00:00:31

After that I will be back and talk to you about merging tabs, and Peter is going to close the
week out

00:00:35

and give you information how you find additional information on SAP Screen Personas and
which resources we make available for you.

00:00:43

Now let's get started with Creating Themes.

00:00:48

We want to start out by opening our administrative user interface. So I'm going to go directly to
the backend here in the Windows GUI and going to go to /n/personas/admin.

00:00:59

And in here I'm going to upload an image that we can use as the background for our theme.

00:01:06

So I'm going to the Resource Maintenance block which refers basically to everything around
image handling.

00:01:11

I'm going to select that here and say Create New Resource via Upload. What that gives us is a
file dialog and we can select an image,

00:01:19

in this case we're going to go with the NationalStadium.jpg. Just going to say Open and now
the system uploads the image and makes it available for us to use.

00:01:27

It also reshrinks it using a graphic server to make sure that we have a little preview available
for us.

00:01:35

So as it's doing this, the image is uploaded and you see that little thumbnail has been created.

00:01:42

Now we're going to go to change mode and do a couple of things. First of all we are going to
give this image a description. We're going to say this is a Use openSAP Theme.

00:01:55

And we're going to mark this image as public. Now that's very important since themes are
meant to be deployed to a larger audience

00:02:01

and you can't share it with individuals but only with roles. It means that you need to make
every single image that you want to use in your theme publically available.

00:02:11

So if you check that box, everybody can use that image, everybody can actually access it,
which is very, very important if you want to see it in your theme.

00:02:18

With that just going to say Save here and go back to display mode on our image.

00:02:28

And we are going to go back to our administrative transaction which we are going to need to
go into the theme block a little while later.

00:02:35

For that let's log on to SAP Screen Personas. We can see that the logon window comes up
and we are logged on as our user ADMIN.

00:02:48

Now, what's important to know about that is that user ADMIN has administrative rights in our
system.

00:02:52

So, this user gets to see the little Theme dialog here on the right-hand side.

00:03:00

If your user does not have the editor at the runtime administrative rights, your user will not be
able to see that Theme box and will not be able to create themes.

00:03:09

The reason for that is that themes are not meant to be selected by an individual on a one-byone basis or depending on their mood.

00:03:18

And therefore it's also not planned that everybody can create them. The idea is that you create
a fairly small number of themes for separate divisions,

00:03:25

for corporate styling or maybe for transaction groups like plant maintenance, or for specific
workers depending on their specific role.

00:03:36

We are going to go in here into themes, we are going to open this up, and up comes our theme
dialog.

00:03:44

And here we have the ability to create a new theme. We are going to say Create New Theme.

00:03:49

And I call this openSAP and this is an openSAP theme and we're going to hit Create.

00:04:02

And what's important to know about themes is that these are graphical treatments that apply
across transactions and screens.

00:04:11

So you cannot change an individual control instance on the screen, so you cannot say

00:04:17

I would like to have the upper left specific button to be green as you did earlier in creating a
flavor.

00:04:25

But you can style the entire class of controls. So you can for example define something for
every single input field for every single group box, for every single radio button.

00:04:35

It's a generic setting that applies to all of them and not to the specific instance.

00:04:40

So, we are going to sort out by using that image we created. We are going to go to the General
group box here and where it says Window Image, we are going to upload our image.

00:04:52

So, we click this, our Image Gallery comes up, and here we can search for our National
Stadium image that we uploaded.

00:05:00

There it is and we can say Insert Image, and you can see the image shows up in the
background right away.

00:05:07

So we can't see a lot of it because our screen is actually filling the entire space.

00:05:11

Now we want to do something about that. So we're going to scroll down here, and here we can
change the user panel width, User Area Width.

00:05:21

I'm going to set that to 1000 pixels for this demo. You can also go with a certain percentage
and say you want to fill 80% or 90% of the screen.

00:05:29

And do the same in height, and you can define an offset from the top, you can have a centered
experience there as well.

00:05:35

And when I said that these themes apply across transactions, what's important is that, if I now
have selected this theme I'm working on,

00:05:43

I can go to any transaction, like xk03 for example, and when I go there, I will still see the theme
being applied.

00:05:50

And we can start styling a little more because you can see right now it is a little hard to interact
with that

00:05:55

because you have a hard time to find out what some of those areas down her say.

00:06:00

So, what we are going to do is we just going to go over the list of options we have, and what
we are looking for is the User Panel Color.

00:06:08

And I'll open our color picker here and I'm going to select one of our corporate colors

00:06:14

that you can define for your specific company to fit your style. In our case I'm just going to pick
this little greyish white.

00:06:22

As you can see it is a solid fill, so I don't get to see my image anymore. And I don't like that
either.

00:06:27

So what I'm going to do is I'm going to switch over to the Color Mixer and I'm going to increase
the level of transparency on this image

00:06:36

until I feel comfortable and this is workable and I can still see enough of the image.

00:06:41

So as you can see, there is a certain percentage at 77% solidity of that image and that actually
works fine.

00:06:51

So I'm going to close this and now I'm just going to copy that value viz. we'll reuse that.
Because if you look up here,

00:06:59

there are still a lot of white areas. The first one we are going to address is the Application
Toolbar,

00:07:06

which is the lower toolbar with these buttons and here I can have a Background Color
property.

00:07:11

I'm simply going to paste the value we have, hit Enter and you can see it applies right away.

00:07:15

You can also find the Title Bar in this list. That's right here. And that's where it says Display
Vendor: Initial Screen.

00:07:24

I'm going to put the background color in here as well, just paste it and hit Enter. I can also
select a different one,

00:07:29

but to make it a little simpler and flat in design, I'm just going to use the exact same one.

00:07:35

And then we have our System Toolbar. That is the top toolbar that we see here. And I'm going
to add that background color there as well.

00:07:44

You can see it's very easy to create a screen that is very appealing, very flat and does look
very different from the original version we started out.

00:07:54

Now, we talked about the different options that you have and how this is available for you if
you have the ADMIN role. How you do all these changes per instance.

00:08:03

We are going to now save this flavor and see how it applies across our system.

00:08:10

So, since I am the administrator and I have just edited this flavor, this will now be my default
for this session. And I can't undo that, the only way to do that would be a refresh.

00:08:17

What I'm going to do now is I'm going to go into a transaction, in this case I want to see GUIT
and check how it works there.

00:08:25

You can see that my screen is here and I can switch through and I see how the changes apply.

00:08:33

And on this specific screen we have already a couple of things that were pre-filled in orange on
my screen.

00:08:39

Now I'm going to see how that interacts with the theme. So I'm going to say Edit Current
Theme,

00:08:46

and I'm going to select our Input Field, and I look for the Background Color and I'm going to
select a green.

00:08:56

And I close this. And you can see that the green actually applies not to all the elements on the
screen.

00:09:04

But the elements that have already a setting that came from the flavor are not touched.

00:09:04

So, in these cases the flavor setting wins. Also you see that some of the elements down here
actually are not changed

00:09:15

because they are either output fields or they have an inactive state. Now if you want to change
those as well,

00:09:22

you can actually scroll down here and you find the disabled state and the read-only state
defined that you can actually fill with your own color choices.

00:09:32

But I'm not going to do that for now.

00:09:37

So, in order to make this theme now not only apply in this one session but be generally applied
to my user, let's look at administrative aspects of this.

00:09:46

First of all I'm just going to refresh to clear my preset that I did being the administrator editing
that one specific theme.

00:09:54

And you can see that, by default, I don't get to see any specific theme. I'm going to go to our
administrative user interface.

00:10:04

And I'm going to look for the Theme Maintenance block. This is the block on the top-right side.
I'm going to use the F4 help and find our theme, and the name of it was openSAP.

00:10:15

And there we have it, I select it and I say Display. And as you can see, we see all the different
options around it.

00:10:23

So, we can upload or change an image if we want to, have a specific image show up in the
theme gallery to remind us what the theme was about.

00:10:30

But more importantly we can control the Assignments down here. To do that, we're going to
switch this over to change mode.

00:10:40

We are going to be able to select a role that we would like this to be applied to. So we can use
the F4 help here and find the roles that we have in the system.

00:10:49

And I already mentioned that our user ADMIN has this Admin Role in the system. So, I'm just
going to select that.

00:10:56

And I'm going to say that for the transaction xk03 this theme will apply, and we can say that for
the same role.

00:11:08

If I go to transaction SU01, this theme will apply and will not apply for other transactions.

00:11:17

So, I will be able to just save this now and go back to display mode. And as we move to the
system to transaction xk03,

00:11:28

you can see that the system takes a moment longer and then loads our theme. In the first time
the images are downloaded and cached

00:11:35

but after that, if we move through the system for example to GUIT, you can see that our theme
is actually applied, sorry it's /nGUIT.

00:11:48

You can see that our theme is not applied in this case because we did not define GUIT.

00:11:57

But if we go to /nSU01 we will see it apply there. And as you can see, we have the green input
fields waiting for our input.

00:12:06

Alright, so let's go back to our slide and talk about what we have just seen.

00:12:14

So, we have learned that, when you work with SAP Screen Personas, you have a distinct
layering model.

00:12:20

The lowest level is the screen definition that comes from the backend. So you have seen all
the different buttons, input fields on the screen.

00:12:27

That's all defined in the Dynpro or in the Screen Definition processed by the Dynpro

00:12:32

and sent to the different clients. There it's rendered the way it's by default rendered. Whether
it's grey buttons or yellowish buttons or if the background is grey, white or blue,

00:12:41

that depends on the SAP theme that's originally delivered. So we have Corbu, Signature and
Blue Crystal that come to mind.

00:12:48

On top of that you can apply the Personas theme. So if you go in and you tweak on top of the
existing theme.

00:12:56

So, we left the buttons grey and they remained grey but we then went into the input fields and
instead of having the white, we defined them to be green.

00:13:01

That is happening on the Personas theme layer, and on top of that we apply now the flavor
changes.

00:13:06

So as you have seen, the text fields and input fields turned orange instead of green in those
cases in which we had made that conscious decision to have them orange.

00:13:15

So you have seen how this is all layered on top. But, what's important to know on theming is
that at this point theming only works in the SAP GUI for HTML, in the WebGUI.

00:13:28

This is currently not applied in the JAVA GUI or the Windows GUI. With that let me just wrap
that up.

00:13:37

We have talked about the fact why we're using themes, because we can have a very big
impact with very little effort

00:13:43

to create something that looks very different and is aligned with my corporate style.

00:13:47

We've talked about the different capabilities of the theme editor and how we can use it to
define certain visual properties,

00:13:54

visual treatments that apply across transactions and how we can apply them to specific
classes of controls.

00:14:00

And you have seen how to use it and how to assign the theme to a group of users by role and
transaction.

00:14:08

You can also use wildcards to make it apply more broadly.

00:14:12

In the next unit Peter is going to talk about how you can build flavors to simplify transactions
themselves and make your life much easier that way. Thank you.

WEEK 2, UNIT 2
00:00:09

Hello and welcome back to the openSAP course SAP Screen Personas. My name is Peter
Spielvogel,

00:00:16

and today we're going to continue the theme of building screens.

00:00:22

In Week 1 we simplified the starting transaction, also known as SMEN, and we recently built
the theme in the last unit.

00:00:31

Today I'm going to go a little bit deeper and simplify a finance transaction.

00:00:38

So, let's go into the system, and before I do it let me set the ground work for this, we are going
to imagine that we are simplifying the screen for a financial analyst.

00:00:49

This is someone who deals typically with vendors, and they need certain information on the
screen and they don't want to do a lot of clicking to get that.

00:00:58

So let's go into that transaction, which is transaction xk03, and this is what the unmodified
screen looks like.

00:01:09

Before I simplify, I'll run through the full transaction, so you can see where someone might get
stuck, so we can simplify those out of the picture.

00:01:20

The first thing I need to do is choose a vendor. So, I use the pop-up, we'll keep that in there
and we'll choose this one.

00:01:32

And I also need to enter the Company Code. This is something that the person needs to do
every time.

00:01:38

And they are only interested in the Address and Accounting information. So, whenever
someone goes into this screen,

00:01:46

they are always typing Company Code, Address, Accounting info before they move on.

00:01:53

Then they click the Go button and they encounter the Vendor Address. There is a bunch of
information here on the screen.

00:02:01

And, there is also the comments down here, which is something that's important and they need
to look at every time.

00:02:09

Then they navigate to the next screen, which they do using this button. And here they get
some more information about Accounting.

00:02:20

That's all they need to do in the transaction, but a couple of things we'd like to help them avoid.

00:02:25

One, if they click on this next screen because they forget that they're at the end, they get this
pop-up.

00:02:32

Probably something we want to keep away from them. So let me hit Cancel there.

00:02:37

And when we go back, we go to this. If they hit the Back again, they get a different error
message here on the bottom: No previous screen exists.

00:02:47

We want to also keep them from bumping into that. So, let's go back to our starting screen
here and simplify this to make life easier for this financial analyst.

00:02:58

So as you recall, we click on the P and go into edit mode. Well, we can't edit the original
transaction, so we have to create a new flavor and we will call that OpenSAP.

00:03:18

And the comment is unit 2.2. So let me Create, and now I am in edit mode, which you can see
by the toolbar here.

00:03:31

So now I can just go about simplifying the screen. So let me click on this, and make sure that
that's set by default.

00:03:39

This one, we're are also going to that set by default. And since that's finished already, I can
hide this block which we don't need.

00:03:49

Hide this one, scroll down, and we're not doing anything with the purchasing information.

00:03:57

So now we've got it pretty well simplified. I am going to hold the Shift key to activate what we
call the lasso tool, which is going to highlight some of these fields.

00:04:08

I'll do that again. And I will also make sure I get that one and hide this.

00:04:16

So now we've got really all the information we need. We've got this toolbar, which we're not
using.

00:04:24

You'll recall that to get to the vendor, we use this button. So let me double-click on that, and I'll
say View Vendor,

00:04:34

and I will pull that off of there onto my canvas over here.

00:04:41

And for consistency in my screens, I'm going to set the position of that to 0 pixels and 800.

00:04:55

And that's really all we need to do on that. So I can save and exit.

00:05:04

Now I've got a very simplified screen. So let's go to the next step in the process, where we've
got the address data.

00:05:12

And again, I'll come down and edit my flavor. So it's the same name, OpenSAP, because each
flavor name in Screen Personas is mapped to a transaction.

00:05:24

Even if the transaction has multiple screens, it's still encompassed as part of that same flavor.

00:05:31

So here I am again in edit mode, and I've got the information Search Terms, I don't need. So I
can hide that.

00:05:39

And in its place I am going to come down here, and I'll select these two items from the
comment, and I'll put those right at the top.

00:05:51

The address, I will move up slightly.

00:05:58

We might as well keep the PO Address right at the same line over here.

00:06:07

And I can move up the communication also. So that's it at the screen level of what I wanted to
simplify

00:06:15

but there is a few other items I want to clean up on the screen. Things that we are not
necessarily using.

00:06:23

So I can hide these buttons. You'll recall that this was the next one we wanted to keep, and in
this case we'll just call it Accounting.

00:06:38

And let me move it down into the toolbar here and, for consistency again, let's place that at 0
and 800.

00:06:48

That way things aren't going to jump around when we're doing it. And we're done with this. And
we really don't want people navigating around. So for this one

00:07:02

This will take us back to the vendor selection screen. So I'm going to label that New Vendor.

00:07:11

And again I'll pull that down onto my surface area here. And for consistency I'll put this at 0 and
1100.

00:07:26

So those will pop up. We've got this button, which we can also hide, and again I am going to
eliminate the toolbars

00:07:35

to really keep things simple for the user and keep them focused on the task.

00:07:41

So now they've got everything they need on this screen. So I am going to hit Save and Exit.
And here we are on the transaction and I can jump over to the accounting screen.

00:07:53

And we'll go through the same process again: Going to edit mode. Again we're working on the
OpenSAP flavor.

00:08:00

The flavor is associated with the transaction as a whole. And the first thing I want to do, this is
kind of a cumbersome Display Vendor: Accounting Information Accounting.

00:08:11

So let's just leave this as Accounting. And this was the toolbar that we got stuck on before.

00:08:20

So this is going to take us back to Address.

00:08:26

I'll move that here and position that at the same spot, 0 and 800.

00:08:41

I'll hide this toolbar, hide this button over here. And again, if you want to exit, we don't want to
have someone go back to the address

00:08:51

and then hit two back buttons. This will be that same New Vendor button, which will take
someone back.

00:09:00

We put that over here and again line up those buttons with 1100.

00:09:11

Now this person's an analyst, so they don't care about the interest calculation. We'll hide that.

00:09:18

They do care about the withholding tax and the reference date that we'll move up also by
default.

00:09:31

And finally hide the toolbars to make things really simple. So let me save and exit.

00:09:42

And I can go back to New Vendor, and now we've got our nicely simplified transaction.

00:09:48

If I go in here, I can select a different vendor, choose ABC, view the vendor, I've got my
accounting information, everything nicely set up.

00:10:05

Jump to Accounting, I don't have to move my mouse, I can toggle easily. The buttons aren't
jumping around.

00:10:12

And I can go back to New Vendor. If I am done here, I can go back to my home screen.

00:10:18

So, in this session, we've simplified a financial transaction. We've removed some fields we
don't need,

00:10:28

removed toolbars we don't need, removed buttons we don't need all part of simplifying a
transactions to improve user productivity.

00:10:36

We've pre-filled some fields upfront, that Accounting button and the Address button as well as
the company code,

00:10:42

all to make someone's life easier and streamline things.

00:10:47

In the next unit we're going to do some visual enhancements to the screen since today we
focused just on simplifying and dealing with the functional aspects.

00:10:59

And next time we'll look at a couple of ways you can make the screen even easier to use as
well as make it look better.

00:11:06

Thank you and we'll see you in the next unit.

10

WEEK 2, UNIT 3
00:00:10

Welcome back to openSAP course on SAP Screen Personas. We are now in Week 2, Unit 3.
We're going to continue on the theme of Building Flavors.

00:00:20

In the last unit we took a financial transaction, xk03, and simplified it down to its bare
essentials.

00:00:28

So let's take a look at that. And the theme there was just purely on visual enhancements.

00:00:39

So it got a vendor here. If I click View, I can see my address information, I can see my
accounting information and I can choose a new vendor.

00:00:48

So, a very simple screen but not exactly a really attractive screen. So let's start to change that
in this section.

00:00:57

So the first thing I can do is just apply a theme to it. This is what you saw in Unit 1.

00:01:05

And I just go here, go to Themes, I can choose my openSAP theme.

00:01:12

And now, pretty quickly, I've got a screen that looks a lot different from standard SAP. I've got
a good background image.

00:01:22

All my controls are exactly where I put them. And I've got a little bit of visual enhancement
there with the box.

00:01:31

In addition to a theme or instead of a theme, you can make visual enhancements to the screen
similar to what you did in the theme, in a what-you-see-is-what-you-get way.

00:01:42

So I'm going to turn off the theme here so there's no confusion about what's the theme and
what's not.

00:01:49

And we'll go ahead and edit this flavor to make some visual enhancements to it.

00:01:56

So, the first thing I'm going to do is just very quickly change the background image.

00:02:03

So I've got the user area selected, which you can always see in the upper corner there, and for
the Fill Color, I'll just make that white.

00:02:22

So weve got a white background. Immediately it looks a little bit cleaner. I can also do that
with this one, change the fill to white.

00:02:32

And now we've got a little bit cleaner screen there.

00:02:36

We can also make it a little more usable by putting in some information for the user in case
they are not really familiar with the simplified screen.

00:02:45

So over here I'm going to add a Tooltip. So right now it says Vendor Account Number.

00:02:53

And we can say Select a vendor, over there. So when someone mouses over that, that's what
will appear.

00:03:04

We can also put a little bit heavier annotation on the screen in the form of a Sticky Note.

00:03:11

And here we'll just say Vendor Info, and I've prepared that in advance here, and we'll just put
some text into this note.

00:03:24

And you'll see I've got a choice of Collapsed. I'm not going to collapse it first. And you'll see my
Vendor Info comes in, I can display that there.

11

00:03:36

When I save it, this appears underneath, and if I selected that Collapsed button, it would start
up this way but we'll have it go open.

00:03:47

Let me go back into edit mode again. And we can also change the fonts on the screen, the
colors.

00:03:57

Now, as you recall from theming, you can also change the fonts and the colors.

00:04:03

And the way it works from a stratification standpoint, we take the transaction definition, then
the theme and then anything you do in the flavor.

00:04:12

So its important: If you know that you'll be using a corporate theme, you don't want to change
the fonts, the colors of any controls

00:04:20

because then you'll overwrite what's coming in the theme. So, use your theme and then make
your changes on top of it.

00:04:26

In this case we are not going to apply the theme, so I will put some visual treatments on it.

00:04:33

So over here, I've got Vendor. This is really the thing that someone needs to enter so what I'll
do there is make the font bigger. Very intuitive.

00:04:44

I can make it bold. And I can even choose a color for it. I'll choose one from our corporate
palette so we know that we always stay on brand.

00:04:55

So, we've now done that. In addition, you'll recall that, when you're in this transaction, if you
want to go back to the main screen,

00:05:05

you would need to do that. Maybe someone might want to log out from here when their work is
done and not have to navigate so heavily around.

00:05:13

So what we can do then is insert a different type of button, which we've not done before, which
is a Menu Item Button.

00:05:20

What this does is take anything that you would select from a menu. But instead of navigating
through the tree, you'll do that once, assign it to the button and then it's done.

00:05:31

So let's click on that, and we're going to Log Out. And over here, I'll pull it down, and these are
all the choices that I would normally see on the menu.

00:05:44

So I'll just go down to System, and it just passed, System/Log Off, and now I've got a button
over there.

00:05:59

I'll just put that right underneath here and line this up.

00:06:10

We can also put some visual treatment on the button. We can give it a little bit of a background
color. I choose a corporate red.

00:06:21

And you'll notice I didn't change the font at all, the font color. And for readability reasons and
accessibility, it automatically changed from black to white.

00:06:34

So we've got some auto-contrast built in. Again, it's possible to overwrite it. If you want the
letters to remain black, you would go back and do that.

00:06:44

But once you set something in the system, it's going to stay, and if you change the color to
something dark, you might have problems with readability.

00:06:52

So it's best to plan ahead what your visual style and theme is going to be and then leave that
alone.

12

00:06:59

In addition, you can add some additional content to the screen. And in this case we'll add an
HTML Viewer.

00:07:08

And what this allows you to do is put external HTML content onto your screen.

00:07:14

So this could be a PDF document that you want to embed that someone goes through.

00:07:20

We've seen a customer embed some Environmental, Health & Safety report right there on the
transaction screen so someone can go through.

00:07:28

In this case we are going to embed a video which talks a little bit about this particular
transaction.

00:07:37

So, I have that saved, I'll paste that here, and I'll drag that down, and we'll have that on the
canvas.

00:07:49

We can make that a little bit bigger. And let me save and exit.

00:08:01

And you'll see right there on the screen, we've got our Initial Screen, we've got the Vendor
which we changed,

00:08:11

we've got the new Log Out button, I've got a new mouse-over help to annotate. It now says:
Select a vendor.

00:08:20

I've got my Vendor Information annotation. All things to make the user more comfortable in the
system and make it more intuitive.

00:08:28

And I've got a YouTube video embedded in here and this is live. We can play it and we can
learn a bit more about the importance of vendor master data.

00:08:40

And that's playing through.

00:08:44

So, to summarize: In this unit we've talked about how to add graphics to a screen, how to
annotate screen elements either with the Tooltip or a Sticky Note,

00:08:55

how to integrate Web content, applying a theme or using your own visual style to go with that.

00:09:02

In the next unit we'll talk about how to combine information from multiple tabs. Thank you.

13

WEEK 2, UNIT 4
00:00:09

Hello and welcome to our openSAP course on SAP Screen Personas. This is Week 2, and
today we going to talk about Tab Merging.

00:00:20

In order to merge tabs we of course need to have a scenario. So what we're going to do is
we're going to look at transaction ie03,

00:00:28

which is display equipment, and then bring that up as we speak - trying to bring this up as we
speak.

00:00:35

And as you can see, we do have an equipment in here already, and the data that we are
interested in on this specific equipment

00:00:43

is actually spread between different tabs. So we have the Manufacturer data on the General
tab.

00:00:52

We have the Location tab, and on the Location tab we care specifically about the address.

00:00:57

And then it's very important in our organization that we do have organizational data maintained
in the system.

00:01:03

In our case this hasn't yet happened. So we need to wait for somebody to maintain that
information for our large computer.

00:01:11

Structure and SerData, we'll not really using that much. So we're going to just ignore that for
now.

00:01:18

So in order to make our life much easier and not have to switch between the General tab and
the Location tab all the time,

00:01:25

the idea is that we're going to move date from the Location tab to the General tab to make our
life easier and restructure the screen a little bit.

00:01:36

So, to do that we're going to create a flavor. I'm going to call that tabMerging and it is A Flavor
we're creating.

00:01:55

I hit the Create button, and what the backend does now is it creates that flavor for us and
allows us to start editing it.

00:02:00

So we are transitioning into edit mode right now and we already talked about the fact that
some of these tabs we don't really care about too much.

00:02:10

So we're going to select the SerData tab first, and you can see that I am able to hide that tab. I
can hit it and I am gone. And I can do the same with the Structure tab.

00:02:19

I hit it and it's going to be removed from the system. Now if you try to select one of these tabs
by double clicking it or clicking it to switch,

00:02:28

you'll realize that you can't really do that. But you have the Hide option in here. In order to
switch tabs you have to be in run time mode.

00:02:32

So you have to leave edit mode again. So, we wanted to move something from the Location
tab to the General tab.

00:02:40

So we need to save and exit here. The two tabs are hidden and they will not show up in run
time anymore.

00:02:44

As you can see here, we now only have General, Location and Organization.

14

00:02:48

Now in order to switch the Location tab just click it in runtime mode and it switches over right
away.

00:02:53

And we can go back into edit mode, and once we are in edit mode, we can start moving
elements around and move them outside of their tab container.

00:03:02

Now as this comes up, of course the big question that always comes up is: Where can I put
these elements?

00:03:10

And the answer is pretty simple. You just put them anywhere on the user area where we can
grab them later and move them to a spot where you would like to use them.

00:03:17

So I'm just going to use the Address data, I'm just going to move it straight out to the user
area.

00:03:23

And if you do that, make sure you watch for that little dot pattern to appear. Because if you
move it to the user area and you see that dot pattern appear,

00:03:29

then you know that you are actually dropping it really onto the user area and not in a group box
or any container that is showing at that spot.

00:03:35

Because if there is a group box, for example, that group box would only have the dotted
pattern.

00:03:42

But, if you see the dotted pattern cover pretty much the entire blue area of the screen, then
you're dropping down the user area.

00:03:46

We're going to do that right now, and as you can see, the backend is actually processing this.
The data is being moved out of the tab,

00:03:55

and the rendering is happening as we speak. Now we don't need the Location tab anymore
after this.

00:04:02

But we're going to hide that once we are on a General tab. We are going to save and exit here.

00:04:07

And you can see that the data shows in the user areas so we have successfully moved
elements from the Location tab out to the user area.

00:04:16

Now, we are looking at the General tab. We are switching tabs and, as you can see, the
Address information is actually still rendered on the screen.

00:04:23

So, the information is available on the Location, there it was originally. Location tab is now
available to us even if we are on the General tab.

00:04:32

But in order to clean this up a bit, we are going to move it into the General tab. So we're going
to go back in the edit mode and we're going to grab our Address information

00:04:38

and going to move that over. And then, if you realize it takes a slight bit longer for the editor to
come up when we're doing tab merging,

00:04:47

but just because it actually has to process that move of controls and make sure that the data is
actually applied on the right control.

00:04:55

So, what we do is we grab the Address information and we're going to move that back into the
tab.

00:05:01

And there it's again very important that you look for the dot pattern to appear and to cover the
entire content of that tab, not only one of those specific groups.

00:05:10

So if you move too close in this case to the Manufacturer data, what's going to happen is that

15

the dot pattern will only cover that

00:05:16

and you would be dropping it into that area. So you see, if I move this up, the dot pattern only
appears inside the Manufacturer data group box.

00:05:26

And we don't want that to happen because otherwise it would turn into a scrolling box and it
would not be the pretty experience we are looking for.

00:05:33

So, we're going to move this lower now and drop it onto the tab strip. I'm going to release it
here.

00:05:42

And the backend is again processing that request. And you see that the data is actually
showing up at the right spot, right there.

00:05:50

What we want to do now is we want to hide the content of the Location tab, no, the Location
tab itself.

00:05:59

So we're going to select Location tab here and hit the Hide option, and the tab is gone. We're
going to do Save and Exit.

00:06:05

And if everything works as expected, we will see the Address data showing up on the General
tab and we don't see the Location tab anymore.

00:06:12

So, in doing that we have streamlined the experience, and it is much easier to select the
elements and I don't have to manually switch between the tabs anymore.

00:06:21

So I saved myself a click. Now I still have to scroll but I want to fix that in a second by actually
getting rid of the entire tab container.

00:06:28

Now, one important question that always comes up when we look at tab merging is that you
see that the Address data shows up slightly after the rest of the data.

00:06:39

And I can show you why that is. I'm going to go into the Chrome developer tools. They come
up if you hit F12.

00:06:46

And what I'm going to do now, I'm going to switch back to our original screen with all the
element on it.

00:06:53

I'm going to look at the data that is being processed. So as you can see, there is a request
coming from the backend.

00:07:01

We receive 343 KB of data in 695 milliseconds. And we see a single request.

00:07:11

If we do our tabMerging flavor and go back here, we see that there are actually two new
requests added.

00:07:19

One is for 344 KB and takes 753 milliseconds. So that is the flavor information plus the original
screen being sent.

00:07:30

Additionally we see a second request that is happening right after, where we're getting 44.6 KB
from the backend in another 700 milliseconds, 690 specifically in this case.

00:07:39

So what is happening here is that first we get the information for this specific flavor that tells us
which tabs are hidden,

00:07:48

and then it also tells us the Address data has to be shown on the General tab.

00:07:52

And what happens during rendering time is that the system identifies that it has to grab the
Address data from the backend

16

00:07:59

and trigger a tabs switch there, grab the data and come back. And that's what these 44.6 KB
are,

00:08:07

the switch of the tab and grabbing that information. So when you do a tab merge, always be
conscious of the amount of data you're moving between tabs.

00:08:15

So if you have, for example, a very large table, then it will take a quite a bit of time to serialize
all that data, move it over and then re-render it.

00:08:25

So, it helps a lot if you use table variants or can avoid moving tables altogether.

00:08:29

The other important prerequisites for tab merging to work is that you need to have the ability to
switch between the tabs freely.

00:08:36

And there must not be any pop-ups coming up, any confirmation dialogues, that there is a
specific sequence in which the tabs need to be executed,

00:08:46

that is not supported either. So the display transactions usually work very well; in the change
or create transactions you have to be very careful

00:08:58

to look for those specific cases and make sure that your prerequisites are met so that the tab
merging algorithm can actually kick in and work successfully.

00:09:06

So, now we've been able to merge tabs and have moved the content between two tabs and
have seen the amount of data that actually creates.

00:09:15

Now, what we're going to do is we're going to do another little more aggressive demo.

00:09:19

And we're going to create a new flavor, and I'm going to call that noTabs. That is openSAP 2.4
Unit, and I say Create.

00:09:32

And we're going to create this flavor based on our original screens, we're going to get all our
hidden tabs back.

00:09:38

And now I can start moving elements between the tabs. So what I'm going to do is I'm going to
grab the Manufacturer data,

00:09:46

I'm going to move that just to the user area, right here. And I'm going to go over and do save
and exit and grab the Address information from Location tab.

00:10:02

Switch over to the Location tab and say Edit Flavor. And I'm just going to go and grab the
Address information

00:10:15

and put that on the screen directly under the user area.

00:10:25

You see that I'm going to move that up here and just let it sit there.

00:10:37

And with that I am going to wait for the tab merge kick in again and then do save and exit.

00:10:44

I 'm going to switch over to the Organization tab, and from here we're going to grab the
responsibilities.

00:10:55

And I say Edit Flavor, and then you see that all the different elements from the other two tabs
are actually rendering on the screen and we can move them and position them as you have
seen.

00:11:07

And what we are interested in is the Responsibilities from right there.

00:11:17

So, we are going to go and grab that, move that right here underneath the Address.

17

00:11:23

Then again you have to make sure that you are not dropping it accidently in the Address data
group box

00:11:29

but that you are putting it on the user area. So always watch for those little dots.

00:11:36

What I'm going to do is release it on the user area. And finally we're going to select our
container here,

00:11:45

and we're going to say Hide. We're going to remove the entire tab strip container, it is entirely
gone.

00:11:50

I'm going to grab the Manufacturer data and I want to move that right here to the left.

00:11:58

I position it right where the tab strip used to be. Now we're going to do save and exit.

00:12:08

And as you can see, we have now created a flavor that has the information from all these
different tabs showing up simultaneously on the screen.

00:12:15

So, there is no need for me to ever switched tabs anymore. I have all the data at my fingertips.

00:12:20

And I can now spend some time doing the visual clean-up on this. But what I want to show you
is,

00:12:26

we can have another look at the amount of data being transferred. And we do the same thing
we did before.

00:12:32

I'm going to open the Chrome developer tools by pressing F12 and then I'm going to go and
switch flavors.

00:12:38

I'm going to switch to our original screen flavor, and we are watching the data that is coming
from the backend.

00:12:44

And you see its 340 KB of data in 1.17 seconds. Now I'm going to switch back to our noTabs
flavor,

00:12:55

and we can see that there are actually two requests happening. The first one was for 301 KB
of data,

00:13:03

the second one is for 72 KB of data. So in general, we did two requests. They took a little
longer than the regular screen coming up, but not a whole lot.

00:13:14

We've got the data from the different tabs and our end users don't have to click between them.

00:13:18

If you watch very carefully as this flavor switch happens, you might have realized that these
little boxes are actually rendering at different times.

00:13:26

So based on that information you can see which data is actually pulled from the backend in
this second request.

00:13:34

So if you take this over now and switch back, just watch very carefully how these group boxes
appear.

00:13:41

As you can see some of the data is there right away and the other two data points are being
added just a slight bit later.

00:13:48

And that is exactly how tab merging works. And with that, let me go back to our slide deck and
talk about how this works.

00:13:58

So, we've talked about hiding unused tabs, we've talked about how we can combine
information from multiple tabs, and how we can remove tabs whenever possible.

18

00:14:06

What's very important is that this only works if you can freely move between the tabs on a
single screen. So this is not work across transactions or across screens.

00:14:15

If you have the data on a screen and you have a tab container and you can switch between the
tabs without any pop-ups coming up, then you are golden.

00:14:23

If you have a scenario in which there is data coming up, pop-ups where you actually go to a
different transaction in between, we can't help you with just doing drag and drop.

00:14:32

We have scripting for that, and there is demos and units on this as well.

00:14:39

So with that, that was the summary of tab merging and the next unit is about how to get
additional information if you run into issues, how to get help.

00:14:46

Peter is going to cover that next. Thank you.

19

WEEK 2, UNIT 5
00:00:09

Hello and welcome back to the openSAP course on SAP Screen Personas. We are in Week 2,
Unit 5 and today we are going to talk about Getting Help.

00:00:21

In the course of simplifying the screens you may find that you run into difficulty, you need some
additional information about how to do something

00:00:29

or you get stuck somewhere, and that's okay, and that is part of the process.

00:00:34

The good news is there are many ways to get information from inside of SAP Screen
Personas.

00:00:41

We've got an extensive Wiki and Knowledge Base with either detailed articles on specific
items, we've got video tutorials,

00:00:51

we've got a lot of information on SCN and, if all of that doesn't work, you may need to report an
incident

00:00:59

And what I'm going to do in today's session is walk you through each of those, so you'll know
where to find the information and navigate all these systems.

00:01:09

So the first thing is: If you are in the product you can always access help. And, you may think it
is very obvious and you just click on the question mark here,

00:01:21

but that is, in fact, incorrect. This is the Help related to the GUI that you are in.

00:01:27

If you want help for SAP Screen Personas, you need to open the flavor bar and here is our
Help button.

00:01:35

When you click on that, we've got a Quick Start Guide and an Online Help Guide. So let's take
a look at what you are going to find in each of those.

00:01:42

When you go to the Quick Start Guide we've got help on a huge variety of topics,

00:01:48

and each of these, Migration, Scripting and so on. So, we choose something such as Scripting.
When we go in, you'll see there is a lot of information in here:

00:02:00

How-to videos for basic If statements, Copy and Paste, Sales Order Lookup,

00:02:09

all the typical things that you do in the course of simplifying a flavor, and that is all accessible
through that Help information up top.

00:02:19

And there is a number of topics there, as you can see, if we go back, we have some
introductory things,

00:02:29

tables, theming, many of the topics that you are hearing about in this course. If you forget what
you have learned, you can come back and retake the course

00:02:37

or you can go to a very focused topic with a tutorial video inside of the product itself.

00:02:46

And if we go back here, the second link, to the Online Help Guide, takes you into our
Knowledge Base.

00:02:54

And if you click on the Knowledge Base, you will see, there is a number of very specific articles
on different topics that might interest you:

00:03:04

Debugging options, function calls, scripting, and one I'd really like to highlight is the Pre and
post installation Checklist.

00:03:13

This is one of the most critical areas for getting started properly with Screen Personas.

20

00:03:19

And you 'll see here, we 've got a compatibility matrix for you that talks about which kernels,
which bases you need in order to move forward,

00:03:30

and we've got some pre-installation steps related to the kernel, the notes that you need to
install, the key motive notes that list everything important.

00:03:41

And this is on place you'll always want to go to. Before you move forward you want to make
sure everything is working smoothly.

00:03:47

And we also have a health check built into the tool that will tell you that everything is configured
correctly.

00:03:59

If you can't find what you need from the Wiki or the Knowledge Base, there is always SCN. So
let's take a look at that.

00:04:06

And we've got a Getting Started page on SCN. I'll show where to find that if you don't have it
bookmarked.

00:04:14

And this has lots of information about Screen Personas 2, Screen Personas 3. We always
keep it up to date.

00:04:22

You'll see demo videos, training content, a lot of information about the product, as we
introduce new releases, new service packs and so on.

00:04:32

All of that is going to be here on SCN. Since SAP Screen Personas is built into the WebGUI,
all of our information is in the SAP GUI space.

00:04:45

So, if you navigate to SAP Community Network and go to the SAP GUI space, you'll find all
things on Screen Personas in there.

00:04:55

And if you wanted to find the Getting Started information, if you just go to Content and type
'getting started',

00:05:05

the Screen Personas page will generally appear at the top of the list. This is also a great place
to look for information if you have questions about something you're doing.

00:05:17

Maybe you are trying to do something on transaction xk01, you can type that in there, and
you'll see a discussion how to simplify transaction on that.

00:05:27

And really anything you are interested in, scripting is another very popular topic, and you can
see we've got some block posts:

00:05:36

Calling RFCs from a script, Data caching, all kinds of information. So all you need to do is go to
the search box and inside the Content tab,

00:05:45

and you should be able to navigate very quickly and easily to get there. If for some reason you
forget where is this thing on SCN,

00:05:55

you can also go to sapscreenpersonas.com, which will take you to a page inside of SAP
Community Network,

00:06:08

and these Quick Links here will take you to either the SAP GUI page right at that top level that
we just saw,

00:06:15

or the technical resource page which was where all that Getting Started content is based.

00:06:24

If you've looked for help in the Wiki and can't find what you need, if you've looked on SCN and
you are stuck with the product,

00:06:33

then it might be sometime that's time to open an incident report and tell us what's wrong, so we

21

can help you.

00:06:40

The first thing to do is make sure if the problem is with SAP Screen Personas or if it's not.

00:06:52

So a lot of times what we'll recommend you is try the transaction in the WebGUI without SAP
Screen Personas.

00:07:00

Why would we suggest to do that? Well, since SAP Screen Personas is built into the WebGUI,
these things are very tightly linked.

00:07:07

We've got the Personas Add-on, we've got the kernel, and these pieces need to work together.

00:07:12

And they do work together but it's important to know which component is causing you trouble.

00:07:19

So if you try the transaction in the WebGUI and it doesn't work, then you figured out this is
something with rendering in the WebGUI and it doesn't have anything to do with Screen
Personas.

00:07:29

If it works in the WebGUI and it doesn't work in Screen Personas, that helps us isolate what
the problem is. So we can help you sooner.

00:07:37

If you do need to open an incident, that is something you are going to do through our Support
Portal, just support.sap.com,

00:07:46

and you would click on Report an Incident over here. Before you do that there's certain
information that we need from you,

00:07:56

and I'm going to show you how to find that. We obviously need to know what are you trying to
do. So, please describe the problem carefully:

00:08:04

If you've got screenshots, what do you trying to do, what is the expected behavior and what
are you seeing instead.

00:08:12

And also we, of course, need to know what version of the product do you run.

00:08:18

And the way to find that is over here in System, Status, and there is a couple of things we'll
need to know.

00:08:26

One is, what version are you running, what is the basis. And you can find that by clicking on
this component information.

00:08:35

So here, we're on the 740 basis, service pack 5. In addition, we always need to know what
version of the kernel you are running,

00:08:46

and that is also on the same status menu, but down here. So I click on Kernel Information and
will get a pop-up.

00:08:54

Here we are running 742, patch level 36. When we say, please update the kernel, this is
generally what's going to increment as it goes up: 36, 37,

00:09:07

and when we jump to a new number like 100 or 200, that is a stack kernel that's undergone
special quality testing.

00:09:16

We typically will do that a couple of times a year to make sure that all the changes are working
well together, and then we 've got a stable platform

00:09:24

which we can build on going forward. So again, we need the basis that you are on, the kernel,
what patch level, screen shots,

00:09:37

and then it's also important to include the component. So it gets routed to the correct

22

organization.
00:09:43

If it is a problem with SAP Screen Personas, you need to include BC-PER, Basis ComponentPersonas, that's what is that stands for, so BC-PER.

00:09:59

And then that will go to the support team, and we can get you going right away. So we talked
about the Wiki, SCN and how to report an incident.

00:10:16

The information you need is inside the System, Status button.

00:10:22

So, wrapping up Unit 5: We talked about how to access the Help from inside of Screen
Personas.

00:10:32

Always click the P to get the pull-down and then click on the Help button there. We've got the
Knowledge Base of very targeted articles as well as all the tutorials.

00:10:42

We 've got a big source of information on SCN, a lot of discussions. You can open a question
there and have other experts from other companies

00:10:52

give you insights on what they've done and, if all else fails, you can open an incident through
support.sap.com.

00:10:59

And make sure you include the component BC-PER as well as what version you are running of
both, SAP and the kernel.

00:11:09

That concludes Week 2. Next week we're going to talk about scripting. So up until now we've
done a lot of modifications to the screen:

00:11:21

Themes, simplifying transactions, merging information across tabs. We still haven't done any
automation through scripting.

00:11:28

That is where the real power lies and that's what we're going to start in the next week. Thank
you very much.

23

www.sap.com

2015 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://www.sap.com/corporate-en/legal/copyright/index.epx#trademark 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 SEs 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.