SAP MII Self Service Composition Environment How to Use the SAP MII Self Service Composition Environment Feature Integration of Resource/Files Applicable Release: MII 15.0 Version 1.0 Date: 12-05-2014
Copyright 2014 SAP AG. 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 AG. The information contained herein may be changed without prior notice. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. Microsoft, Windows, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation. IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iseries, pseries, xseries, zseries, z/os, AFP, Intelligent Miner, WebSphere, Netfinity, Tivoli, Informix, i5/os, POWER, POWER5, OpenPower and PowerPC are trademarks or registered trademarks of IBM Corporation. Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries. Oracle is a registered trademark of Oracle Corporation. UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group. Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc. HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C, World Wide Web Consortium, Massachusetts Institute of Technology. Java is a registered trademark of Sun Microsystems, Inc. JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape. MaxDB is a trademark of MySQL AB, Sweden. SAP, R/3, mysap, mysap.com, xapps, xapp, SAP NetWeaver, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and in several other countries all over the world. All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary. These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group 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. These materials are provided as is without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement. SAP shall not be liable for damages of any kind including without limitation direct, special, indirect, or consequential damages that may result from the use of these materials. SAP does not warrant the accuracy or completeness of the information, text, graphics, links or other items contained within these materials. SAP has no control over the information that you may access through the use of hot links contained in these materials and does not endorse your use of third party web pages nor provide any warranty whatsoever relating to third party web pages. SAP ME How-to Guides are intended to simplify the product implementation. While specific product features and procedures typically are explained in a practical business context, it is not implied that those features and procedures are the only approach in solving a specific business problem using SAP ME. Should you wish to receive additional information, clarification or support, please refer to SAP Consulting. i
Document History Document Version Description Author 1.0 Initial version Sindhu Hariharan The value of y will be incremented by 1 for a new version of the How-To-Guide for a new version of MII. ii
Table of Contents 1 Introduction... 1 1.1 Integration of Resource/Files with SSCE... 1 2 Creating a dashboard with Resource/Files... 1 2.1 Creating a dashboard with Web pages... 1 2.2 Creating a dashboard with Image Files... 2 2.3 Creating a Dashboard with SVG object... 4 2.3.1 Creating a Dashboard with SVG Object... 4 2.3.2 Creating a dashboard with SVG Object using Xacute Query... 6 2.3.3 Creating a Dashboard with SVG Object Using Javascript... 8 2.3.4 Creating a Dashboard with SVG Object using pre-configured scheduler job... 10 3 Appendix... 11 3.1 Transaction Details for SVG Object When Configured Using Transaction... 11 3.2 Transaction Details for SVG Object When Configured Using Scheduled Job... 15 iii
1 Introduction 1.1 Integration of Resource/Files with SSCE In SAP MII, we can create different files types such as html, jsp, irpt, png, jpeg, jpg, svg objects, swf, and so on in Workbench. SAP MII - Self Service Composition Environment is extended to integrate these resources or files and provide the end users a visualization of these files in their dashboards. 2 Creating a dashboard with Resource/Files 2.1 Creating a dashboard with Web pages a. Click on the Create Dashboard icon. This icon is available in the left hand side tool panel. b. Select Standard Page Layout option. c. Choose the desired layout and click Finish. d. Click on MII Content in the right hand side pane bar. e. Expand Resource/Files. f. Expand the desired project folder. g. Drag and drop the desired web pages such as html/ jsp/ irpt/swf on any of the cells in the selected layout. h. Save and preview the dashboard 1
2.2 Creating a dashboard with Image Files a. Click on the Create Dashboard icon. This icon is available in the left hand side tool panel. b. Select Standard Page Layout option. c. Choose the desired layout and click Finish. d. Click on MII Content in the right hand side pane bar. e. Expand Resource/Files. f. Expand the desired project folder. g. Drag and drop the desired image files such as jpg/jpeg/png/bmp/gif on any of the cells in the selected layout. h. Click on Configure Graphics icon. This icon is available on top most left corner of the layout. i. Select the desired area. Enter the Area Name as Area 1, Color as #000000 and Opacity as 40% for highlight the area. Click OK. 2
j. Click on Apply button. 3
k. Save and preview the dashboard. Note: After highlighting the area, you can integrate the PIC tags on this area to visualize the real time status of measurement points. For further information about integration of PIC tags using UI Elements, refer SAP MII SSCE_PIC_How-To-Guide 2.3 Creating a Dashboard with SVG object We can create a dashboard with SVG objects using one of the three different ways. The steps to create are as follows: 2.3.1 Creating a Dashboard with SVG Object a. Click on the Create Dashboard icon. This icon is available in the left hand side tool panel. b. Select Standard Page Layout option. c. Choose the desired layout and click Finish. d. Click on MII Content in the right hand side pane bar. e. Expand Resource/Files. f. Expand the desired project folder. g. Drag and drop the desired svg object on any of the cells in the selected layout. h. Click on Configure SVG Display icon. This icon is available on top most left corner of the layout. 4
i. Choose Query template using browser icon. Enable Refresh Automatically and enter 15 in Refresh Rate field. j. The configured query will execute the transaction in background to update the SVG. The output result will be a svg file. The configured SVG object will be displayed in in Live Mode and Preview mode. Refer the Appendix 3.1 for Transaction Details. Note: Only Xacute query template is supported for SVG display. k. Click on Apply button. 5
l. Save and preview the dashboard. 2.3.2 Creating a dashboard with SVG Object using Xacute Query a. Click on the Create Dashboard icon. This icon is available in the left hand side tool panel. b. Select Standard Page Layout option. c. Choose the desired layout and click Finish. d. Click on MII Content in the right hand side pane bar. e. Expand Query Templates. f. Expand the desired project folder. g. Drag and drop the desired Xacute Query on any of the cells in the selected layout. h. Click on Configure Visualization icon. This icon is available on top most left corner of the layout. 6
i. Choose the Select Type as SVG. Enable Refresh Automatically and enter 15 in Refresh Rate field. j. Click on Apply button. 7
k. Save and preview the dashboard. 2.3.3 Creating a Dashboard with SVG Object Using Javascript a. Click on the Create Dashboard icon. This icon is available in the left hand side tool panel. b. Select Standard Page Layout option. c. Choose the desired layout and click Finish. d. Click on MII Content in the right hand side pane bar. e. Expand Resource/Files. f. Expand the desired project folder. g. Drag and drop the desired SVG object on any of the cells in the selected layout. h. Click on Source Code. 8
i. To write the custom javascipt code for refresh action of SVG object, use refresh method. Refresh method contains a callback function which defines user specific actions such as redrawing of svg object. j. Click on Apply button. k. Save and preview the dashboard. 9
2.3.4 Creating a Dashboard with SVG Object using pre-configured scheduler job a. Click on the Create Dashboard icon. This icon is available in the left hand side tool panel. b. Select Standard Page Layout option. c. Choose the desired layout and click Finish. d. Click on MII Content in the right hand side pane bar. e. Expand Resource/Files. f. Expand the desired project folder. g. Drag and drop the desired SVG object on any of the cells in the selected layout. h. Click on Configure SVG Display icon. This icon is available on top most left corner of the layout. 10
i. Enable Refresh Automatically and enter 10 in Refresh Rate field. Click on Apply button. j. The svg object which is used in this dashboard has pre-configured scheduler running in background where data get updated in specified frequency pattern. Refer the transaction details in Appendix 3.2. 3 Appendix 3.1 Transaction Details for SVG Object When Configured Using Transaction 1. In SAP MII Workbench, create a transaction to render the data to SVG Object. Create a new transaction; use a query template which stimulates the data. 11
2. In Configure of Animation Renderer action, load the required SVG image. 3. In Link Editor of Animation Renderer action, go to Incoming tab; link the query result data as Value property of Animation Render action. 12
4. In Link Editor of Animation Render action, go to Outgoing tab; create an output parameter transaction property where data type is xml. Link the Animation Renderer Output xml with 13
transaction output property. 5. Save the transaction. 14
6. Now create a new Xacute Query and configure this transaction in Xacute Query template. Select the output parameter. 7. Save the query template. 8. The svg object which is created when the scheduled jobs run is consumed in SSCE SVG object Integration to create dashboard. Refresh rate can be configured independently. 3.2 Transaction Details for SVG Object When Configured Using Scheduled Job 1. In SAP MII Workbench, create a transaction to render the data to SVG Object. Create a new transaction; use a query template which stimulates the data. 2. Configure the Animation Renderer action with required SVG image. 3. Use the stimulated query data as input parameter value to Animation Render action. 4. Create an output parameter transaction property where data type is xml. Save the Animation Renderer Output xml in transaction output property. Refer these steps from Appendix 3.1 15
5. In Configure of Write File action, enter the File Path where SVG should be created. Select the Mode as Create. 6..In Link Editor of Write File action, go to Incoming tab; link the Output Transaction Property with Text property of Write File action. 16
7. Save the transaction. 17
8. In MII Admin screen, go to System Management -> Scheduler. 9. Create a new Scheduler. Select the type as Transaction. 10. Browse the transaction created to render svg data. Provide the frequency pattern to run the job. 11. Enter the credential stores. 12. Save the scheduler. 18
13. The svg object which is created when the scheduled jobs run is consumed in SSCE SVG object Integration to create dashboard. Refresh rate can be configured independently. 19