Demonstration: Theme management in the web-based application - SAP ERP Tutorial

at a demo of the theme management transaction in my SuccessFactors demo system. So firstly, I'm logged in as a System Administrator so obviously a System Administrator is the role that will actually make changes to your theme if that is required at all. Let's navigate over to the Theme Management transaction so I'm just going to go over to the Theme Manager if you choose to add one on there as well. So what's actually nice about this is, SAP ships with a number of pre configured themes for you to use so you don't have to start from scratch you can just start from one of the existing ones, copy that, make some changes to it and save it with a new name as well So here's an example, for example, an SAP template, if you will, of a theme. It's not currently in use and it's not visible to anyone and there's the short description of what it looks like. But then again, I can also go ahead and just quickly do a try-out to that just to take a look at what that theme looks like when I activate it temporarily on my system. So that's the color scheme, you'll see the logo is changed at the top as well so the logo is actually included in that theme management and that's why we'll configure that and we'll see that in a second when we can figure the theme itself. I'll just revert back again and that's also next to it where you can see the option to copy or duplicate an existing theme and make some changes of your own going forward. Now at the moment, you can see my current logo at the top of the screen there, is Generic Company and I've got a white heading at the back. And also over here, the background color's slightly gray and that's all being configured inside my theme. So let's drill down a bit deeper into my theme at the moment so saved as Generic Company. From what we can see on the left-hand side here is everything about the theme and that's reflected on the right. So all the changes I make to these little transactions, sub-components, if you will, on the left So I can just quickly confirm that the change I made is actually the change I expect to see in the live system. So firstly, of course, I have to give that theme a name and then the system assigns a theme identifier, a unique identifier for that theme and then we drill down deeper into each of these little sections so firstly, a quick theme means that if I have a accent color, for example, an html code that's used on a corporate website I can input that color over here and hit the generate button and that would generate a theme for me automatically based on that accent color, from when I can actually go and fine tune all of the elements on that screen. I just want to go down a little bit deeper and look at the fine tuning aspects. Now, as you'll see over here, we have options to change the background, So for example, if I want to upload a logo, I need to make sure that I have an uploaded logo and at the moment, you can see my logo is already uploaded there. So we'll create a new theme in a minute and I'll show you what that looks like when you actually do it yourself but we can decide where that logo sits at the top of the page and all of the changes like I said if I make a change on the left, And what's great about this as well, is it just tells you where you are, So for example, we might be looking at portlets and there's a portlet there so that's the little So there's a little reference and for that portlet, I can then configure Okay, so that's an example of what an existing theme might look like so let's go ahead and just jump back to Manage Themes so let's go ahead and just jump back to Manage Themes and then we're going to create a new one just to show you a quick feature of how we might show you a quick feature of how we might generate a new theme in the system. generate a new theme in the system. Of course we have to type in the name Of course we have to type in the name so this will be, "new theme" so let's just call that, so this will be, "new theme" so let's just call that, "new theme" and then what we'll do is we'll say, "new theme" and then what we'll do is we'll say, a theme description will be there a theme description will be there if we want to add something if we want to add something and then automatically this is my default setting and then automatically this is my default setting or my default color scheme and theme. or my default color scheme and theme. And you can see the best run logo from SAP is already incorporated there. is already incorporated there. So if I want to go ahead and go and choose or if I can find the html code of my corporate website, I can go ahead and say, okay, we've got a it more of a green color, that's the type of accent color we have for our corporate website. Want to go ahead and just generate a theme based on that. And then everything else, from the buttons to the portlets to the table headers, will be adjusted automatically for that. will be adjusted automatically for that. And based on that accent theme. And that's a good starting point, for you to go ahead then and make some fine tuning changes. So for example, if I navigate down here, I can have a look at the header background so that might be the first thing I change so that might be the first thing I change so the header background obviously, so the header background obviously, is this little section right at the top. And then just to say, okay, it's currently on a solid color, the solid color is a bit of an off gray the solid color is a bit of an off gray but I might want to just change that slightly to but I might want to just change that slightly to a bit more white so we just have a bit more a bit more white so we just have a bit more contrast with our logo and then furthermore, contrast with our logo and then furthermore, might going to go slightly down the screen might going to go slightly down the screen and then this time, go and upload a logo and then this time, go and upload a logo from my desktop somewhere. from my desktop somewhere. In this case, I've just saved something quickly there. In this case, I've just saved something quickly there. A little logo on my desktop. A little logo on my desktop. I'll just choose that one I'll just choose that one and then choose to upload that as well and then choose to upload that as well and that's how easy it is to upload your logo. and that's how easy it is to upload your logo. And if I'm not happy with my logo on the right-hand side And if I'm not happy with my logo on the right-hand side of the page, I can just move it to the left of the page, I can just move it to the left and then everything shifts across and then everything shifts across and you can just then uniformly and you can just then uniformly try to match this to your existing corporate website. try to match this to your existing corporate website. And all of the other settings, obviously we don't have And all of the other settings, obviously we don't have time to go through every single setting time to go through every single setting but each of these can be tweaked slightly, but each of these can be tweaked slightly, for example, if we look at the tables for example, if we look at the tables and you look at, firstly, the table header text color, and you look at, firstly, the table header text color, at the moment that is a darker color so I'll just make that white as well so I'll just make that white as well and let that pop over here on the right-hand side, and let that pop over here on the right-hand side, you'll see the header, sorry, the table header text color you'll see the header, sorry, the table header text color that's been updated as well that's been updated as well and like I mentioned, you can go through each of these and like I mentioned, you can go through each of these elements and really fine tune exactly what (stutters) elements and really fine tune exactly what (stutters) you need that theme to look like you need that theme to look like before you save it and then choose to actually expose before you save it and then choose to actually expose that to your user set. that to your user set. So you know, there's plenty of time you can actually So you know, there's plenty of time you can actually spend on here to fine tune this without any user ever spend on here to fine tune this without any user ever seeing that and when you're ready, seeing that and when you're ready, you can actually publish that theme to everyone. And the next time someone logs in, And the next time someone logs in, they'll see the new updated theme that you've created. they'll see the new updated theme that you've created. Okay, so that's just the summary of the Theme Manager, Okay, so that's just the summary of the Theme Manager, just a recap once again; we can use the existing theme, just a recap once again; we can use the existing theme, so I'm just going to cancel out of here quickly so I'm just going to cancel out of here quickly and go back to the Theme Manager main screen. and go back to the Theme Manager main screen. I cancel my changes. I cancel my changes. Firstly, of course, there are a number of themes that Firstly, of course, there are a number of themes that ship with the system, usually with your instance ship with the system, usually with your instance and you can start with that and then fine tune and you can start with that and then fine tune your theme going forward your theme going forward and like I said, then you would choose to actually and like I said, then you would choose to actually publish that theme and the minute you click on publish that theme and the minute you click on Default there and you click on Save right at the bottom, Default there and you click on Save right at the bottom, that will publish that theme for everyone to see that will publish that theme for everyone to see based upon that visibility that you've chosen here based upon that visibility that you've chosen here and it could be a group of employees, it could be everyone and you know, it could be everyone and you know, just a simple theme for everyone in your organization. just a simple theme for everyone in your organization. But that will be the easy way you do that. But that will be the easy way you do that. And of course, we create a new theme quite easily And of course, we create a new theme quite easily by duplicating existing one or starting from scratch by duplicating existing one or starting from scratch and also by generating a whole theme and also by generating a whole theme based on an accent color based on an accent color so that's a nice quick starting point. so that's a nice quick starting point. Uploading a logo, of course, there are some logo Uploading a logo, of course, there are some logo restrictions on the size of the logo restrictions on the size of the logo you can actually upload so you you can actually upload so you just need to make sure your logo size is correct just need to make sure your logo size is correct and the system will warn you if it's not. and the system will warn you if it's not. And then you can upload that theme and off you go. And then you can upload that theme and off you go. And if you need to share themes between instances, like I said, usually you would do all of your testing like I said, usually you would do all of your testing of your theme in your development system, of your theme in your development system, making adjustments and changes there making adjustments and changes there and then when you're ready, you'll copy that theme across and then when you're ready, you'll copy that theme across and paste that into your production environment and paste that into your production environment to make sure that you have all the changes up to date to make sure that you have all the changes up to date but pre-tested in your development environment. but pre-tested in your development environment.