SAP UI5 Basics Part 2 – CSS
Welcome to the second part of my blog series about the foundations of SAP UI5. These blogs are targeted at experienced ABAP developers and SAP GUI experts. They should support and motivate you to learn the basics of web development to guarantee an easy switch to SAP UI5 development.
In the last blog we created a simple website in a text editor and learned about the basics of HTML. With these bascis it will be easy for you to expand your knowledge. In the not so distant future you will be able to develop much more complex websites.
One thing that is really important today is design and the standard elements of HTML simply do not look good. And they certainly do not fit your corporate design. The question is: how can we implement our own design to make our website unique? The answer is the topic of this blog post: CSS. CSS stands for Cascading Style Sheets. This technology is used to format the HTML elements.The principal of CSS is rather easy. You define a selector and a declaration. The selector “selects” the HTML elements that will be changed by a layout. You surely remember the paragraph element
from the first blog post. A selector for this element could look like this:
The code above defines the following rule: every paragraph of your website has the font size of 12 and font color red. But what can we do, if we want to treat paragraphs differently? This brings classes and IDs onto the table. You can assign IDs to your HTML elements.
As you can see here the paragraph has the unique ID “footer”. Now you can adress this paragraph by ist ID. Which format makes sense for a footer? Most of the time small fonts in a light grey color are used.Often times the text is centered and of course it is located at the bottom of the page.
IDs are adressed with a “#”. The following rule defines that the footer is small, grey, centered and at the bottom of the website:
#footer <
font-size : 12 px ;
color : gray ;
text-align : center ;
padding-top : 90 % ;
The result looks like this:
CSS can be inserted directly into HTML with the tag. It must be part of the header or a reference to an external file. This can be done using the tag :
You can also define classes. These classes can be assigned to several objects. The attribute “class” of an HTML element can be used here.
Classes are referenced in CSS with a leading “.”.
.information <
font-size : 12 px ;
color : blue ;
Another possibility to define CSS is inline in the HTML element definition. Use the style attribute here:
Now a question arises: What happens if you have defined a rule in your CSS file but you overwrite it inline? Then the CSS hierarchy decides:
- universal selector
- this selector applies to every element
- this selector applies to elements of a certain type, like
- this selector applies to the element #ID
- this selector applies to all elements of the class .CLASS
- this selector is like type selector but it is only valid if the element is inside the correct elements
The following rule applies: if all selectors are the same then the last defined rule is valid.
#footer <
font-size : 12 px ;
color : gray ;
text-align : center ;
padding-top : 90 % ;.adress <
font-size : 9 px ;
color : gray ;Downloading and deploy ESS and MSS
To deploy ESS and MSS on Portal 7.0 and ERP 2005 (also called ERP 6.0 or ECC 6.0), you totally need 6 files.
Download
The Business Packages for ESS/MSS are no more downloadable from SDN Content Portfolio. You need a SMP Login id to download the Business Packages and application components from Service Marketplace. Go to the address: http://service.sap.com/swdc1. BP for ESS : Click on Download -> Support Packages and Patches -> Entry by Application Group -> SAP Application Components -> SAP ERP -> SAP ERP 6.0 -> Entry by Component -> Portal Content -> BP ERP05 ESS 1.0 -> Click it and select #OS independent —> Select the SCA file depending on your SP Level
2. BP for MSS : Click on Download -> Support Packages and Patches -> Entry by Application Group -> SAP Application Components -> SAP ERP -> SAP ERP 6.0 -> Entry by Component -> Portal Content -> BP ERP05 MSS 1.0 -> Click it and select #OS independent -> Select the SCA file depending on your SP Level
For actual Web Dynpro applications Click on Download ->Support Packages and Patches -> Entry by Application Group -> SAP Application Components -> SAP ERP -> SAP ERP 6.0 -> Entry by Component -> SAP XSS (Self Services)-> Click it and select #OS independent -> Select the SCA file depending on your SP Level
Then download the following files:
1. SAP ESS 600
2. SAP MSS 600
3. SAP PCUI_GP 600
4. SAP ASR 600
5. SAP PSS 600
6. IS-HER-CSS 600It is very important that all the files you download have the same Support Package level.
Deploy
You deploy all the files in SDM. Start by deploying the SAP PCUI_GP 600. Then you can deploy the rest in any order you want.What if it fails ?
Some times the SDM fails to deploy, and a error message is written out. If there are no specific message, then open the log folder on SDM and analyze it for details. Often it is enough to restart the deployment from where it failed, but look for detailed information in the log file.Upgrade
If you have deployed all the files in Support Package 8, and later the SP 9 is released. There is no need for undeploying the Self Service content. Just add the new files as a new deployment and start the process.> ERP 6.0 EHP 3
If your ECC system is ERP 6.0 and EHP 3 and you are planning to use ESS and MSS in your Enterprise Portal 7.0 .
This is the latest information.
Download the Business Package for ESS and MSS under the below location (ESS 1.31 and MSS 1.31)
Support Packages and Patches» SAP Application Components» SAP ERP» SAP ERP ENHANCE PACKAGE» SAP ENH PACK 3 FOR SAP ERP 6.0″ Entry by Component» Portal Content
BP ERP05 MSS 1.31
BP ERP05 ESS 1.31Depending upon the SP level.
For application components or Webdynpro components ,navigate to
Support Packages and Patches» SAP Application Components» SAP ERP» SAP ERP ENHANCE PACKAGE» SAP ENH PACK 3 FOR SAP ERP 6.0″ Entry by Component» SAP XSS (Self Services)
And download these components
SAP ESS 603
SAP PCUI_GP 603
IS FS ICM APP 603Important :Here you will not find the other components of release 600, so you can go ahead with deploying the other packages from the below location (which is of release 600)
Support Packages and Patches -> Entry by Application Group -> SAP Application Components -> SAP ERP -> SAP ERP 6.0 -> Entry by Component -> SAP XSS
> ERP 6.0 EHP 4
To download the latest Portal Business Packages for ESS and MSS, please go to:
Support Packages and Patches -> SAP Application Components -> SAP ERP -> SAP ERP ENHANCE PACKAGE -> EHP4 FOR SAP ERP 6.0 -> Entry by Component ->Portal Content Self Services
Here you will find BP ERP05 ESS 1.41 and BP ERP05 MSS 1.41. Please download latest patches.
For XSS component, the information presented above in ERP 6.0 EHP3 section is still valid. You can download software from:
Support Packages and Patches -> SAP Application Components -> SAP ERP -> SAP ERP ENHANCE PACKAGE -> EHP4 FOR SAP ERP 6.0 -> Entry by Component -> SAP XSS (Self Services)
Adapting the standard CSS-styles for corporate styling (1/2)
The following document is based on examples created in SAP Design Studio 1.6, but the same methodology can be applied to Lumira Designer as well.
When an application designer creates a new application, certain objects are created by the tool and some common files are used. When generated once the designer saves the report, an application in Design Studio basically is an HTML5-page with standard SAP CSS-files and if applicable your own created CSS-file.
Sometimes the standard SAP CSS does not meet the customer’s layout requirements. Most large companies want to work with a customized layout throughout the entire business. In the beginning when you work with Design Studio, you might get lost in all the CSS possibilities. There is the standard CSS styling which is applied to a component, but also the possibility to add a custom CSS class or apply inline CSS styling to a component.
To use the custom CSS class-method, you need to link the Design Studio report to a customized CSS file. Inside this custom CSS-file it is possible to overrule the standard SAP stylesheet to provide a customer specific layout that can be applied on every separate dashboard.
Concluding, it is possible to create a customer-specific styling template which is reusable in the complete dashboard solution, for most of the Design Studio components. In the following articles, I will explain 2 basic CSS techniques which can be used to customize the layout. To close the articles, I will provide some examples on how to overrule the standard SAP CSS layout for Design Studio components.
CSS styling/CSS-classes
Changing the CSS-style of a specific component SAP Design Studio
It is easy to set styling in the properties of the component itself. This is basically the same as in-line CSS styling in HTML. For example: changing the colour of a text from black to white, as illustrated below.
Figure 1: CSS Style of a text component – before change
Figure 2: CSS Style of a text component – after change
It is also possible to add more than one line in the inline CSS Style. You can add as much inline CSS as is necessary, as illustrated below.
Figure 3: CSS style of a text component – Add as much inline CSS as needed
Adding a CSS class in SAP Design Studio
To use a customized CSS class, you need to define the class in a custom CSS files. There are 2 ways of doing so:
- Add the CSS class to the component(s) first and afterwards add and style the CSS class in the custom CSS-file
- Add the CSS class in the custom CSS-file and add if to the component(s) afterwards.
It does not really matter which method you choose, if the CSS class exists in your custom CSS-file and is applied to the appropriate component(s).
Figure 4: CSS Class of a text component – before change
Adding the custom CSS to the application
First the custom CSS must be created on the BI Platform before you can start using it. Adding a custom CSS can easily be done as follows:
Figure 5: Adding a custom CSS – APPLICATION-object properties
- In the properties of the APPLICATION-object, you have a property called “Custom CSS”. After clicking on the icon inside the property, a folder-structure of your BI platform will open.
Figure 6: Adding a custom CSS – BI Platform folder structure
- For demo purposes, I will add a custom CSS-file in my “Favorites”-folder. If you want the custom CSS file to be used for multiple users, store it in a common folder. In the dialog box, there are 5 actions available.
- Add a folder
- Rename a folder
- Delete a folder
- Upload a local CSS-file
- Add a CSS-file
- To create a new file, you click on the action and the system will ask a name for the custom CSS-file which will be stored in the folder you are currently located in.
Figure 7: Adding a custom CSS – Provide name for custom CSS
- After opening, the custom CSS-file is immediately customizable and linked to the application you are currently working on.
Figure 8: Adding a custom CSS – APPLICATION-object properties after adding
Opening the custom CSS
You can open the custom CSS file quickly by pressing the button in the ribbon.
Figure 9: Opening the custom CSS file for the application
Adding the CSS class with its styling
In the example below, the effects of creating the “CSS_TXT_TITLE_BIG”-class and adding it to a text component are illustrated. Do not forget to save the custom CSS-file to be able to see the changes in Design Studio and when you run the application.
Figure 10: Adding the CSS class and its styling to the custom CSS
Figure 11: Result of adding a CSS class to a text component
You can find more information about overwriting the CSS of the standard SAP classes by clicking here.
Add a folder
Rename a folder
Delete a folder
Upload a local CSS-file
Add a CSS-file
action and the system will ask a name for the custom CSS-file which will be stored in the folder you are currently located in.
