Standard XStep (SXS) Library
02 Changing the Look and Feel
PUBLIC
TABLE OF CONTENTS
1 GENERAL REMARKS ...................................................................................................................... 3
1.1 No Maintenance and Support for SXS Library Content by SAP ................................................. 3
1.2 Version History ................................................................................................................................ 3
1.3 Recommendations for Changing XSL and CSS ........................................................................... 3
2 INTRODUCTION ............................................................................................................................... 3
3 STRUCTURE OF THIS SXS FOLDER ............................................................................................. 3
4 CHANGING THE 'LOOK AND FEEL' ............................................................................................... 4
4.1 How to create your own XSL and CSS sheet (for screen display) ............................................. 4
4.2 SAP Standard Stylesheets for Browser-Based PI Sheets and Electronic Work Instructions . 5
4.3 SXS: Different PI Sheet Layout (XSL) (02-PI-01) ........................................................................... 6
4.4 New SXS: Display Phase Short Text (02-PI-02) ............................................................................ 6
4.5 New SXS: Display Phase Long Text (02-PI-03) ............................................................................. 7
4.6 New SXS: Different Work Ins. Lay. (XSL) (02-PP-01) ................................................................... 7
4.7 New SXS: Display Operation Short Text (02-PP-02) .................................................................... 8
4.8 New SXS: Display Operation Long Text (02-PP-02) ..................................................................... 9
4.9 SXS: Change PI Sheet layout via CSS manipulation (02-01)....................................................... 9
4.9.1 Cascading Style Sheets (CSS) ....................................................................................................... 9
4.9.2 SXS Building Blocks Details......................................................................................................... 10
2
This document provides an insight about changing the CSS and XSL content that is used to display browser-
based PI Sheets and electronic work instructions. Changes and updates of the SXS library are published in
the PDF document that is attached to SAP Note 2435788.
1 GENERAL REMARKS
1.1 No Maintenance and Support for SXS Library Content by SAP
Please note that the content of the SXS Library is not shipped as part of the standard SAP content.
Therefore, no maintenance and support of the SXS library content is done by SAP.
1.2 Version History
The following table contains the history of the document versions:
Document Version Release Date Content Changes
1.0 2018-03-23 Initial version
1.3 Recommendations for Changing XSL and CSS
Before starting to create your own custom stylesheets, please read the corresponding chapter of the SAP
Library (Layout Definition for PI Sheets and Cockpits)
Use the SAP standard XSL and CSS style sheets as copying templates to create your own style sheets. Do
not directly change the SAP standard style sheets!
Assign your own XSL style sheet by evaluation of the PPPI_LAYOUT characteristic in the process
instruction. Check that the assigned XSL layout is stored in the web repository (transaction SMW0).
If you want to change formatting, then you could change the copied CSS style sheet also.
2 INTRODUCTION
These SXS building blocks demonstrate how the UI appearance of browser-based PI Sheets and electronic
work instructions can be adjusted to fit custom requirements.
3 STRUCTURE OF THIS SXS FOLDER
SXS building blocks that cover the same topic are included in this SXS folder. The UI appearance of
browser-based PI Sheets and electronic work instructions are slightly different. Therefore, the UI changes for
each application are grouped in a separate subfolder (SXS for PI Sheets (PP-PI) and SXS for Work
Instructions (PP-SFC)). Currently, the following SXS building blocks are included:
Last
SXS Building Block Name Description of Building Block
Update
02-PI-01 Different PI Sheet Layout (XSL) Replace SAP Standard Layout 2018-03-23
NEW! 02-PI-02 Display Phase Short Text Display Phase Short Text in Phase Container 2018-03-23
NEW! 02-PI-03 Display Phase Long Text Long Text as Tooltip for Labeling the Phase 2018-03-23
Tray
NEW! 02-PP-01 Different Work Ins. Lay. Replace SAP Standard Layout 2018-03-23
(XSL)
3
Last
SXS Building Block Name Description of Building Block
Update
NEW! 02-PP-02 Display Operation Short Displays Operation Short Text in Operation 2018-03-23
Text Container
NEW! 02-PP-03 Display Operation Long Long Text as Tooltip for Labeling the 2018-03-23
Text Operation Tray
02-01 Change Layout per CSS Vary Colors of Input Fields etc. 2018-03-23
Manipulation
4 CHANGING THE 'LOOK AND FEEL'
SXS Building Blocks support you to change the look and feel of your PI Sheets easily. To archive this different
XSL style sheets or CSS modifications are used:
The optical appearance of browser-based PI Sheets is depending on the applied cascading style sheets (CSS)
and XML layout data (XSL). As a default the SAP CSS and XSL data files are loaded. If you want to adapt the
layout to your requirements you can copy the SAP data files and change the settings.
The SXS library provides SXS Building Blocks that show how easy the 'look and feel' can be changed.
4.1 How to create your own XSL and CSS sheet (for screen display)
Maintain the following prerequisite system settings:
Start transaction SMW0. Choose Binary data for WebRFC application and press the Find icon (F8). Enter
package CMX_POC and press the Execute icon (F8).
Define the following MIME types (menu path: Settings – Maintain MIME Types):
• MIME type: text/xsl; charset=iso-8859-1 Extension: *.xsl
• MIME type: text/xsl; charset=utf-8 Extension: *.xsl
• MIME type: text/css Extension: *.css
• MIME type: text/css; charset=utf-8 Extension: *.css
Then define application for maintaining the MIME types (menu path: Settings – Assign MIME editor). Text
editors like Notepad or Notepad++ are suited applications. Assign the application for each of the MIME
types. Choose the MIME type via F4 help!
• MIME type: text/xsl; charset=iso-8859-1 application: notepad.exe
• MIME type: text/xsl; charset=utf-8 application: notepad.exe
• MIME type: text/css application: notepad.exe
• MIME type: text/css; charset=utf-8 application: notepad.exe
Check the parameter value for the MIME type after upload/import (mark entry and choose details)
Template (Work instructions): Default stylesheet
• Start the Web Repository (TC: SMW0 -> binary data). Download the files
o TML_PMC_STY_D_DEFAULTXIE6.XSL
o TML_PMC_STY_DEFAULTS.CSS
• Store the files locally, rename them but keep the TML_ suffix
o TML_ZSAP_SXS_STY_D_DEFAULTXIE6.XSL
o TML_ZSAP_SXS_STY_DEFAULTS.CSS
4
• Change the files using editors (MS Notepad etc.)
o Assign the customer CSS file to the XSL style sheet:
▪ Search for the tag <LINK TYPE="text/css" MEDIA="screen" REL="stylesheet"
HREF="SAPR3-WR-PMC_STY_DEFAULTS.CSS"/>
o Change the HREF content and insert the new CSS file name (without the suffix TML_):
▪ <LINK TYPE="text/css" MEDIA="screen" REL="stylesheet" HREF="SAPR3-WR-
ZSAP_SXS_STY_DEFAULTS.CSS"/>
• Upload the changed files (TC: SMW0) and store them in package $TMP
o It might be necessary to assign the MIME type text/css; charset=utf-8
• Execute the report RCMX_BFW_BUILD_RUNTIME_FILES for the TML_* files
o Check that the converted files are stored in the Web Repository (SMW0)
▪ ZSAP_SXS_STY_DEFAULTS.CSS
▪ ZSAP_SXS_STY_D_DEFAULTXIE6.XSL
4.2 SAP Standard Stylesheets for Browser-Based PI Sheets and Electronic Work Instructions
SAP standard stylesheets are stored in the web repository (package CMX_POC). The following CSS and
XSL stylesheets are relevant for browser-based PI Sheets and electronic work instructions:
SAP Standard Stylesheet Description of the Stylesheet
PMC_STY_A_DEFAULTXIE6.XSL PMC: archive default stylesheet transform IE6
PMC_STY_DEFAULTP.CSS PMC: default stylesheet print
PMC_STY_DEFAULTS.CSS PMC: default stylesheet screen
PMC_STY_DEFAULTX.XSL PMC: maintain default stylesheet transform
PMC_STY_DEFAULTXIE6.XSL PMC: maintain default stylesheet transform IE6
PMC_STY_D_DEFAULTXIE6.XSL PMC: dialog default stylesheet transform IE6
PMC_STY_EDEFAULTS.CSS PMC: default stylesheet screen ehancement 3
PMC_STY_EDEFAULTXIE6.XSL PMC: EHP3 default stylesheet IE6
PMC_STY_MOR_A_DEFAULTXIE6.XSL Work instructions: Archiving stylesheet
PMC_STY_MOR_DEFAULTS.CSS Work instructions: Default stylesheet
PMC_STY_MOR_DEFAULTXIE6.XSL Work instructions: Default stylesheet
PMC_STY_MOR_D_DEFAULTXIE6.XSL Work instructions: Dialog stylesheet
PMC_STY_MOR_EDEFAULTS.CSS Work instructions: Enhanced stylesheet ECC 6.03
PMC_STY_MOR_EDEFAULTXIE6.XSL Work instructions: Enhanced default stylesheet (ECC 6.03)
PMC_STY_PO_DEFAULTS.CSS PMC: process operator stylesheet
PMC_STY_PO_DEFAULTX_IE6.XSL PMC: process operator stylesheet transform IE6
5
SAP Standard Stylesheet Description of the Stylesheet
PMC_STY_D_DEFAULTXIE6.XSL PMC: dialog default stylesheet transform IE6
The names of the corresponding stylesheet templates start with the TML prefix. The names for stylesheets of
process manufacturing cockpits contain the character sequence _C_. Please note that the content of
process manufacturing cockpits cannot be defined using XStep-based process instructions.
4.3 SXS: Different PI Sheet Layout (XSL) (02-PI-01)
This example applies the SAP standard stylesheet that is used for displaying archived data of browser-based
PI Sheets (from the electronic batch record [transaction COEBR]).
Figure 1: Header Section of a Browser-Based PI Sheet using Archiving Stylesheets
4.4 New SXS: Display Phase Short Text (02-PI-02)
The short texts for phases, if present in the current phase, are used for labeling the phase-trays (see SAP
note 362810). The short text of a certain phase is automatically determined and assigned to the appropriate
XStep parameter:
6
Figure 2: Display the Short Text as Label for the Phase Tray
4.5 New SXS: Display Phase Long Text (02-PI-03)
The long texts for phases, if present, are displayed as a tooltip for labeling the phase-trays (see SAP note
362810). There is a technical restriction for replacing symbol values in long texts: The system cannot valuate
the parameter with a text longer than 80 characters (see SAP note 981098).
The existing long text of a certain phase is automatically determined and assigned to the appropriate XStep
parameter.
This SXS building block uses the generation scope For all Phases. If you do not maintain the long texts for
all phases of your master recipe or process order, the following (proper) system behavior is observed:
• You get warning messages that the automatic valuation for the XStep parameter was not executed
• In the PI Sheet, no tool tip texts are displayed for these phases.
Better use a more selective generation scope in such cases. Or create SXS reference nodes for each phase
that contains a long text. Then assign the phase number as context to the SXS building block:
Figure 3: Phase 20 of a Process Order that Contains a Phase Long Text
Figure 4: Corresponding Tooltip Text of the Browser-Based PI Sheet
4.6 New SXS: Different Work Ins. Lay. (XSL) (02-PP-01)
This example applies the SAP standard stylesheet that is used for displaying archived data of electronic work
instructions (from the electronic batch record [transaction COEBR]).
https://launchpad.support.sap.com/#/notes/2435788
7
Figure 5: Header Section of an Electronic Work Instruction using Archiving Stylesheets
Remark:
Like creation of electronic batch records (EBR) for batches of process orders it is now also possible to apply
the EBR functionality for batches of production orders. Please follow the instructions of SAP Note 1993446 to
activate this functionality.
4.7 New SXS: Display Operation Short Text (02-PP-02)
The short texts for phases, if present in the current phase, are used for labeling the phase-trays (see SAP
note 362810). The short text of a certain phase is automatically determined and assigned to the appropriate
XStep parameter:
Figure 6: Display the Short Text as Label for the Operation Tray
8
4.8 New SXS: Display Operation Long Text (02-PP-02)
The long texts for operations, if present, are displayed as a tooltip for labeling the operation-trays (see SAP
note 362810). There is a technical restriction for replacing symbol values in long texts: The system cannot
valuate the parameter with a text longer than 80 characters (see SAP note 981098).
The existing long text of a certain operation is automatically determined and assigned to the appropriate
XStep parameter.
This SXS building block uses the generation scope For all Operations. If you do not maintain the long texts
for all operations of your routing, reference operation set, or production order, the following (proper) system
behavior is observed:
• You get warning messages that the automatic valuation for the XStep parameter was not executed
• In the electronic work instruction, no tool tip texts are displayed for these operations.
Better use a more selective generation scope in such cases. Or create SXS reference nodes for each
operation that contains a long text. Then assign the operation number as context to the SXS building block:
Figure 7: Corresponding Tooltip Text of the Electronic Work Instruction
4.9 SXS: Change PI Sheet layout via CSS manipulation (02-01)
A simple way to change the layout of the PI Sheet is possible by overwriting the CSS information by own SXS
Building Blocks: You could vary colors of input fields, fonts and font-size etc.:
• Assign the CSS SXS Building Blocks to master recipes or process orders that require additional
process control (e. g. validation batches, scale-up runs, rework etc.). Change the background color so
the shop floor worker can identify the corresponding PI Sheets easily.
4.9.1 Cascading Style Sheets (CSS)
The changed CSS formats need to be included in an XStep with meaningful text output (e.g. general order
information), e. g.:
• 'Please read SOP XXX'.
The format of many elements in the PI sheet is controlled via classes as you can see in the standard CSS
document (Have a look with transaction SMW0, binary data -> object name
TML_PMC_STY_DEFAULTS.CSS. From there you can download it and view it in any text editor)
Each of these classes can be overwritten from within the PI sheet. See below for an example.
To give a hint for which elements the different classes are relevant see the list below:
• OFD*......simple output field
• TOFD*....tabular output field
• IFD*........simple input field
• TIFD*......tabular input field
• CFD*......simple field for calculations
• TCFD*....tabular field for calculations
• CFB........push button for calculations
• IXT*.........simple input field for long texts
• TIXT*.......tabular input field for long texts
9
• OFD*......output field for long texts
• TAB*.......different elements of a table
• LBL*.......field label
• REQ*......asterisk for required input
4.9.2 SXS Building Blocks Details
This SXS example changes the background colors and the background color of the phase container. The
background colors are defined by valuation of the corresponding parameters with fixed values (standard colors
like RED, BLUE or hexadecimal values for colors):
• /* Background color */
.BODY{BACKGROUND-IMAGE: none ;BACKGROUND-COLOR: &LV_BGCOL&}
• /* Background color of phase container*/
.TRAYBODY{BACKGROUND-COLOR: &LV_BGPHCOL&}
Figure 8: Changed background colors by CSS manipulation
10
www.sap.com/contactsap
© 2018 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.
The information contained herein may be changed without prior notice. 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 or its affiliated companies shall not be liable
for errors or omissions with respect to the materials. The only warranties for SAP 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, and they should not be relied upon in making purchasing decisions.
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. All other product and service names mentioned are the trademarks of their respective companies. See http://www.sap.com/corporate-en/legal/copyright/index.epx for additional trademark
information and notices.
