63f2052e-0c01-0010-b9a2-e1f7457a7fbe

Model er's Guide
SAP NetWeaver Visual Composer

Document Version 1.00 August 2008 SAP enhancement package 1 for SAP NetWeaver 7.0
Copyright 2008 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, and Informix are trademarks or registered trademarks of IBM Corporation 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.
Disclaimer Some components of this product are based on Java. Any code change in these components may cause unpredictable and severe malfunctions and is therefore expressively prohibited, as is any decompilation of these components.
Any Java Source Code delivered with this product is only to be used by SAPs Support Services and may not be modified or altered in any way.
Documentation on SAP Service Marketplace You can find this documentation at

service.sap.com/instguidesNW04
Typographic Conventions
Type Style Example Text Represents Words or characters quoted from the screen. These include field names, screen titles, pushbuttons labels, menu names, menu paths, and menu options. Cross-references to other documentation. Example text Emphasized words or phrases in body text, graphic titles, and table titles. Technical names of system objects. These include report names, program names, transaction codes, table names, and key concepts of a programming language when they are surrounded by body text, for example, SELECT and INCLUDE. Output on the screen. This includes file and directory names and their paths, messages, names of variables and parameters, source text, and names of installation, upgrade and database tools. Exact user entry. These are words or characters that you enter in the system exactly as they appear in the documentation. Variable user entry. Angle brackets indicate that you replace these words and characters with appropriate entries to make entries in the system. Keys on the keyboard, for example, F2 or ENTER.
Icons
Icon Meaning Caution Example Note / Tip Recommendation Syntax
EXAMPLE TEXT
Example text
Example text
<Example text>
EXAMPLE TEXT
Contents
MODELING APPLICATIONS WITH SAP NETWEAVER VISUAL COMPOSER .................... 1 1 GETTING INVOLVED ........................................................................................................ 2 1.1 1.2 Target Audience........................................................................................................ 3 Concepts of Visual Composer................................................................................... 3 1.2.1 Application Modeling ...................................................................................... 3 1.2.2 Visual Composer Architecture........................................................................ 6 1.2.3 Glossary ......................................................................................................... 7 Working with Visual Composer ............................................................................... 11 1.3.1 Prerequisites................................................................................................. 11 1.3.2 Logging On ................................................................................................... 12 1.3.3 The Storyboard Desktop .............................................................................. 13 1.3.4 Managing Models ......................................................................................... 17 1.3.5 Defining the Storyboard Environment .......................................................... 24 Creating a Salesorder iView.................................................................................... 27 2.1.1 Creating the Base Model.............................................................................. 28 2.1.2 Adding a Second Data Service .................................................................... 31 2.1.3 Fine-Tuning .................................................................................................. 36 Creating a Bank Information iView.......................................................................... 38 2.2.1 Creating the Base Model.............................................................................. 39 2.2.2 Adding a Data Service for Choosing Banks ................................................. 42 2.2.3 Creating a Popup iView................................................................................ 44 2.2.4 Creating a Wizard......................................................................................... 48 Creating a BI iView.................................................................................................. 52 2.3.1 Creating the Query ....................................................................................... 53 2.3.2 Creating and Configuring the Chart.............................................................. 55 2.3.3 Fine-Tuning and Deployment ....................................................................... 57 Developing Business Logic ..................................................................................... 59 3.1.1 Suggested Process Flow.............................................................................. 59 3.1.2 First Steps .................................................................................................... 61 3.1.3 Find Data ...................................................................................................... 62 3.1.4 Compose the Model ..................................................................................... 64 3.1.5 Configure Elements ...................................................................................... 72 3.1.6 Lay out the Model ......................................................................................... 73 3.1.7 Deploy the Model.......................................................................................... 76 How to . . . ............................................................................................................... 77 3.2.1 Create Layered iViews ................................................................................. 78 3.2.2 Create Interrelated iViews ............................................................................ 86 3.2.3 Define Eventing between iViews .................................................................. 92 3.2.4 Use the BI Integration Wizard ...................................................................... 95 3.2.5 Work with SAP BI Systems ........................................................................ 101
1.3
GO AND CREATE ........................................................................................................... 26 2.1
2.2
2.3
CORE DEVELOPMENT TASKS ..................................................................................... 59 3.1
3.2
3.2.6 Filter a BI Query ......................................................................................... 125 3.2.7 Add an Alert Data Service .......................................................................... 127 3.2.8 Create a Toggled View............................................................................... 130 3.2.9 Create an Entry List.................................................................................... 134 3.2.10 Define a Dynamic Expression .................................................................... 139 3.2.11 Create Value Help ...................................................................................... 162 3.2.12 Create a Chart ............................................................................................ 168 3.2.13 Create a Toolbar......................................................................................... 171 3.2.14 Define an Image Control ............................................................................ 174 3.2.15 Use the Style Editor.................................................................................... 175 3.2.16 Print the Model ........................................................................................... 176 3.2.17 Manage Your Portal System Aliases.......................................................... 177 3.2.18 Store Data in a Data Store for Later Use ................................................... 178 3.2.19 Display Data on a Calendar ....................................................................... 181 3.3 3.4 Connectivity and Interoperability ........................................................................... 183 Advanced Programming Techniques.................................................................... 185 3.4.1 Defining Model-Profile Properties............................................................... 185 3.4.2 Working with Stored Procedures................................................................ 186 3.4.3 Unlocking Models ....................................................................................... 187 3.4.4 Creating a Web Service System ................................................................ 188 3.4.5 Creating a Multi-Selection Table ................................................................ 189 Application Adaptation and Distribution ................................................................ 191 3.5.1 Deploying to the Portal ............................................................................... 191 3.5.2 Preparing iViews for Portal Translation ...................................................... 192 3.5.3 Preparing Portal Themes for Flex Controls................................................ 195 3.5.4 Application Life Cycle Management ........................................................... 196 Logging and Tracing ............................................................................................. 197 Advanced Tutorials ............................................................................................... 198 5.1.1 Integrating Value Help into Your Model ..................................................... 199 5.1.2 Creating an Analytics Application............................................................... 209 5.1.3 Integrating Web Services in your Model..................................................... 216 Checklist................................................................................................................ 221
3.5
ENSURING QUALITY.................................................................................................... 197 4.1
REFERENCE ................................................................................................................. 198 5.1
5.2
July 2008
Modeling Applications with SAP NetWeaver Visual Composer

This manual describes the SAP NetWeaver Visual Composer application, explaining how to create and modify applications using Visual Composer tools.
Topics
Getting Involved [Page 1] Go and Create [Page 25] Core Development Tasks [Page 58] Ensuring Quality [Page 196] Reference [External]
Be sure to read SAP Note 1169887 for the latest information about limitations, known issues, and workarounds for SAP Visual Composer. You can find the SAP Note at SAP Service Marketplace at service.sap.com/notes.
July 2008
Getting Involved
SAP Visual Composer provides a development environment for rapidly creating and adapting model-based transactional and analytical applications. It has been designed to enable business process expertrs, business analysts and developers to create enterprise applications using standardized components that meet SAP standards and quality criteria. Visual Composer has been designed according to the following prime considerations: Simplicity Visual Composer enables fast development of model-based business applications, without requiring manual coding skills. Visual Composer users create their models using a small set of highly-reusable, easily understood concepts (such as views and data binding). The Visual Composer graphical interface is very user friendly: it implements drag-and-drop capabilities, direct layout visualization and a range of other tools for facilitating model building and adaptation. Visual Composer is browser-based, eliminating the need for client-side installation and maintenance.
Reusable components The building blocks implemented in the models ensure consistency in functionality and UI design from application to application. Using them ensures significant savings in time and effort by eliminating the need to recreate similar functionality from model to model. SAP NetWeaver 7.0 integration Visual Composer is tightly integrated into the SAP NetWeaver 7.0 suite of applications. Connectivity to SAP and third-party systems Visual Composer operates on top of the SAP NetWeaver portal, utilizing the portals connector-framework interfaces to enable access to a range of data services, including SAP and third-party enterprise systems. In addition to accessing SAP ERP systems, users can access SAP Business Warehouse and any open/JDBC stored procedures. Support for different runtime environments Visual Composer is a robust tool whose models can be deployed to run in a number of different environments, including Web Dynpro and Adobe Flex. Test-and-Redo Visual Composer is ideal for trying out a model, quickly deploying it and then going back to the drawing board (Storyboard) for correction and tweaking.
In summary, Visual Composer enables business process experts and business analysts to apply their inherent understanding of their organizations requirements to create and adapt applications to their specific business needs. These applications can then be subsequently customized and continuously changed in Visual Composer as the organizations business objectives evolve. The main topics of this section are: Target Audience [Page 3] Concepts of Visual Composer [Page 3] Working with Visual Composer [Page 10]
July 2008
1.1
Target Audience
SAP Visual Composer is a Web-based visual modeling tool that enables the modeler to quickly create and adapt sophisticated application content, without coding. Visual Composer minimizes the effort and time required to create an application, resulting in faster go-live decision making. As the target users for Visual Composer, business process experts are defined as the key figures in customer organizations, possessing in-depth knowledge and understanding of the business units operations and core processes. Using their understanding of the business requirements and knowledge of their company software to accomplish the various business tasks, the business process experts use Visual Composer as an easily-learned tool to map out the logical flow of the required applications. Visual Composer has been designed as an application-modeling tool that augments other existing SAP tools, such as SAP NetWeaver Developer Studio and BI Web Application Designer. A leading feature of Visual Composer is that it can accept data sources from a range of different back-end systems (SAP system, SAP BI systems, JDBC-connected systems and others) into the same model. It can also compile the models into different UI technologies, such as Web Dynpro and Adobe Flex.
1.2
Concepts of Visual Composer
This section describes concepts that are integral to working with Visual Composer. These concepts include: Application Modeling [Page 3] Visual Composer Architecture [Page 6] Glossary of Terms [Page 6]
1.2.1
Application Modeling
A prime concept in application modeling for SAP systems is enabling the modeler to quickly and efficiently design and implement an application that meets specific business requirements. Access to the analytic and transactional data must be direct and intuitive, resulting in a fast response from the structured data. The modeling tools must be powerful and intuitive, operating in a user interface that is usercentric and highly efficient. The model elements and components must be familiar, both in graphical look-and-feel and in their functioning. For example, an input form is displayed and manipulated as an identifiable and familiar view in a portal iView, with all the fields and controls displayed and configured in a logical manner. Deployment should be fast and should give access to the runtime version of the model. And the user should be able to easily return to the drawing board in order to make subsequent modifications. The following are concepts that are related to in this and other manuals in the Visual Composer documentation set.
July 2008
Design Time and Runtime

Visual Composer is a design-time software tool in which you can develop an application and then deploy it. After deployment, you can run the actual application in the portal to check its runtime functionality. During model creation and configuration, you define all the runtime attributes of the model components, such as the frame of a table, the size and types of toolbar buttons and the format of an output form. You can also define a range of properties of the actual Visual Composer design-time tools, such as the use of a background grid or the placement of the various toolboxes used with each board.
Runtime Environments
Models designed in Visual Composer can be deployed to run in one or more technology engines, including Web Dynpro and Flex. The same model can be deployed to more than one environment, although not all components and controls are fully supported in each. Models deployed to Flex can run on a range of browsers, including Microsoft Internet Explorer, Netscape and Firefox. Visual Composer implements a proprietary XML-based Visual Composer Language as its source code for creating the models. Only at deployment is the model actually compiled into the executable code required by the selected UI technology. The result is a model once run anywhere capability.
Creating and Adapting Applications

In Visual Composer, you can create modeled applications from scratch, or else adapt an existing application to your specific needs. For analytic applications with standard features, it is many times significantly faster to customize an existing application by replacing data services with the required queries, for example, and making other minor adjustments. In either case, when planning to create or adapt an application, you should define the actionable information, detail the target functionality, and locate or prepare all required data sources ahead of time.
Data Services
At the heart of any of the modeled applications are the sources of the analytic and transactional data: these can be standard SAP RFCs (remote function calls) and BAPIs (business APIs), Business Warehouse info cubes, BI queries, JDBC-compliant stored procedures, Web services and others. A main strength of Visual Composer is that models can be built around any number of disparate data services and then finely tuned to display only the exact subset of data needed for the specific transaction or function.
Storyboard
You use Visual Composer to create and adapt applications, through a graphical user interface called Storyboard. This is your work desk, on which you organize and configure components of the application into a logical flow, or model. You build the application model by defining the data services and model components, assembling and connecting them into a task flow that answers the needs of the application. You place the model elements in a screen layout that reflects the actual look-and-feel of the application in runtime. Storyboard contains a number of different boards, on which you can compose the model, lay out its components and view its source code.
Workflow
As you build your model in Storyboard, you drill down from upper-level model entities down to the lowest-level elements and controls. Usually, experts most familiar with their actual business needs will perform the initial modeling of the task flow and screen layout.
July 2008
Subsequent modification and configuration can be performed by other modeling experts and developers. A model is deployed to the portal in a two-stage process, in which the graphical model is first compiled into code and then deployed as an archive package to the portal.
Events
In Visual Composer, an event is used to signal that an action has occurred in the workflow. At that point, the system then performs the actions assigned to the event. Certain model elements such as data flow lines are modeled to respond to these events. For example, Visual Composer assigns names such as *evt1, submit (used with input form buttons) or *next (for layers) to data mapping lines or transition lines, indicating the action that invokes the event. These names can be changed, and they can be used for defining controls that invoke the action. A standard event, such as submit or close, occurs when the specific control connected to the line is activated to invoke the event. For example, in the following model, two submit lines have been defined:
The use of the asterisk (*) before an event name indicates that if any event of the same name (without the asterisk) is raised, all events of the name with the asterisk will respond. In this case, if the button in Input Form 2 is pressed (raising the event), both events (actions defined for both forms) will respond. If the button in Input Form 1 is pressed, only that event will respond. In transitions between layers, if the transition line is given the same name as the event lines within the layer, and is prefixed with an asterisk, raising the event in either form within the layer will activate the transition to the next layer. For example, a layer may contain two forms in which the user enters information, as follows:
If the user inputs data in Input Form 1 and clicks Submit, the transition to Layer 2 will occur. If the user inputs data into Input Form 2 and clicks Submit, the transition will occur as well.
July 2008
If you are working with nested iViews in a Flex-based model, you can use Out signals within the nested iView to expose EPCM events external to the nested iView, elsewhere in the same model. These signals can trigger transitions between layers and/or trigger events when received by the complementary In signals.
1.2.2
Visual Composer Architecture
The Visual Composer server is installed on the Development Server, running on the SAP J2EE Engine, which runs the connected portal. Storyboard is accessed from the client machine through a standard browser. At runtime, the user accesses the deployed model by calling up the portal using the browser. The following diagram illustrates the Visual Composer high-level architecture.
Adobe SVG Viewer MSXML Parser Flash Client
Browser Design Time

R
Browser Runtime
R
HTMLB HTMLB
Visual Composer Visual Composer Server Server Development Server Save
Deploy
Flex Flex Connectivity Layer Connectivity Layer
Back-end System
Portal Save
Development Server Repository
Portal Content Directory (PCD)
Export
Business Package
J2EE Server
In runtime, transactional content can run through Web Dynpro and Flex, while analytic content which may require a more animated environment may run through Flex. The models deployed by Visual Composer to the portal include runtime metadata, which is stored with the model in the PCD (portal content directory) and exported in the business package, for delivery to customers.
July 2008
1.2.3
Term Board
Glossary
Definition A tabbed area in the workspace used to manipulate the model and its elements: Design board, Layout board and Source board. A type of InfoObject in SAP BI systems that provides a classification such as company code, product, customer group, fiscal year, period, or region. Related to the OLAP-standard term dimension. A reusable model element, such as a UI component or a data service. A set of data organized as a multidimensional structure defined according to dimensions and measures. Related SAP BI terms include InfoCube and query.
Characteristic
Component Cube
Data binding
A connection between two UI components (or between a web service and a UI component) that channels identical data from the output port of one UI component to the input port of the other UI component. The means by which data is channeled between a data service and connected UI components, or between two UI components whose connection was changed from Data binding to Data flow. Connection between two model elements, describing, for example, the data that is input to an element or the fields that are output from another element. Any function call, business object or query imported into the model. At runtime, the data service is called and returns results. A central data container where data of a model can be temporarily stored for future use. In OLAP-standard systems: A collection of similar data which, together with other such collections, forms the structure of a cube. Typical dimensions include time, product, and geography. Each dimension may be organized into a basic parentchild hierarchy or, if supported by the data source, a hierarchy of levels. For example, a geography dimension might include levels for continent, country, state, and city. The related term in SAP BI systems is characteristic. In SAP BI systems: A grouping of those evaluation groups (characteristics) that belong together under a common superordinate term. With the definition of an InfoCube, characteristics are grouped together into dimensions in order to store them in a star schema table (dimension table).
Data flow
Data mapping
Data service Data store Dimension
Element
A general term indicating any item used to create a model, including: components, connectors and operators.
Enterprise service A Web service defined to perform functions of an SAP system. Web services are published to and stored within a repository.
July 2008
Term Field
Definition An element of a table that contains a single piece of data. Fields are organized into rows, which contain all the data relevant for one specific entry in the table. In some databases, field is a synonym for column. A set of criteria that restricts the set of records returned as the result of a query. With filters, you define which subset of data appears in the result set. A logical tree structure that organizes the members of a dimension into a parent-child relationship. If supported by the data source, the hierarchy consists of levels, where the top level is an aggregate of all members and each subsequent level has zero or more child members. An element for grouping meta-objects in the Business Information Warehouse. Each InfoProvider is assigned to an InfoArea. The resulting hierarchy is displayed in the Administrator Workbench. An SAP BI system that consists of a quantity of relational tables created according to the star schema: a large fact table in the center, with several dimension tables surrounding it. It provides a self-contained dataset which can be used for analysis and reporting. Similar to the OLAP-standard term cube.
Filter
Hierarchy
InfoArea
InfoCube
InfoObject
A business evaluation object (for example, customer or quantity) in SAP BI systems. Types of InfoObjects include characteristics, key figures, units, time characteristics, and technical characteristics (such as request numbers). Java Database Connectivity, which provides an API that lets you access relational databases using the Java programming language. This enables connectivity to a wide range of SQL databases, and also provides access to tabular data sources such as spreadsheets or flat files. The BI JDBC Connector accesses data from JDBC-compliant systems. A relationship between two tables that produces a result set that combines their contents. You create a join by indicating how selected fields in one table are related to selected fields in the other table. A value or quantity in SAP BI systems. Related to the OLAP-standard term measure. You may also define calculated key figures, which are derived using a formula. A collection of UI elements that are all visible at the same time at runtime. A set of nodes (members) in a tree hierarchy in supporting data sources that are at the same distance from the root of the tree. For example, in a geography hierarchy, the top level might be all places, the second level might be continents, the third level might be countries, and the fourth level might be cities. Multidimensional Expressions, a query language used to retrieve and manipulate multidimensional data.
JDBC
Join
Key figure
Layer Level
MDX
July 2008
Term Measure
Definition One category of values usually numeric used to define a cube. These values are derived from one or more columns in the cube's fact table and are the basis for aggregation and analysis. Related SAP BI terms include key figure and structure element.
Member
An element of a dimension that represents one or more occurrences of data. A member can be unique (it occurs only once) or non-unique (it may occur more than once in its dimension). For example, in a geography dimension that includes cities in the US, the member Portland could be non-unique, since there is a city called Portland in the state of Oregon and in the state of Maine. In SAP BI systems, members are referred to as instances of characteristics.
Model Multidimensional data Navigation line
An object created in Storyboard. Models may contain packages, pages, iViews and any other model elements. Data in dimensional models suitable for business analytics. In this documentation, we use the term multidimensional data synonymously with OLAP data. A connection that provides event annotation, running between model layers. The source element raises the event that can be handled by the connected element. By default, a navigation line is curved. OLE DB for OLAP Microsofts set of objects and interfaces that extend the ability of OLE DB to provide access to multidimensional data sources on the Windows platform. Providers of OLAP data can implement the interfaces described with OLE DB for OLAP to allow all OLAP clients to access their data. The BI ODBO Connector accesses data from ODBOcompliant systems. Online analytical processing a system of organizing data in a multidimensional model that is suitable for decision support. SAP BI systems are OLAP systems. A functionality provided by a Web service. A mechanism used to manipulate data returned from the data service before it is displayed in the iView. A high-level container; it can contain any number of pages, iViews or other packages. A defined point of interface into and out of a component. In SAP BI systems, a collection of selected characteristics and key figures (InfoObjects) used together to analyze the data of an InfoProvider. A query always refers exactly to one InfoProvider, whereas you can define as many queries as you like for each InfoProvider. In SAP BI systems, a view of a query after navigation, saved in an InfoCube. You can use this saved query view as a basis for data analysis and reporting.
ODBO
OLAP
Operation Operator Package Port Query
Query view
July 2008
Term Relational database
Definition A repository for typically large amounts of information, structured in accordance with the relational model, in tables with columns. A relational database is created and administered by a relational database management system (RDBMS). A set of fields within a table that contains the data for one specific entry in the table. Each row in a given table has the same structure, predefined for a particular table. In some databases, row is a synonym for record. A component that allows you to create custom reports without any ABAP programming knowledge. The BI SAP Query Connector uses SAP Query to access data from such SAP operational applications. The Visual Composer client from which you design models. A set of rows, also known as a relation. The table is the central object of the relational model. A work area of the Visual Composer Storyboard desktop that displays a specific set of tools for building a model. The horizontal row of buttons under the main menu (main toolbar) or the vertical row of buttons in the task panel (task-panel toolbar). A set of board-specific tools that assist in performing tasks in the Visual Composer workspace. The offering, typically in a pop-up dialog box, of possible valid values for an input field. Also known as input help, selection help, or F4 help. An interface between two or more software applications that is implemented with the industry standards SOAP, WSDL and UDDI. The main grid area of Visual Composer that displays the model as it is built and modified. The workspace consists of boards. XML for Analysis, an XML-messaging-based protocol specified by Microsoft for exchanging analytical data between client applications and servers (for example, OLAP providers) using HTTP and SOAP as a service on the Web. The BI XMLA Connector accesses data from XMLAcompliant systems.
Row
SAP Query
Storyboard Table Task panel Toolbar Toolbox Value help Web service Workspace XMLA
10
July 2008
1.3
Working with Visual Composer
This section explains how to access and start using Visual Composer. It also describes the tools at your disposal and tells you how to perform basic operations for creating and maintaining your models. The main topics in this section are: Prerequisites [Page 11] Logging On [Page 12] The Storyboard Desktop [Page 13] Managing Models [Page 17]
1.3.1
Prerequisites
Before you begin using Visual Composer, be sure that you meet the prerequisites listed in this section and that your Visual Composer has been installed according to the instructions outlined in the SAP NetWeaver Visual Composer Installation & Configuration Guide [External]. Be sure to check that: SAP NetWeaver Usage Type EP has been installed on the appropriate server. The following has been installed on the computer from which you access the Storyboard: Microsoft Internet Explorer 6.0 SP1 or higher Adobe SVG Viewer 3.0 Microsoft XML Parser 4.0 or higher Flash environment
Your portal is properly connected to the required back-end system(s) and you know what system alias is assigned to each system. You have the appropriate user permissions to access the portal. To access deployed Visual Composer models in the portal, you must be assigned the VC Role by your system administrator.
You are mapped in the portal as a user to the back-end system from which you intend to import data services. For BI and BW, you have installed the required connectors and defined the required systems and aliases in the portal.
For more information, see the SAP NetWeaver Visual Composer Installation & Configuration Guide [External]. See also System Administration [External] in the portal Administration Guide.
11
July 2008
1.3.2
Logging On
Procedure
1. Open your Internet Web browser with network access to the Visual Composer server. 2. In the address bar, enter the URL to the Visual Composer server as follows: http://<machine name with full domain>:<portnumber>/VC/default.jsp
For example: http://dwdf041.wdf.sap.corp:54000/VC/default.jsp (where dwdf041.wdf.sap.corp is the fully-qualified domain name of the Visual Composer server host, and 54000 is the application port number on J2EE engine in use by the Visual Composer Server installation).
Result
When you log on to Visual Composer Storyboard for the first time, the following screen appears, displaying an empty workspace and a Get Started task panel to the right.
To get started, choose Model New Model.
12
July 2008
1.3.3
The Storyboard Desktop
Definition
Visual Composer Storyboard contains all the tools you need to create your model. The Storyboard desktop is the user interface for modeling your application.
Structure
The Storyboard desktop has two main areas: the workspace and the accompanying task panel. The workspace displays your model as you build and modify it, while the task panel displays the tools you use to build your model. The main parts of the Storyboard desktop are shown in the following figure:
Main Parts of the Visual Composer Storyboard Desktop For more information about the different parts of Storyboard, see: Main Menu and Toolbar [Page 13] Workspace Boards and Toolboxes [Page 14] Navigation Icons [Page 15] Task Panels [Page 15] Context-Sensitive Help [External]
13
July 2008
1.3.3.1
Main Menu and Toolbar
Definition
The main menu contains the options required to create and modify models, create and lay out pages and iViews within your models, link the various model components, and save your models. The main toolbar provides these options in graphic form, as the small icons to the left of each menu option show. The function of each toolbar button is given in the button tooltip.
Use
For more information about the options available in the main menu and toolbar, see Main Menu [External] and Main Toolbar [External] in the SAP NetWeaver Visual Composer Reference Guide.
Structure
You can change the contents of the toolbar adding and deleting buttons and moving them around by choosing Tools Customize, and in the Customize Toolbar dialog box, selecting Main toolbar from the Toolbar drop-down menu.
1.3.3.2
Workspace Boards and Toolboxes
Definition
The workspace consists of a tabbed set of grids or boards on which you build and design your model. Each board has its own set of work tools, or toolboxes.
Structure
The workspace contains several boards, displaying different views of the model: Board Design Layout Source Use Constructing your model Customizing the layout of iViews Reviewing the code that is automatically generated by Storyboard as you build your model
The various boards are available according to the model component you are working with. Each board has its own toolbox, which provides a set of board-specific tools to assist you with the tasks you perform on that board. For detailed descriptions of the contents of each toolbox, see Workspace Toolboxes [External] in the SAP NetWeaver Visual Composer Reference Guide. By default, the toolbox appears at the bottom of the displayed board. You can change its location or hide it by choosing Tools Options Workspace. You can customize each toolbox by choosing Tools Customize.
14
July 2008
1.3.3.3
Navigation Icons and Navigation Path
Definition
The icon at the top left of the workspace, to the left of the navigation path, indicates the type of model component that is presently being viewed. The navigation path enables you to jump from model level to level.
Use
The different icons, listed in the following table, are useful when viewing component properties and for reminding you of where you are in the model hierarchy.
Features
Icon Description New model (no element has been selected yet) Package Page iView
You can use these icons in conjunction with the navigation path, which displays the model levels or components into which you have drilled down. Double-clicking the >> icon between the parts of the path displays a list of the model elements included in the component to the left. For example, in the following path:
The package Judy includes three packages called Eventing, Interrelated iViews and New Eventing. The user has drilled down into the Interrelated iViews package and opened the BanksB iView.
15
July 2008
1.3.3.4
Task Panels
Definition
The task panels, to the right of the workspace, display one set of tools at a time. Each tool set can be displayed using the task-panel toolbar to the right of the panel.
Structure
The following task panels are available: Task Panel Get Started Browse Model Toolbar Button Description Appears when no model is open in the workspace. Lets you open an existing model or create a blank model. Displays a hierarchical tree that represents your model. You can use the tree to modify the model hierarchy and to navigate the model. This task panel also includes the Search Model option. Used to add the elements to the model, on the Design board.
Compose Model Configure Element Inspect Formulas Find Data Services Deploy to Portal
Used to define properties of the various model elements. Some of the properties relate only to the design environment, while others relate to the behavior and display of content at runtime. Used to view and edit formulas in the fields of the different model components. Used, in conjunction with the Design board, to locate and add data services to your model. Data services are associated with back-end systems accessed through the portal. Used to compile and deploy the model to the portal. Once deployed, the models are available in the Portal Content Directory (PCD) under the Visual Composer node.
The tools on the task panels are dynamic and context driven. In other words, the displayed task panel provides options relevant only to the model element currently selected in the workspace. For example, if a page is displayed on the Design board, only elements that can be added to a page are displayed in the Compose Diagram task panel. For information about using each task panel as you build your model, see the following sections of this manual: Find Data [Page 61] Compose the Model [Page 63] Configure Elements [Page 72] Deploy the Model [Page 75]
For detailed information about each aspect of the task panels, see Task Panels [External] in the SAP NetWeaver Visual Composer Reference Guide.
16
July 2008
1.3.4
Managing Models
This section describes how to create, open, save and manage models in Visual Composer. You perform these functions using options in the Model menu, or by clicking the associated toolbar button. Topics in this section include: Creating a New Model [Page 17] Opening a Model [Page 18] Saving a Model [Page 18] Managing Multiple Versions of a Model [Page 19] Exporting a Model [Page 20] Importing a Model [Page 20] Copying and Pasting Between Models [Page 21] Deleting a Model [Page 22] Renaming a Model [Page 22] Using the Model Browser [Page 23]
1.3.4.1
Creating a New Model
Prerequisites
You have defined the needs of your application and know: Which data services (such as queries, BAPIs or other RFCs) you need in your model In which back-end system each required data service resides The alias defined in the portal for each back-end system The name and password of the user has been mapped to the connected back-end applications
Procedure
...
1. Choose Model New Model or click the New Model toolbar button. The Create New Model dialog box is displayed. 2. In the model hierarchy, click through the hierarchy to define the location at which to save the new model. The full path is shown in the Model path field, 3. In the Model name field, enter a name for your model, adhering to these conventions: Only alphanumeric characters and underscores No spaces or punctuation marks No special characters
4. Click OK.
17
July 2008
To create a model in a specific location not the location indicated in the Path field choose Model Manage Models. In the Model Browser dialog box, select the folder in which to create the new model (you can also create a new folder using the New Folder toolbar button) and choose the New Model toolbar button.
Result
The model is created in your workspace on the Visual Composer server and the Compose Model task panel is displayed at the right, with a set of icons indicating the different model elements that you can create: Package, Page and different types of iViews. For information about starting your model-creation process, see First Steps [Page 61]. To define properties for a model profile, see Defining Model-Profile Properties [Page 185].
1.3.4.2
...
Opening a Model
1. Choose Model Open Model or click the Open Model button in the main toolbar. The Open Model dialog box is displayed. (If the Get Started task panel is displayed at the right, you can select the file from the hierarchical tree or from the Recently Used Models list in that task panel.) 2. In the Open Model dialog box, expand the node in which your model resides: MyModels includes the models that you create in your client workspace. Public includes models created for general use by all users.
3. Select the model you want to open and click Open. The model is opened on the Design board. If you receive a message that the model is locked, you can: Open the model in read-only mode, for viewing only Open the model in read-only mode and use Model Save As to save a copy and edit it.
See Unlocking Models [Page 186] for information about unlocking your own models. In the Open Model dialog box, if you decide not to open a model but rather to create a new one instead, click New and create the new model according to the instructions in section Creating a New Model [Page 17].
18
July 2008
1.3.4.3
Saving a Model
Use
You can save the model that is open in Storyboard, or you can save the model as a new file in order to keep the previous version as well (without the most recent changes).
Procedure
To save the open model, overwriting the previous one, choose Model Save Model or click the Save Model button in the main toolbar. To save the most recent changes in a new model, leaving the previous version as is:
... ...
1. Choose Model Save As. The Save As dialog box is displayed. 2. In the model hierarchy, drill down to the location at which the new model should be saved. You can create a new folder in your workspace by clicking the New Folder ( ) button in the toolbar. 3. In the Model name field, enter a name for the new model. 4. Click OK.
1.3.4.4
Managing Multiple Versions of a Model
Use
You can maintain more than one version of a model by using the Model Save New Version option. This enables you to make changes to an open model and save both versions, before and after the changes. Subsequently, you can recall other versions of an open model using the Model Manage Model Versions option.
Procedure
To create a new model version:
...
1. With the original model open in Storyboard, choose Model Save New Version. The Save New Version dialog box is displayed. 2. In the Description field, type text that describes the changes made to the model when it was opened. This helps you subsequently recall the differences of each version. When you open the Model Browser (Model Manage Models), a number is displayed after the model in parentheses, indicating the number of versions that have been saved of the model. When you open the model, the latest version (highest number) is displayed. To revert to a previous version of a model:
...
1. Open the model. 2. Choose Model Manage Model Versions. The Select Model Version dialog box is displayed, listing each version of the model, along with its description, its creation date and the user who created it. 3. Choose the version to which you want to revert by selecting the checkbox in the row of that version. 4. Click Revert. The open version is closed and the selected version is opened in Storyboard, becoming the most recent model version.
19
July 2008
1.3.4.5
Exporting a Model
Use
You can save a model as a GML (Generic Modeling Language) file so that it can subsequently be imported into another model or into a different Visual Composer Storyboard. You can save the file on your local hard drive, on a computer in your network or in your workspace on the Visual Composer server.
Prerequisites
The model is open in Storyboard, at the level to be exported.
Procedure
... ...
1. Choose Model Export to File. The system checks the integrity of the model while it displays an Exporting message. The File Download dialog box is then displayed. 2. In response to the Do you want to save this file? message, click Save. The standard Windows Save As dialog box is displayed. 3. Use the Save in drop-down list to navigate to the location at which the .gml file is to be saved, and in the File name text box at the bottom, indicate the name under which the model should be saved. 4. Click OK.
Result
The model is saved as a .gml file that can be imported into other Visual Composer models, using the Model Import from File option. Visual Composer has no way of validating that imported models were not modified outside of Visual Composer. In order to enable such validation, you need to use a digital signature mechanism.
20
July 2008
1.3.4.6
Importing a Model
Use
You can import a model that was previously exported from Visual Composer Storyboard and saved as a GML (Generic Modeling Language) file, on a computer in the network or on the Visual Composer Server.
Prerequisites
In Storyboard, the model that will include the imported model is open. The model must be open at the level in which you want to import the model: package or page. You cannot import a model into an open iView.
Procedure
... ...
1. Choose Model Import from File. The Import from File dialog box is displayed. 2. To locate the model to import, click the Browse button at the top right. The Choose file dialog box is displayed. 3. Use the Look in drop-down list to navigate to the model that you want to import and click Open. The file path and name are displayed in the text box. 4. Do one of the following: Select the Merge imported package into this diagram checkbox to merge the contents of the imported model with the other model elements in the open diagram. Clear the checkbox to import the model contents within a package (folder) so that you can drill down into the imported package and manipulate the model separately.
5. Click OK. Visual Composer has no way of validating that imported models were not modified outside of Visual Composer. In order to enable such validation, you need to use a digital signature mechanism.
Result
Depending on your Merge . . . selection in step 4, the contents of the model are imported into your open model.
21
July 2008
1.3.4.7
Copying and Pasting Between Models
Use
You can copy a high-level element iView, page or package from one model, and paste it into another model. Be aware that images and global entry lists (both static and dynamic) cannot be included in the copy-paste.
Prerequisites
The model containing the element that you want to copy is open in Storyboard.
Procedure
...
1. In your model, select the element that you want to copy. 2. Choose Edit Copy (or choose Copy from the context menu). 3. Close the model and open the model into which you want to paste the element. 4. Choose Edit Paste (or choose Paste from the context menu).
1.3.4.8
Deleting a Model
Prerequisites
The model to be deleted is not open in any Storyboard.
Procedure
... ...
1. Choose Model Manage Models or click the Manage Models button in the main toolbar. The Model Browser dialog box is displayed. 2. In the model hierarchy, drill down to the model to be deleted and select it. 3. Click the Delete ( displayed. ) button in the toolbar. A Confirm delete message is
If a confirmation message is not displayed, choose Tools Options Composing tab, and select the relevant Request confirmation before deleting checkbox. 4. Click Yes to delete the model.
22
July 2008
1.3.4.9
...
Renaming a Model
1. Choose Model Manage Models or click the Manage Models button in the main toolbar. The Manage Models dialog box opens. 2. In the model hierarchy, drill down to the model you want to rename and select it. 3. Click the Rename ( ) button in the toolbar. The name is activated for you to edit it.
4. Edit the name of the model, adhering to these conventions: Only alphanumeric characters and underscores No spaces or punctuation marks No special characters
5. Press Enter.
1.3.4.10
Using the Model Browser
Use
The model browser enables you to perform basic operations on models residing in the model tree.
Procedure
... ...
Choose Model Manage Models or click the Model Browser button in the main toolbar. The Model Browser dialog box is displayed. The toolbar at the top provides the following options: New Model See Creating a New Model [Page 17] New Folder Creates a subfolder within the selected folder Open Opens the selected model Delete Displays a confirmation message before deleting the selected model Rename Activates the Rename function for the selected model Search Displays the Search for Models and Folders dialog box used to find all models and folders in the Local Repository
You can select any model and open it directly from the Model Browser, or perform any other function accessed through the toolbar. You can also move models between folders (including between the MyModels and Public repositories) by dragging-and-dropping them from one folder to another. You cannot move folders and locked models.
23
July 2008
1.3.5
Defining the Storyboard Environment
Definition
The Tools Options menu option displays a set of dialog boxes that enable you to customize the layout and general behavior of Visual Composer Storyboard. You should review the options before beginning to create models in Visual Composer.
Use
To access the dialog box, choose Tools Options. The dialog box that appears has the following tabs: Model, for defining the top-level functionality of model creation Drawing, for defining what occurs as you drag-and-drop elements onto the Design board, and how the items are drawn and displayed Composing, for indicating if and how you want to be prompted for information required when adding elements to the model Workspace, for positioning the task panel and the workspace toolboxes, and adjusting the layout of multiple workspace windows Compiler, for defining processes for finding data services and deploying the model Administration, for defining monitoring capabilities
Features
For a table explaining each operation available in the Options dialog boxes, see Options Dialog Box [External] in the SAP NetWeaver Visual Composer Reference Guide. Points to Note: The following parameters are important for defining the environment when you begin working with Visual Composer. Tab Name Model Option Reload last model at startup Description Used to automatically display the last model worked on when you next access Visual Composer. If this is not selected, you need to open a model each time you access the application. This is important when dragging layers onto the Design board. However, it is recommended to leave this checked so that you need to manually drag the elements into the layer, thereby joining them into one unit.
Drawing
Avoid overlapping shapes
24
July 2008
Tab Name
Option Select all shapes partially within selection box
Description Allows you to select a group of shapes by dragging the bounding rectangle over them, but not necessarily including them fully within the rectangle.
Composing
Ask for user intervention when These options activate the display of dialog boxes that creating: ask you to select elements and fields within a UI component so that your model does not get overloaded with data that is not needed. Runtime PAR name prefix Lets you define your deployment environment. Lets you define the prefix of all PAR files created by Visual Composer. The path to the Portal Catalog folder that will include the compiled file. Make sure that the folder already exists in the portal, with administrator Full Control permissions.
Compiler
Portal deployment folder
25
July 2008
Go and Create
This section includes a group of incremental examples, in which you build a base model and proceed to enhance the model by using a range of different functionalities of Visual Composer. The following map describes the tutorials included here, along with lists of the tasks you perform in each one:
SalesordersA Example 2.1 Salesorder iView
SalesordersB
SalesordersC
Find data service Define input Define output table Deploy
Add second data service Create a dynamic expression Lay out iView (Layout board)
Fine tune layout Use Simulator Export model
BanksB
BanksD
BanksA Example 2.2 Bank Information iView

Create base model Adjust layout Simulate model Add a data service as input Create a sort operator Export model Create a Wizard
BanksC
Add a pop-up iView
Step A Example 2.3 BI iView
Step B
Step C
Select XML BI data service Use BI Integration wizard Preview the results
Change a table to a column chart Map fields in chart
Deploy to Flash format
Before you begin creating models, you need to define your deploy environment. To do so, go to Tools Options Compiler tab, and in the Runtime drop-down list, select the required deploy environment. The main topics (tutorial series) are: Creating a Salesorder iView [External] Creating a Bank Information iView [External] Creating a BI iView [External]
26
July 2008
2.1
Creating a Salesorder iView
In this example, you build an iView in which the user can input a customer number and sales organization number in order to display a table - sorted by document number - of all orders placed by that customer. From the displayed list, the user can then select a document and subsequently display the order details - Material, Currency, Net Price, Reference Quantity and relative Order Size - in a second table.
Prerequisites
You have access to the IDES system from the connected portal. You have been mapped to a user of the ERP (R/3) back-end system. The following BAPIs are available from the system: o o BAPI_SALESORDER_GETLIST BAPI_SALESORDER_GETSTATUS
Process
You build the iView in three stages: 1. Create the basic flow for generating the tables of orders: Creating the Base Model 2. Enhance this model by adding a second data service for displaying the order details: Adding a Second Data Service 3. Fine-tune the iView layout, deploy the model and export it: Fine-Tuning
Result
In this incremental example, you learn to perform a number of basic tasks of Visual Composer, including: Create an iView component and add data services. Define an input form and a start point for the first data service. Define a table view for output from the first data service. Add a second data service, and map the data from the output table to it. Define a table view for output from the second data service. Define a dynamic expression in the output table, using the Expressions Editor. Adjust the layout of the views. Define a list of entries for a drop-down list. Preview the iView. Deploy the iView to the portal.
27
July 2008
2.1.1
Creating the Base Model
In this example, you define the basic elements - a data service with input form, start point and output table - of the model.
Prerequisites
As outlined in Creating a Salesorder iView
Procedure
1. Begin by creating a model: a. Choose Model New Model .
b. In the Create New Model dialog box, expand the folder hierarchy to navigate to the folder in which you want to save your model. The path to the model is displayed in the Model path field. c. Enter a Model name for the model, such as: FirstExample. d. Click OK. The Design board is displayed. 2. Create an iView (dragging the iView icon from the Compose Model task panel) and call it Salesorders. 3. Add the data services:
...
a. Open (double-click) the iView and click the Find Data button in the task-panel toolbar at the right. b. From the System drop-down list, choose the IDES system defined in the portal (the source of the data we need), such as IDES_R3. c. In the Service field, enter: BAPI_SALESORDER and click Search. A list of all data services matching the search string is displayed. d. Drag BAPI_SALESORDER_GETLIST onto the workspace. The Define Data Service dialog box is displayed, listing the ports and the metadata of the data service. e. In the left pane of the Define Data Service dialog box, select the SALES_ORDERS check box to display the additional, Sales Orders, port. Click OK. A Confirmation message is displayed asking if you want to use all of the fields processed through this port. Click Yes. f. To test the functionality of the Salesorder Getlist data service, right-click the icon and from the context menu, choose Test Data Service. The Test Data Service dialog box is displayed. To test the data service: i. ii. iii. In the Customer Number field, enter 0000001002 and in the Sales Organization field, enter 1000. Click Execute. All the information for the sales orders placed by customer 1002 is displayed. Click Close to remove the Test Data Service dialog box.
28
July 2008
4. Define the input: a. Drag out from the Input port of SalesorderGetlist, release, and from the context menu, choose Add Input Form. The Select Input Fields dialog box is displayed, listing the metadata that can be input from the start point to the data service. Select CUSTOMER_NUMBER and SALES_ORGANIZATION and click OK. b. In order to define a set of initialization values for the iView, drag out from the same Input port again and choose Start Point. The Select Input Fields dialog box is displayed again. Select CUSTOMER_NUMBER and SALES_ORGANIZATION and click OK a second time. c. Double-click the connecting line between the start point and the data service. The Configure Element task panel is displayed at the right. Note that in the list of fields at the bottom, CUSTOMER_NUMBER and SALES_ORGANIZATION have been mapped to the connected data service. d. In the Assigned v\Value column of the CUSTOMER_NUMBER row, select the text and overwrite it with '0000001002' (be sure to use the single quotation marks). Do the same in the SALES_ORGANIZATION row, using the value '1000'. These values will serve as the default input values for the iView. e. Save your model. At this stage, it should look similar to the following:
(Defining the Input) 5. Define the output: a. Drag out from the Sales Orders output port of Salesorder Getlist, release and from the context menu, choose Add Table View. The Select Display Fields dialog box is displayed. b. Select the following fields to be displayed in the table of sales orders: CURRENCY, MATERIAL, NAME, NET_PRICE and SD_DOC. c. Click OK. The Sales Order Table icon is added to the Design board. 6. Save the model.
29
July 2008
Result
Your model should look similar to the following:
30
July 2008
2.1.2
Adding a Second Data Service
In this example, you add a second data service to the model, create a dynamic expression and lay out the model.
Prerequisites
You have created the model in Creating the Base Model and it is open in Storyboard.
Procedure
1. Add a second data service to the model: a. With the model open in the Design board, click the Find Data button in the task-panel toolbar and drag BAPI_SALESORDER_GETSTATUS onto the workspace. b. In the Define Data Service dialog box, add the STATUSINFO output port. Click OK and then Yes to the displayed message box. c. You can test the functionality of the Salesorder Getstatus data service (selecting Test Data Service from the right-click context menu) using 0000005650 as input to the Salesdocument field.
2. Define the input to the second data service: a. To enable the user to select a document and get all of its details, the table created in the first example (Sales Orders Table) must serve as input to the second data service: Salesorder Getstatus. Therefore, connect the out port of the table to the Input port of Salesorder Getstatus. b. If not already displayed, open the Configure Element task panel and click the select line to the Inputport of Salesorder Getstatus. As you can see in the table at the bottom of the task panel, the SALESDOCUMENT field of the Salesorder Getstatus data service must receive data from the table. To map the data, assign @SD_DOC to the SALESDOCUMENT field, by clicking on the fx column and choosing it from the drop-down list (you will need to scroll down in the list). 3. Define the output from the second data service: a. In order to view the details of the selected document, the output can be displayed in a second table. First, drag out from the Statusinfo out port on Salesorder Getstatus, release and from the context menu, choose Add Table View. The Select Display Fields dialog box is displayed. b. Select the following fields to be displayed in the table: CURRENCY, MATERIAL, NET_PRICE and REQ_QTY. These are the details of the selected sales order. Click OK. The Statusinfo Table icon is added. c. Save the model. It should now look similar to the following:
31
July 2008
d. Add a field with a dynamic expression: This section explains how to add a virtual field to the second table (Statusinfo Table), in order to dynamically describe the order size of the selected material i. On the Design board, double-click StatusInfo Table. The Configure Element task panel is displayed, showing the properties of the table itself and listing the columns displayed in the table. Under the table at the bottom, click the Control dialog box is displayed. (Add) button. The New UI
ii. iii.
From the Select control type list, choose Expression Box. In the Fieldname field, type Order_Size (you can leave Text as the Data type) and click OK. Note that the Order_Size field is added to the list. The blue text indicates that the field is editable. Double-click the Order_Size row in the table to display the Control Properties dialog box. Click the General tab and to the right of the Expression field at the bottom, click Formula. The Computed Value dialog box is displayed, to enable you to create your formula for the computed field. In the list of functions in the right pane, expand the Conditional Functions group and double-click the IF option. The following expression is displayed in the left pane: IF(test,expr1,expr2) A Help pane is displayed at the bottom left, describing the function and giving an example of its use.
iv. v.
vi.
vii.
In the left pane, edit the formula as follows: IF(@REQ_QTY*@NET_PRICE>100000,@REQ_QTY*@NET_PRICE,'Small')
32
July 2008
When creating your formula, you can expand the Data Fields option in the right pane and drag the field names from the list, in order to assist you in data entry.
This formula indicates that if the value of the order - requested quantity (REQ_QTY) multiplied by net price (NET_PRICE) - is greater than 100,000, the exact value will be displayed in the table. Otherwise (if the resulting value is less than 100,000) the word Small will be displayed in the list rather than the actual amount. viii. ix. x. xi. Click Check to ensure that the formula is valid. The following message should be displayed: Formula is valid. Click OK. The formula you created is displayed in the Expression field. Click Close to enter the dynamic expression in the Order_Size field of the table. Save the model.
4. Rearrange the iView layout by clicking the Layout tab and clicking the Configure button in the task-panel toolbar (if not already selected). a. Organize the iView as needed. The first table (Sales Orders Table) should be below the Input Form. The second table (Statusinfo Table) should be at the top right of the layout. b. Click the edge of the Input Form, and click the Configure button in the taskpanel toolbar. From the Align contents drop-down list, choose Absolute. This option lets you align the UI elements as you want. i. From the Place labels drop-down list, choose Above. Labels are placed above the fields. Adjust the height of the form accordingly to accommodate all fields and controls. From the Size frame drop-down list, choose Fit. This ensures that the form shrinks or expands at runtime so that it tightly fits around the fields and controls.
ii.
c.
Change the Customer Number label as follows: i. Select the field, right-click it, and from the context menu, choose Properties. The Control Properties dialog box is displayed.
33
July 2008
ii. iii. iv.
Click the Display tab. In the Label field, change the label to "Customer No.". From the Label position drop-down list, choose Long label. Leaving the Control Properties dialog box open, click in the Sales Organization field and change its label to Sales Org. Then make it a long label as well. Click Close.
v.
...
d. Rename the tables as follows: i. Right-click the edge of the Sales Orders Table (below the Input Form) and choose Edit Title from the context menu. Overwrite the text with Salesorders. Change the Statusinfo Table name to Details.
ii.
e. Save the model. It should look similar to the following:
(Deploy Model) button in the toolbar. The 5. Deploy the model by clicking the model is compiled and deployed to the portal to which you are connected.
34
July 2008
Result
Your runtime model should look similar to the following:
35
July 2008
2.1.3
Fine-Tuning
In this example, you define an entry list for a drop-down list control, refine the layout, deploy the model and then export it.
Prerequisites
You have created the example in Adding a Second Data Service and it is open in Storyboard.
Procedure
1. Modify the controls of the Input Form:
...
a. Click the Layout tab. b. Change the order of the fields by moving the Sales Org. field up and the Customer No. field down c. Right-click the Sales Org. field and choose Properties from the context menu. The Control Properties dialog box is displayed. d. Click the General tab and from the Control type drop-down list, choose Dropdown list to change the field type. This requires you to create a list of menu options for this control. e. Click the Entry List tab. You want to define a Static list of entries, meaning a set list of entries whose values are defined for them. f. Click the (Add) button at the right to create the first entry. In the Value column, write 1000 and in the Display Text column, write Flat Screens. g. Create two more entries (using the Add button), as follows: Value 2000 Display Text Full Screens
3000
Jumbo Screens
h. Click Close. i. Go back to the Display tab and from the Label position drop-down list, choose Long label. 2. Save the model. Your file is saved, in .gml format. When building other models, you can import the file using the Model Import from File option. 3. Deploy the model and view it in runtime. It should look similar to the following:
36
July 2008
4. Finally, export the model and save it on your computer:

...
a. Click the Design tab and go to the top level of your model by clicking FirstExample (the closed iView level) in the navigation path above the board. b. Choose Model Export to File. An Exporting message is displayed, followed by the File Download dialog box. c. Click Save and in the Save As dialog box, navigate to the location in which you want to save the model. d. Click Save.
Result
Your file is saved in .gml format. When building other models, you can import the file using the Model Import from File option.
37
July 2008
2.2
Creating a Bank Information iView
In this example, you build an iView that enables the user to find the address of a bank.
Prerequisites
You have access to the IDES system from the connected portal. You have been mapped to a user of the ERP (R/3) back-end system. The following BAPIs are available from the system: o o BAPI_BANK_GETLIST BAPI_BANK_GETDETAIL
Process
After you build the base model for displaying the bank details, you can complete the model in one of two ways: You add a second, "feeder" data service, which provides bank lists according to country. You create a popup iView to assist in finding the bank key.
This example includes four tutorial sections: Creating the Base Model Adding a Data Service for Choosing Banks Creating a Popup iView Creating a Wizard
Result
In this incremental example, you learn to perform a number of basic tasks of Visual Composer, including: Create the basic iView components that comprise the main information flow. Add a second data service and connect it before the base model. Add a sort operator to sort the table data. Export the model for subsequent use. Create a popup iView. Deploy the iView to the portal. Create a wizard based on the second model.
38
July 2008
2.2.1
Creating the Base Model
In this example, you define the basic elements a data service with input form and output form of the model. This will serve as the root model on which you can build in different directions.
Prerequisites
As outlined in Creating a Bank Information iView.
Procedure
1. Create the model and name it appropriately, such as SecondExample. 2. Create an iView (dragging the iView icon from the Compose Model task panel) and call it BanksA. 3. Add the data service:
...
a. Drill down into the iView, click the Find Data button in the task-panel toolbar and from the System drop-down list, choose the IDES system defined in the portal (the source of the data we need): such as IDES_R3. b. In the Service field, enter: BAPI_BANK_GET and click Search. A list of all data services matching the search string is displayed. c. Drag BAPI_BANK_GETDETAIL onto the Design board. The Define Data Service dialog box is displayed. d. Select the BANK_ADDRESS port and click OK. e. Test the data service (choosing the Test Data Service option from the context menu), using the following values:
...
Bankcountry: US Bankkey: 12345678 or 021000089
4. Define the input: a. Drag out from the Input port of Bank Getdetail, and choose Add Input Form from the context menu. The Select Input Fields dialog box is displayed. b. Select both the BANKCOUNTRY and BANKKEY checkboxes and click OK. c. You can double-click the submit line to see (at the bottom of the Configure Element task panel) that the fields have been mapped automatically to the Input port of the data service. 5. Define the output from Bank Getdetail:
...
a. Drag out from the BankAddress output port of Bank Getdetail, and choose Add Form View from the context menu. The Select Display Fields dialog box is displayed. b. Select the following fields to display in the iView: BANK_NAME, BANK_NO, CITY, REGION and STREET and click OK.
39
July 2008
6. Adjust the iView layout by clicking the Layout tab:

...
a. Right-click the Bankcountry field that appears in the Input Form and choose Properties from the context menu. b. On the Display tab, change the label of the field to Bank Country, and from the Label position drop-down list, choose Long Label.In the Layout workspace, the field label is updated. c. Repeat the step for Bankkey, making it Bank Key, with a long label. d. Rearrange the form to accommodate the changes you made.
You can align fields within a form, or views on the layout, by selecting each item (using the Ctrl key) and clicking the Layout toolbox at the bottom. (Align Controls) button in the
e. Resize the Bank Address Form and rearrange the fields as follows: BankName, BankNo., Street, City, Region. 7. Save the model, which should look something like this:
8. Deploy the model by clicking the
(Deploy Model) button in the toolbar.
40
July 2008
Result
This model is the base iView for going in one of two directions: Building an input section to the iView, by adding a second data service (Adding a Data Service for Choosing Banks) and subsequently creating a wizard (Creating a Wizard) Creating a popup iView to bring in the same data (Creating a Popup iView)
41
July 2008
2.2.2
Adding a Data Service for Choosing Banks
In this example, you add a second data service to the model, to serve as input for the iView. The user will be able to input a country in the input form and select from a list of banks in that country. You also add a sort operator to sort the results returned by the first data service.
Prerequisites
Procedure
1. Copy-and-paste the first iView. This will retain your original version for future modeling.
...
a. Go to the Design board and at the top level (SecondExample) of your model, select the BanksA icon and copy it (clicking the Copy button in the main toolbar or by right-clicking and choosing Copy from the context menu). b. Paste the iView onto the workspace and rename it BanksB (using the context menu). 2. Open (drill down into) the BanksB iView and add a second data service:
...
a. Click the Find Data button in the task-panel toolbar and drag BAPI_BANK_GETLIST onto the Design board on the left. You may have to move the existing elements to the right first. In the Define Data Service dialog box, select the BANK_LIST output port and click OK. b. You can test the functionality of the Bank Getlist data service (choosing Test Data Service from the context menu) using US, DE or GB as input to the Bank Ctry field and any number for the Max Rows field. 3. Define the input to the new data service by dragging out from the Input port of Bank Getlist and choosing Add Input Form. In the Select Input Fields dialog box, select both checkboxes. The fields of the form are mapped automatically to the data service. 4. Define the output from the data service:
...
a. Because the data from the Bank Getlist data service should serve as input to the existing Bank Getdetail data service, the Input Form connected to the Input port of Bank Getdetail is not needed. Select it and delete it. b. Add a sort operator: i. Drag your mouse out from the Bank List output port of Bank Getlist and from the context menu, choose Sort Data. The Sort operator is added to your model. Double-click on the operator to display the Configure Element task panel. (Add) button and from the At the bottom of the task panel, click the drop-down list in the Sort by column, select BANK_NAME, to indicate that the list should be sorted alphabetically according to bank name. In the Direction column, leave the up option (meaning that the list will be sorted from A to Z).
ii. iii.
42
July 2008
c. Add the table view: i. Drag out from the output port of the Sort operator and choose Add Table View from the context menu. In the Select Display Fields data box, click Select All at the top and click OK. Rename the newly-added table view icon: Bank List Table. All of the fields from the Bank List output port of the Bank Getlist data service will be channeled through the Sort operator to the input port (in) of the Bank List Table. The fields selected for display are listed in the table at the bottom of the Configure Element task panel. Drag out from the out port of Bank List Table to the Input port of Bank Getdetail. Double-click the select line. A list of fields is displayed at the bottom of the Configure Element task panel. Click in the BANKCOUNTRY row, click the fx at the right of the Assigned Value column, and from the dropdown list, select the corresponding field name. This maps the input field of the data service ( InputField column) to the field that is output from the table (Assigned Value column). Do the same for the BANKKEY field. Click the Input port of the Bank Getdetail data service and select the BANKKEY row. Clear the Required checkbox at the bottom. The data service will not require that field as input from the table.
ii. iii.
d. Map the output table to the input of Bank Getdetail: i. ii.
iii.
5. Rearrange the iView layout by clicking the Layout tab and making the changes you require. You should move the new Input Form to the top left, the Bank Address Form to the top right and the Bank List Table up beneath the Input Form. You may want to change the field labels as well. 6. Save the iView. It should look similar to the following:
7. Deploy the iView by clicking the
(Deploy Model) button in the toolbar. ), saving it on your hard disk
8. Export the model (choose Model Export to File for subsequent use in this example.
43
July 2008
2.2.3
Creating a Popup iView
In this example, you create an alternative to the iView designed in Adding a Data Service for Choosing Banks: Rather than add a data service with attached forms to the "front" of the iView, you create a popup iView from the initial input form.
Prerequisites
Procedure
1. From the Design board top level (SecondExample), copy-and-paste the first iView (BanksA) again and rename it BanksC. 2. Open (drill down into) the iView and choose the Layout tab. As you can see, in the Input Form, the user is expected to enter the country of the bank and the bank key. In order to assist the user in finding the bank key, we will create a popup iView accessed from this form. 3. Create the button in the Input Form.
...
a. Click the edge of the Input Form and then click the Configure button in the taskpanel toolbar. The fields and controls in the form are displayed in the table at the bottom of the task panel. (Add) button at the bottom of the task panel. The New UI Control b. Click the dialog box is displayed. c. From the Select control type list, choose Pushbutton and in the Fieldname field, enter Choose_Bank. This creates a new control in the Input Form. d. On the Layout board, move the new button to the right of the Bank Key field. This way, users can enter the bank country, and rather than manually entering the bank key, they can click the button and get information directly. You should expand the width of both the form and the table to accommodate the button. e. Right-click the button, choose Properties from the context menu and click the Action tab to define the event that is associated with the button. f. Define the action as follows: i. ii. iii. iv. Click the the list. (Add) button and choose Custom Action at the bottom of
In the Action Name column, enter Choose Bank. Be sure that the value in the Apply to field is Self. This assigns an action to the button that will activate the Choose-bank line to the popup. Click Close.
Your layout should look something like the following:
44
July 2008
4. Save the model. 5. Return to the Design board, where we will create the popup iView:
...
a. Drag out from the out port of the Input Form and choose Open Popup from the context menu. The Select Popup iView dialog box is displayed. b. At the bottom of the dialog box, choose Create New iView and click OK. The icon for the popup view is added, with an arbitrary name, such as View S76. Rename the popup Choose a Bank. c. Click the Evt1 line between the form and the popup icon and change the event name to choose_bank. This maps the button in the form to the popup. 6. Build the popup iView:
...
a. Right-click the popup icon and choose Drill Down from the context menu. This opens the new iView. b. Import BAPI_BANK_GETLIST using the Find Data Services task panel. c. Drag out from the Input port of the data service and create a Start Point, selecting BANK_CTRY as the input field. d. Double-click the Input port of Bank Getlist, select MAX_ROWS at the bottom of the task panel and clear the Required? checkbox. e. From the Bank List output port of the data service, choose Add Table View. In the Select Display Fields data box, click Select All and click OK. f. From the out port of the Bank List Table, add an End Point, selecting BANK_CTRY and BANK_KEY as the output fields. g. Click on the evt1 line to the end point and rename it Close. h. Right-click the Bank List Table and choose Create Toolbar from the context menu. The Create Toolbar Buttons dialog box is displayed.
45
July 2008
i. ii.
Create a button that will activate the Close event: (Add) button at the bottom left and create a button called Click the Close (Button name field). Click the (Add) button above the Action Name table and choose Custom Action from the list. Name it ClosePopup. Click OK.
iii. iv.
i. Right-click the line connecting the table to the end point and rename it closepopup. j. Return to the BanksC iView and save the model. 7. Map the input and output to/from the popup iView:
...
a. Double-click the choose_bank line. The input and output fields are displayed at the bottom of the Configure Element task panel. b. In the top table, use the Assign From column to map the @BANKCOUNTRY field coming from the Input Form to the BANK_CTRY field required at the input to the popup. In the second table, use the Popup Output column to map the two fields output from the popup to the two fields (BANKCOUNTRY and BANKKEY) required by the Input Form. 8. Switch to the Layout board again, and adjust the layout (by widening both the form and the table, again) to compensate for the popup iView, which will be displayed within the source iView. 9. Save the BanksC iView and deploy the iView. It should look something like this:
Result
When you run the model, enter the bank country and click Choose Bank. The results should look something like this:
46
July 2008
When you click Close in the popup, the bank key is automatically transferred to the Input Form. From there, click Submit and the bank details are displayed.
47
July 2008
2.2.4
Creating a Wizard
In this example, you build a wizard (guided procedure) on top of the model that you created in Adding a Data Service for Choosing Banks (model BanksB). You do so after importing the BanksB model.
Prerequisites
You have created the model in Adding a Data Service for Choosing Banks and have the base model (Creating the Base Model) open in Storyboard.
Procedure
1. From the Design board top level (SecondExample), import the model:
...
a. Choose Model Import from File. displayed.
The Import from File dialog box is
b. Click the Browse button and navigate to the BanksB.gml file that you exported previously. c. Click OK and rename the new iView BanksD. 2. Open (drill down into) the BanksD iView and create the layers for the wizard:
...
a. Click the Compose button in the task-panel toolbar. b. From the Components group of elements, drag a Layer to the top-left side of the Design board, and drag the Input Form into it. (By dragging elements into layers, you effectively attach them into a single unit.) c. Drag another layer to the center and drag the Bank List Table into it. d. Drag the third layer to the right, drag the Bank Address Form into it and move the layer to the top right. 3. Configure the wizard:
...
a. Click the Configure button in the task-panel toolbar. b. From the Navigation control drop-down list in the Layers group of attributes, choose Wizard. c. In the table at the bottom, change each Step name as follows (you can leave the Label numbers as they are): 1 Enter Country 2 Select Bank 3 View Details
4. Save the model. It should look something like this:
48
July 2008
5. Create the transitions and their triggers:

... ...
a. Select the Enter Country layer and drag the green dot at the top to the left edge of the Select Bank layer. When the line turns red, release the mouse. A transition line called *next is created. b. In order for the data entered in the Input Form to be transferred to the Bank Getlist data service, while triggering the transition to the Select Bank layer, both events must be given the same name: i. ii. iii. First, select the Input Form and double-click on the SUBMIT button row in the task panel. The Control Properties dialog box is displayed. In the Display tab, rename the button "Next". In the Action tab, click click iv. v. vi.
...
(Delete) to delete the Submit action. Then
(Add) and create a new Custom Action named Next.
Close the Control Properties dialog box. Double-click the submit line and rename it Next. Do the same for the *next transition line.
c. Now create a transition between the Select Bank layer and the View Details layer, and rename it Next as well. d. For this middle layer, we need buttons going both forward and backwards: i. ii. iii. Right-click the Bank List Table and choose Create Toolbar from the context menu. The Create Toolbar Buttons dialog box is displayed. As you did previously, create a button called Next, which triggers a Custom Action also called Next. For a button called Back, we can use a predefined action rather than creating a transition and using a Custom action. To do so, create the button, call it Back, and choose History Back as the assigned action. Then click OK.
49
July 2008
e. For the View Details layer, create transitions and events as follows: i. ii. iii. Create a transition from the View Details layer to the Enter Country layer and rename it BackToStart. Right-click the Bank Address Form and choose Create Toolbar from the menu. Create two buttons: Back, using the System action:History Back Back to Start, using a Custom action called BackToStart.
f. Click OK and save the model. 6. Lay out the iView by clicking the Layout tab. The first stage of the wizard (Enter Country) is displayed with the Input Form.
...
a. In the Input Form, move the fields down and the Next button to the top left, to be consistent with the buttons in the other toolbars. b. In order to display the contents of all the layers simultaneously, press Ctrl and select the other two numbered steps. c. Move the Bank List Table and the Bank Address Form to align with the top-left corner of the Input Form, one on top of the other. d. Click on the workspace grid and then click the third step (View Details) in order to show its contents only. Resize the Bank Address Form. 7. Return to the Design board to view the complete model. It should look similar to the following:
50
July 2008
Tip You can use the following three buttons in the toolbox below the Design board to view parts of your model, as follows: Button (Level 1) (Level 2) (Level 3) Description Displays the layers and transitions only. Displays the layers and transitions, and the layer contents (what the user sees). Displays the full model logic.
8. Save the model and then deploy it.
Result
51
July 2008
2.3
Creating a BI iView
In this example, you create an analytical application that addresses the business question "What are the top three and bottom three materials ordered?" You use the BI Integration Wizard to generate the query upon your SAP BI system, and you display this information as an interactive chart in an iView.
Prerequisites
You have access to an SAP BI system (BW system 3.1C or higher), and it is configured to connect via the BI XMLA Connector in the portal landscape. See Defining Portal Systems and Aliases in the SAP NetWeaver Visual Composer Installation & Configuration Guide. The necessary demo content is activated in the system. This example is based on the InfoCube SAP Demo Sales and Distribution: Overview, query Order and sales values (technical name: 0D_SD_C03/0D_SD_C03_Q009). You have been mapped to a user of this BI system.
Process
You build the iView in three stages: Use the BI Integration Wizard to walk you through generating your query: Creating the Query Enhance the query result by creating a chart to display the results: Creating and Configuring the Chart Fine-tune the iView layout and deploy the model: Fine-Tuning and Deployment
Result
In this example, you learn to perform a number of basic tasks of Visual Composer, including: Select an XMLA-configured SAP BI data service based on an SAP demo cube using the BI integration wizard Use the BI Integration Wizard to configure the Top N template using values from your data service Preview the result in the wizard and in the workspace Switch the table view to a column chart view Map the fields for display in the chart Deploy to Adobe Flash format
See also: BI Integration Wizard in the SAP NetWeaver Visual Composer Reference Guide.
52
July 2008
2.3.1
Creating the Query
In this example, you use the BI Integration Wizard to generate the query that addresses the business question "What are my top three and bottom three materials, based on incoming orders value?"
Prerequisites
As outlined in Creating a BI iView.
Procedure
1. Create the model and name it appropriately, such as BI_iView. 2. Create an iView (dragging the iView icon from the Compose Model task panel) and call it Top and Bottom Three. Drill down into the iView. 3. Start the BI Integration Wizard by choosing BI BI Integration Wizard .
4. Click Next to bypass the Welcome screen, and select your system:
...
a. In the Available Systems list in the Select a System screen, expand the XMLA connections folder. b. Select the data service that contains the BI system in which the demo InfoCube is activated. c. Click Next. 5. Select the query template:
...
a. In the Available Templates tree in the Select a Query Template screen, expand the Rank category. b. Select the Top N template. Notice that the description and sample business question appropriate for this template appear in the sections to the right. c. Click Next. 6. Select the cube:
...
a. From the Look for drop-down list in the Available Cubes section on the Select a Cube screen, choose Look for a cube. b. Enter the technical name of the cube and query, 0D_SD_C03/0D_SD_C03_Q009, in the Name field, and click Search. c. Select the 0D_SD_C03/0D_SD_C03_Q009 entry. Notice that the description and properties of the query appear in the sections to the right. d. Click Next. 7. Configure the parameters for the query: In the Configure Top N Parameters screen, there are two sections: Define Query Ranks and Values, and Define Members. Here we configure the query to return both the top and bottom three values, and we specify that we want to see top and bottom sales of materials, by incoming orders value.
...
53
July 2008
a. Define query ranks and values: In this section, note that you can independently configure top rank and bottom rank values. You want to show both the top three and bottom three results, so configure the parameters according to the values in the following table: Define Query Ranks and Values Section Option Top rank type Bottom rank type b. Define members: In this section, note that the drop-down lists are populated with metadata from the demo InfoCube. Configure the parameters needed for this section according to the table below: Define Members Section Option Dimension Hierarchy Level According to measure c. Click Next. 8. In the Define Filters screen, bypass the optional step of defining filters by clicking Next. 9. In the Review Output screen, review the table that appears. It shows the result of the query you have defined. Note that the top three materials sold are listed first, followed by a top total, and then the bottom three materials are listed, followed by a bottom total: Value Material Material Material Level 01 Incoming orders value Checked? Yes Yes Type Count Count Value 3 3
10. Click Finish. 11. Save your model.
54
July 2008
Result
You return to the Visual Composer workspace, where a data service has been created with the Top N query you have configured. The objects in the workspace should look something like this:
Note the data service is configured automatically with a start input and a table view as output. These three elements constitute a complete iView, ready for preview and deployment to your portal. Now you're ready to move on to Creating and Configuring the Chart.
2.3.2
Creating and Configuring the Chart
In this example, you display the results of your Top N query in a chart instead of a table. You reconfigure the data service's Output port to generate a chart, and you configure the chart.
Prerequisites
You have created the query in Creating the Query and it is open in Storyboard.
Procedure
1. Delete the table view: On the Design tab, select the table view and delete it. 2. Create and attach a chart to the query output port:
...
a. From the Compose Model task panel, select Chart view and drag it to the workspace where the table view was. b. Click the Output port of the Top N query and drag to connect to the In port of the chart view:
55
July 2008
3. Configure the chart's labels and axes:

...
a. Double-click the chart view to open the Configure Element task panel. b. In the Chart title field, enter Top and Bottom 3 Materials by Incoming Orders Value. c. Configure and label the category axis: In the Category Axis section, you want to specify that the materials should be displayed along the X-axis of the chart. To do this, select the technical name, F0D_MATERIAL, from the Field drop-down list. Enter Material in the Axis label field.
Select F0D_MATERIAL and not F0D_MATERIAL_KEY as the category axis. F0D_MATERIAL_KEY would display the technical name of the material instead of the material name itself along the axis:.
d. Configure the value axis: The Y-axis, or value axis, of the chart is bound to the data series, which we configure in the next step, so we can leave all the entries as they are here. Labeling the axis is unnecessary because the data series provides a legend. 4. Configure and label the data series:
...
a. To indicate where the data is (and hence how to calculate the Y-axis), go to the Data Series section of the panel and click the Add (plus) button to add a series. A series called Series 1 is added. b. Select the Formula column of the series and click the drop-down button. From the list, select @Incoming_orders_value_value. This represents the formatted value of the key figure (or measure) that displays the data, Incoming orders value. You can also label the data itself, which provides a legend in our chart. Replace Series 1 with Incoming Orders in the Data Series column:
5. Save your model.
Result
Your chart is now configured. You are ready to proceed to Fine-Tuning and Deployment.
56
July 2008
2.3.3
Fine-Tuning and Deployment
In this example, you deploy your iView, then fine-tune the layout and deploy again.
Prerequisites
You have created your query, configured the output port with a chart, and the model is open in Storyboard.
Procedure
1. Before you deploy, make sure your runtime is set to Adobe Flash format:
...
a. From the Main Menu, choose c. Click OK.
Tools Options
b. Select the Compiler tab, and from the Runtime dropdown box, select Flash.
2. Go to the Deploy Model task panel, and click Deploy. The model is compiled and deployed to the portal to which you are connected. 3. View the runtime version of your model by clicking Run "Top_and_bottom_three", under the Deployed successfully message in the Deploy to Portal task panel:
The model looks something like this:
4. Adjust the layout of the chart: Back in Visual Composer, scale the chart so that you can read it better. On the Layout tab, click the lower-right corner of the chart container and drag it to the right and down, to be larger. 5. Save the model and re-deploy it using the (Deploy Model) button:
57
July 2008
Result
When you view your deployed chart again, it is larger and more readable. Check out the interactive features of the Adobe Flash chart by hovering over a point in the data series with your mouse to see detailed information about that point in the series:
58
July 2008
Core Development Tasks
This section describes a general work flow for creating models in Visual Composer, and explains how to perform the basic tasks involved in each stage of the work flow. Also included are sections describing modeling techniques for advanced users, and how to deploy and maintain your models in portal runtime. Topics included in this section are: Developing Business Logic [Page 59] How to . . . [Page 77] Connectivity and Interoperability [Page 182] Advanced Programming Techniques [Page 184] Application Adaptation and Distribution [Page 190]
3.1
Developing Business Logic
This section describes the tasks that you perform when creating a model. It is based around using the different task panels, and the tools that they provide for modeling an application. You need not follow the exact sequence of the tasks described here and you may not always perform each task but the workflow described here should point out to you the main tasks to be followed in application modeling. Topics in this section include:
...
Suggested Process Flow [Page 59] First Steps [Page 61] Find Data [Page 61] Compose the Model [Page 63] Configure Elements [Page 72] Lay out the Model [Page 73] Deploy the Model [Page 75]
3.1.1
Suggested Process Flow
The following table describes the general tasks that you may follow when modeling an application in Visual Composer. The order of the steps is logical and recommended, although you may choose to follow a different workflow for certain of the tasks. For example, step 1 is critical because it includes defining the needs of your application. It should always be your first step in creating any model. However, step 2 adding your data services may at times come between composing the model diagram and configuring its components. Or you may wish to add one data service at a time, creating first the flow around the first data service, then importing the second service and so on . . .
59
July 2008
In any case, the following sections provide instructions for a comprehensive work flow. Use this information in conjunction with the specific details provided in the SAP NetWeaver Visual Composer Reference Guide [External], which complements this Modelers Guide.
Process Steps
Tasks
...
Section First Steps [Page 61]
1. Plan your application. 2. Define your systems and create aliases for them. 3. Select your deploy environment. 4. Create a new model. 5. Create top-level elements down to iView.
... ...
1. Drill down into the iView. 2. Open the Find Data task panel. 3. Select the system. 4. Locate the data service. 5. Drag it onto the Design board. 6. Repeat as necessary.
... ...
Find Data [Page 61]
1. Open the Compose Model task panel. 2. Either drag out from dataservice ports and select elements, or drag elements from task panel. 3. Connect model elements as needed.
...
Compose the Model [Page 63]
1. Open the Configure Element Configure Elements [Page 72] task panel.
Configure each model element by defining the different attributes.
...
1. Display the Layout board (Layout tab). 2. Use the Control Properties dialog box to configure the properties of each control and field.
Lay out the Model [Page 73]
60
July 2008
Process Steps
Tasks
... ...
Section
1. Open the Deploy task panel. Deploy the Model [Page 75] 2. Click Deploy. 3. View the model in runtime.
3.1.2 Use
First Steps
This section describes the preliminary tasks that you should perform before you actually start building your model.
Prerequisites
You have listed the main functional needs of the model to be created. You have prepared the queries or other data services that are required for the model. You have defined the back-end systems and aliases in the portal. You have VC Role and Administrator roles defined for you in the portal. You have mapped your user/password to all back-end systems to which you require access.
Procedure
... ...
1. Access and log on to Storyboard according to the instructions in Logging On [Page 12]. Storyboard is displayed, with either a blank workspace or a model previously modified. If a model is displayed, close it. 2. From the Storyboard main menu, choose Model New Model and create a new model according to the instructions in Creating a New Model [Page 17]. When you finish, the Design board is displayed with the Compose Model task panel open at the right. 3. Define your deploy environment by going to Tools Options Compiler tab, and from the Runtime drop-down list, select the required option. 4. From the Components list in the task panel, drag the top-level item/s onto the Design board. If you are creating a package or a page, drill down further and create the iView.
Result
You are ready to begin composing the model.
61
July 2008
3.1.3
... ...
Find Data
Use
You add the data services required as the sources of information processed in the iView. You can create an iView using data services from a number of different back-end systems. For example, you might use a stored procedure from an Oracle system (imported through the JDBC connector) to call up data that is subsequently used as input to an SAP R/3 BAPI, and output to a table.
iView that contains SQL stored procedure and R/3 BAPI Visual Composer supports Web services that are compliant with the Basic Profile 1 standard of the Web Services Interoperability (WS-I) Organization. In addition, connections to Web services for SAP back-end systems must be performed via logical destinations (configured in the SAP J2EE engine with the Visual Administrator) and not via portal systems. For more information, see Using the Web Service Connector [External].
Prerequisites
You have opened (drilled down into) the iView that will contain the data service(s).
Procedure
1. Click the Find Data button in the task-panel toolbar. 2. From the System drop-down list at the top of the task panel, select the alias of the system from which you will retrieve the first data service. You can use the keyboard to type the partial or full system alias, to facilitate locating its name in the list. 3. Use the fields and drop-down lists displayed (according to system type) to enter your search criteria, and then click Search. All data services matching the search criteria and residing in the selected system are displayed. When you perform a search on a repository-based Web service system, you use the Group criteria to search for the Web services operations, sorted by groups. When searching for third party Web services, you use the Operations criteria.
62
July 2008
4. From the results list, locate the data service that you require and drag it onto the workspace. If needed, the Define Data Service dialog box is displayed, listing the ports and the metadata of the data service. You can use this dialog box to display or hide different ports of the data service, and to select the fields that will be channeled through the selected ports. 5. Once you have defined the parameters of the data service, click OK to close the dialog box and, if required, answer the confirmation message. 6. To import one or more additional data services, repeat the procedure from step 2 (if the data service resides in a different system) or step 3. If you are composing a complex model that contains a number of data services that process a large amount of data, you should use a nested iView to "chunk"parts of the model for streamlined processing. In conjunction with this, you can define a dedicated connection for the "heavier" data services. To do so, choose Tools Options Compiler tab and select the Use dedicated connections for nested iViews checkbox. For more information about nested iViews, see Create Interrelated iViews [Page 86]. 7. You can test the functionality of a data service by right-clicking its icon and choosing Test Data Service from the context menu. In the Test Data Service dialog box, enter values into the mandatory fields and click Execute to display the results of the query. When you are done testing, click Close.
Result
You are ready to model the iView logic, by creating and defining the UI elements and their connections. See also: Compose the Model [Page 63] How to . . . Manage Your Portal System Aliases [Page 177] Find Data Services Task Panel [External] in the SAP NetWeaver Visual Composer Reference Guide
63
July 2008
3.1.4 Use
Compose the Model
You use the Compose Model task panel to create the model diagram, selecting the model components and elements that you require. You do this on the Design board.
Prerequisites
You have created a new model (Model New Model) or opened an existing model in Storyboard.
Procedure
... ... ...
1. From the Design board, click the Compose button in the task-panel toolbar. The elements available for composing the model are displayed according to the level of the model, meaning, as you drill down from page to iView, for example, more elements are available. 2. Drag the element(s) you require from the task panel to the Design board. 3. To create components for a lower level (such as an iView), double-click the component icon or choose Drill Down from the context menu of the item. 4. Connect the items as needed, defining input to data services, output from data services, and UI components that are connected through data binding (meaning that the same data is displayed in both elements). A general description of each element displayed in the task panel is given in the sections that follow. For detailed information about each element, refer to Compose Model Task Panel [External] in the SAP NetWeaver Visual Composer Reference Guide.
Result
Your basic model is created, displaying the application logic. Now you are ready to configure each of the UI elements, explained in Configure Elements [Page 72].
Example
Your model may contain data services, UI components, operators and other model elements, as in the following (fairly basic) example:
64
July 2008
3.1.4.1
Components
Definition
Components are standardized model elements that are reusable, such as a UI component or a data service.
Use
At the top level of your diagram, the following components are available: iView Page Package
Each of these items can contain other items; for example, a package can contain pages, iViews or other packages, while a page can contain iViews. Once you drill down into an iView, a range of UI components are displayed at the top of the Compose Model task panel, along with other model elements, such as operators and connectors.
Structure
The following table lists the components that are available when building your model. Components Component Name iView Description A portal iView Runtime Component
Page
A portal page
Package
A container for organizing model elements into a portal package
65
July 2008
Component Name Form View
Description A standardized iView component used by the runtime user to input data, to view data and/or select displayed data
Runtime Component
Table
A table of data used by the runtime user to view output data and/or to edit data
Chart View
A chart of any selected type that graphically displays the returned data
HTML View
A container for displaying an external HTML document An HTML view can be used to display Microsoft PowerPoint, Word or other documents.
Nested iView
A container used to define the connection to another iView displayed within the iView
Layer
A grouping element used to indicate which UI elements are shown or hidden, in tabbed iViews, wizards or layered views (such as with a toggle button)
See Create Layered iViews [Page 77] for instructions on creating tabs, wizards and other transitions
Full descriptions of the components and their operation are provided in the Compose Model Task Panel [External] section of the SAP NetWeaver Visual Composer Reference Guide.
66
July 2008
3.1.4.2
Connectors
Definition
Connectors are points in the data flow that represent connections that channel data from/to points outside the open iView.
Use
You can use connectors to bring parameters in from another iView or send them at the end of the data flow to another iView, or to define the iView initialization or end value. In addition, you can use specialized connectors to augment the data flow within the iView.
Structure
The following table lists the connectors that are available when building your model. Connectors Connector Name Start point Description Defines a value used to initialize the work flow. Example In an iView used to display n rows of Customers, the initialization value defined in the start point might be 10. In a popup iView that returns a value to the main iView, Customer Name might be the field defined in the end point. You may have an iView in which you select the city you wish to visit. You might use a Navigate point to send a City Name to an auxiliary iView on the same page, which displays a map according to the value in the City Name field. With two iViews connected through eventing, the In signal receives the values of the fields that are output from the Out signal of the same name, in the corresponding iView.
End point
Defines a final value at the end of the flow.
Navigate (Web Dynpro runtime only)
Defines the navigation to a different iView (the target iView) or view in the same window.
Signal In
For eventing, a collection point that receives parameters from a different iView. In Flex-based iViews, this signal can also receive EPCM events triggered internally from nested iViews (but not popup windows). See Signal Out following.
67
July 2008
Connector Name Signal Out
Description For eventing, a point that sends parameters to another iView.
Example
This signal sends the fields to the In signal of the corresponding iView that receives the data of the event. In Flex-based nested iViews For example, the Out signal (but not popup windows), this may send Employee Name to signal can expose an inner the second iView, so that the event at the out port of nested In signal of the second iView iView, triggering an EPCM sends the value to its data event elsewhere in the same service, which generates the model. employee details. A point that defines the input and output ports to/from a popup iView. For an iView that enables you to order train tickets, you might have an input form for selecting the trip destination, In Flex-based nested iViews and a popup menu from a (but not popup windows), this Train Departure Time field, signal can expose an inner which lets the user select the event at the out port of nested train time. iView, triggering an EPCM event elsewhere in the model.
A Flash-based mechanism that A timer can be added when counts up or down at event displaying data in a table, line initiation. by line, in conjunction with a
Popup Signal (Flash runtime only)
Timer
Pause button. User Data An editable option that adds the personal data of the user taken from iView initialization to the list of available fields in the Computed Value dialog box (for creating formulas). You may use the User Data module as input to an Employee GetInfo data service.
Full descriptions of the connectors and their operation are provided in the Compose Model Task Panel [External] section of the SAP NetWeaver Visual Composer Reference Guide.
68
July 2008
3.1.4.3
Operators
Definition
An operator is a mechanism used to manipulate data returned from a data service, prior to display in one of the UI components of the iView.
Use
You can use operators to filter or sort the data according to a number of different criteria.
Structure
The following table lists the operators that are available when building your model. Operators Operator Name Description Filter Defines selection criteria for displaying data. Sorts data up/down in a specified field. Example You can filter documents by Creation Date so that only documents created on the specified date are displayed. You may want to alphabetically sort a list of documents by Document Name, with a secondary sort according to Document Date, newest to oldest.
Sort
Sigma
Aggregates the values of all the For material orders, you may create an records of a specified field into output record that totals the values of all a single record. the orders. Retains only the specified top number of records. Retains only the specified bottom number of records. Omits records containing duplicate data in the selected fields. Note that the fewer fields checked as distinct, the fewer records returned. Reviewing top performance scores of sales managers, you may choose to retain the top three sales records. For archiving purposes, you may choose to output the oldest 20 documents, by Document Date. A data service returns the following fields: Bank Country, Bank Key and Bank Name. If only Bank Country is checked, the first appearance of a value such as France in the combination of Bank Country Bank Key Bank Name is returned. Any subsequent combination containing France will not be returned. If, on the other hand, all three fields are checked, each combination becomes distinct, so that the potential list of results is greater.
Upper
Lower
Distinct
69
July 2008
Operator Name Description Union

Merges into a new dataset the data of two datasets, and removes duplicates.
Example Data returned from a number of data services may include a field, called Sales Region, each containing different data. Union combines all of the results of these two fields into a single field (table column).
Intersect
Derives a new dataset from data that exists in both of two datasets.
Data returned from one data service gives the Capital Cities of countries around the world, while another gives Capital Cities, but only those in Europe. The data returned through the Intersect operator includes only those European capital cities returned from both data services. In contrast to the example of Intersect (previous row), the resulting table for Subtract displays only those Capital Cities of Europe that are not returned from the first data service.
Subtract
Derives a new dataset from multiple datasets by including data that is only in the first dataset but not in any of the other datasets.
The dataset from which the subtraction is made (the "first" dataset) is that which is transferred to the topmost input port of the operator. Group by Groups a dataset into groups according to the selected operation such as Min or Count defined for one or more fields (columns). For a sales figures table, the Sales Orders field (column) may be grouped by Max, while the Quantity field may be grouped by Average.
Combine
Combines two datasets into a The Bank Details data service contains two new dataset, channeled into an out ports: Bank Address and Bank Details. input form. Combine can channel the results into a single form, containing fields for all the returned fields. [Flash only] Receives input from multiple sources (such as a data service and a form view) and pass the received data as input to a single model element. You need to map the relevant fields of each input line to the port of the switch operator. You have an Employee Details table that receives fields about the employees employment history from an Employment data service, and telephone numbers from a dedicated Phone Information Web service. You output this information onto a single form.
Switch
Full descriptions of the operators are provided in the Compose Model Task Panel [External] section of the SAP NetWeaver Visual Composer Reference Guide.
70
July 2008
3.1.4.4
Connection Lines
Definition
These are the lines that connect the model elements, channeling data and events between items according to the specific type of model elements.
Use
You use the connecting lines to indicate the direction of the flow of information or events from one model element to another.
Structure
The following table describes the types of connecting lines that can be drawn. Connecting Lines Line Type Data binding Description A connection between two UI components (or between a web service and a UI component) that channels identical data from the output port of one UI component to the input port of the other UI component. If you do not want the two UI components to share identical data, but rather use separate copies of the data, you can change the Data binding connection to a Data flow connection. Right click the connection, and select Change link to Data Flow from the context menu. Data flow The means by which data is channeled between a data service and connected UI components (or between two UI components whose connection was changed from Data binding to Data flow). A connection between two model components, describing, for example, what data is input to an element or what fields are output from another element. This type of connection requires mapping of the data fields from the input element to the fields of the data service. When you drag out from the input port of a data service in order to create the input element, the fields are mapped automatically. Example
Data mapping
71
July 2008
Line Type Transition
Description A connection between two layers, defined according to the event that triggers the transition from one layer to the other. To create a transition, select the source layer and drag the green dot at the top to the side of the target layer, releasing the mouse when the line turns into a red arrow.
Example
3.1.5 Use
Configure Elements
Once you have created your model diagram (using the Compose Model task panel) and you have connected the elements, you need to configure the attributes of each item. You do this using the Configure Element task panel in conjunction with the model diagram on the Design board.
Prerequisites
You have composed part or all of your model, as described in Compose the Model [Page 63].
Procedure
... ...
1. On the Design board, start at the level of your iView, meaning that the icon is closed (you have not drilled down into it). 2. Select the iView icon and click the Configure button in the task-panel toolbar. The list of attributes for the selected iView are displayed in the Configure Element task panel. 3. Review the attributes of the component and edit them as necessary. 4. When you have finished configuring the iView, right-click the icon and choose Drill Down from the context menu (or double-click on the icon). The contents of the iView are displayed. 5. Click on each model element and connecting line to configure the items, and to map fields between model components. Full descriptions of each attribute that can be configured are provided in the Configuring Model Elements [External] section of the SAP NetWeaver Visual Composer Reference Guide.
Result
All the model elements have been configured and mapped as needed. You can now continue to configure the fields and controls within each UI component, using the Control Properties dialog box. Generally, you should do this on the Layout board. For details about configuring fields and properties, see Control Properties Dialog Box [External] in the SAP NetWeaver Visual Composer Reference Guide. See also: How to . . . Define a Dynamic Expression [Page 138] How to . . . Create an Entry List [Page 134] How to . . . Define an Image Control [Page 174]
72
July 2008
3.1.6 Use
Lay out the Model
When you have configured the attributes of the model elements, using the Configure Elements task panel, the next step is to lay out the UI components as the user should see them in runtime. You do this on the Layout board. In Layout mode, you can also configure the controls and fields of each of the UI components, using the Configure Elements task panel in conjunction with the Control Properties dialog box.
Procedure
... ...
1. On the Layout board, view the location of each of the UI components and decide in which order they should be placed. 2. To move a component, click the edge of the item and drag it to the location on the layout. You should leave a bit extra room between elements to compensate for changes between design time and runtime. To move a control or field within a component, select the item itself (not the label) and drag it as needed. You can use the X spinner in the toolbox at the bottom of the Layout board to move UI elements horizontally pixel-by-pixel, and the Y spinner to move them vertically. 3. You can fine-tune the components by clicking the Configure button in the task-panel toolbar in order to display the attributes of the selected component. For example, you may wish to change the look of a table by changing the Row colors attribute from Standard to Alternating. Or you may wish to add the standard portal bar of paging buttons to the bottom of a form, by choosing Show from the Paging bar drop-down menu. You can arrange the components in the Form view in different ways. You can align components with each other using the Vertical or Horizontal layout options, or you can freely arrange the components according to your preference using the Absolute option. Notice that when using the latter option, long labels may not appear in full. Detailed explanations of the different layout options are provided in the Form View [External] section of the SAP NetWeaver Visual Composer Reference Guide. 4. At all points of the layout process, you can access the right-click context menu for each component, which, among other options, enables you to: Edit the component title Create and customize a toolbar for the component (see How to . . . Create a Toolbar [Page 170]) Select all the fields and controls of the component Resize the component
73
July 2008
5. To change the type of field or control and to hide or show it in the component you use the table at the bottom of the Configure Element task panel. With forms and tables, the following columns are displayed (from left to right): (Show/Hide) (Data Type) Field Control
You use the Control column to edit the type of control, or to access the Control Properties dialog box (using the drop-down menu). With charts, the columns displayed are: # (series ID number) Data Series Formula (for selecting the field of the data series)
6. To add a control to the selected component, click the Add (plus) button at the bottom right, and in the New UI Control dialog box, select the type of control to add and define its Data type and Field name. To delete a control from the component, select it from the table and click the Remove (minus) button. 7. By right-clicking on a specific field or control in the component on the Layout board, you can access options relevant to configuring that field or control. To define the properties of the selected control, choose Properties from the context menu. The Control Properties dialog box is displayed. The tabs of the dialog box which change according to the type of control selected may include the following: General The name and type of data control, along with attributes for showing/hiding it and providing a default value Display Labeling and position of the control Range Minimum/maximum values and step sizes of specialized controls Styles Font information Formatting Special formats for dates, numbers and text Entry Lists Definitions of dynamic or static lists of entries (enumerations) for lists and button groups Validation Rules for definition validation values and for displaying errors when invalid data is encountered Image Selection and sizing of an image control
74
July 2008
Action Definition of an action that can be triggered by the selected field or control HTML HTML text for the field
Detailed explanations for defining each type of control (filling in the fields of each tab per control) are provided in the Control Properties Dialog Box [External] section of the SAP NetWeaver Visual Composer Reference Guide. You can configure different controls in a component, leaving the Control Properties dialog box open as you select each different control. The contents of the dialog box change dynamically according to the selected control. 8. For further information about defining the properties of controls, see: How to . . . Create a Chart [Page 167] How to . . . Define a Dynamic Expression [Page 138] How to . . . Create an Entry List [Page 134] How to . . . Create a Toolbar [Page 170]
Result
You have laid out the components of your iView and defined the properties of the controls in the elements.
75
July 2008
3.1.7 Use
Deploy the Model
The models that you build in Visual Composer are generated in Generic Modeling Language (GML) code. To deploy your application to a portal, the GML code must be compiled into a language supported by the portal. During compilation, warnings and possible errors may be discovered, enabling you to check the model validity. The compiled content is deployed directly to the portal.
Prerequisites
You are connected to a portal for which you have VC Role permissions. If you are deploying to a production portal, you must have Administrator permissions to deploy the model.
Procedure
... ...
1. On the Design board and using the navigation path above it, navigate up or down to the level of the model you want to deploy. For example, at the top level of your model, you may have a package containing pages and iViews, so you may want to drill down to a specific iView that you want to deploy. 2. Click the Deploy button in the task-panel toolbar to display the Deploy to Portal task panel.
To deploy the entire model (regardless of the level displayed on the Design board), select the Deploy entire model check box. To deploy only the part of the model currently displayed, deselect the check box. To compile only those iViews that have been changed in the model, select the Compile changed iViews only checkbox to enhance performance. (Available only with Flex 2.0.)
3. Click Deploy. The model is compiled and upon completion, a Deployed Successfully message is displayed. If errors occur or potential problems are discovered, the appropriate messages and warnings are displayed along with the source code. For the types of messages displayed, see Logging and Tracing [Page 197].
Result
The contents of the model are packaged into PAR files, one file per iView. To view the deployed file in runtime, click the Run <filename> message displayed in the task panel.
If you have deployed to a Flash runtime, you can also preview the application by clicking the Preview <filename> message. The application is displayed in a faster manner, showing the portal content area only (without the masthead and the navigation panel). If you have previously deployed the model, a link to the runtime component from the last deployment remains in the task panel under the Last Deployment header. When you click this link, all relevant pages and primary iViews that were previously deployed are retrieved from the portal PCD automatically, with a time stamp.
76
July 2008
3.2
How to . . .
This section contains a set of standard procedures that you may want to carry out in Visual Composer. They are based on implementing the steps and procedures described in the previous section (Developing Business Logic [Page 59]). The fine details such as configuring attributes are given in the SAP NetWeaver Visual Composer Reference Guide [External]. Topics included in this section are: Create Layered iViews [Page 77] Create Interrelated iViews [Page 86] Define Eventing between iViews [Page 92] Use the BI Integration Wizard [Page 94] Work with SAP BI Systems [Page 100] Filter a BI Query [Page 124] Add an Alert Data Service [Page 126] Create a Toggled View [Page 129] Create an Entry List [Page 134] Define a Dynamic Expression [Page 138] Create Value Help [Page 161] Create a Chart [Page 167] Create a Toolbar [Page 170] Define an Image Control [Page 174] Use the Style Editor [Page 174] Print the Model [Page 176] Manage Your Portal System Aliases [Page 177] Store Data in a Data Store for Later Use [Page 177] Display Data on a Calendar [Page 180]
77
July 2008
3.2.1
Create Layered iViews
In order to define which UI components are visible at the same time in the runtime iView, Visual Composer uses layers to group the components on the Design board. Depending on the mode of layering, transition lines may be required to define the navigation from layer to layer. Views can be laid out as follows: Tabs, in which each layer is represented as a tab that the user can select to display the UI components within the layer. This tabbed view was devised from the BanksB model created in Adding a Data Service for Choosing Banks [External]:
Similar to tabbed views are Link lists, in which each layer is displayed by clicking its link from a horizontal row of links, or Link trees, where the links to the layers are displayed in a hierarchical structure. Wizard, in which each layer is represented as a numbered (and labeled) step. In this guided procedure, the user clicks navigation buttons in the views to move from one to the other step. As a result, the layers must be linked by transitions (navigation lines) that correspond to the actions defined for each button. This Wizard was devised from the same BanksB model, as described in Creating a Wizard [Page 79]:
Accordion, in which each layer is displayed as a collapsible panel. Standard layers, which may be used to display different overlapping sets of components. The navigation method may be by means of pushbuttons, links or images, requiring the use of transitions, as with wizards.
78
July 2008
This view was devised from the BanksA model, so that the two outputs of the data service Bank Address and Bank Details are displayed in different views, inter-related with buttons that display the other view.
For information about creating different types of layered views, see: Creating a Tabbed iView [Page 81] Creating a Wizard [Page 79] Using Standard Layers [Page 83]
79
July 2008
3.2.1.1
Creating a Wizard
Use
In a wizard, the user is guided from one step to another, with a roadmap showing the steps at the top. To move from one step to another, the user clicks a navigation button such as Next or Back in the view and jumps to the target view. As the transition occurs, the step for that view is highlighted.
When you create your wizard, you can define steps and substeps, and enable the user to move backwards and forwards through the full roadmap of steps.
Procedure
...
1. On the Design board, create and connect all the components of your iView. 2. To create the layers for the wizard: a. Click the Compose button in the task-panel toolbar. b. From the Components group of elements, drag a Layer onto the board, under the component(s) it should contain. Then drag the components into it. (By dragging components into layers, you effectively attach them into a single unit.) c. Repeat the last step for each layer you want to create. 3. Configure the wizard layers: a. Click the Configure button in the task-panel toolbar. b. From the Navigation control drop-down list in the Layers group of attributes, choose Wizard. c. In the table at the bottom, enter an appropriate Step name for each layer (you can leave the Label numbers as they are). You can use the Label column to number steps and substeps accordingly, such as 1 1a 1b 2 3 3a -3b 3c 4. Each of these steps would be numbered consecutively in the first, # (Layer ID), column. 4. Create the transitions and their triggers:
...
a. From the first layer, drag the green dot at the top to the edge of the layer to which it should be connected. When the line turns red, release the mouse. A transition line called *next is created.
80
July 2008
In order to define the main steps of the wizard (in contrast to the substeps), therefore, you must indicate that the transition is a default one. To do so, rightclick the transition and choose Set as default from the context menu. b. In the Event name field at the top of the Configure Element task panel, rename the transition to give it a logical name that will be used to relate it to a navigation button. c. Repeat steps a and b for each layer, creating transitions back and forth between the steps and substeps. Substep transitions should not be set as default. 5. Create the navigation buttons: In order to trigger the transition to the component of the connected layer, you need to assign an action with the transitions event name to the button that triggers the action. You should do this on the Layout board. a. First, if a button in the component of the first layer does not exist, create it. You can add a button to the form by selecting the form and at the bottom of the Configure Element task panel, clicking the Add (plus) button and creating a pushbutton. Alternatively, you can create a taskbar button by using the Create Toolbar option from the right-click menu (see Create a Toolbar [Page 170]). b. For the button, define the appropriate action, naming it according to the name of the transition. (For pushbuttons, this is done in the Action tab of the Control Properties dialog box, accessed by right-clicking the control on the Layout board and choosing Properties from the context menu.) For more information about defining actions, see Control Properties - Action Tab [External]. 6. Lay out the iView, also on the Layout board. a. In each UI component, move the navigation button to a reasonable place that is fairly consistent between the different views/layers. b. In the table of the Configure Element task panel, press Ctrl and in the second column with the (Visible) icon select all the rows, in order to display the contents of all the layers. This makes the components appear semi-transparent. c. Stack the components one on top of the other, aligning them to their top-left corners.
Result
The wizard is created so that each layer can be accessed, as defined, from other layers, displaying only the contents of the selected layer. The boxed number at the top indicates the layer currently being accessed.
Example
You can build a wizard using the tutorial in Creating a Wizard [External]
81
July 2008
3.2.1.2
Creating a Tabbed iView
Use
You can use layers to group UI components into a tabbed set of views within the iView, as in the following (runtime) example:
Procedure
...
1. Create your model with all the required UI components. 2. From the Design board, click the Compose button in the task-panel toolbar. 3. From the Components group of elements, drag a Layer onto the board, under the component(s) it should contain. Then drag the components into it. (By dragging components into layers, you effectively attach them into a single unit.) 4. Repeat the last step for each layer you want to create. 5. Click the Configure button in the task-panel toolbar. 6. From the Navigation control drop-down list in the Layers group of attributes, choose Tab strip. 7. In the table at the bottom of the control panel, name each layer in the Tab name column. You can change the order of the layers using the arrow buttons at the bottom right. Layer no. 1 is at the bottom. 8. Click the Layout tab to organize the components in your layers. Click outside all of the components to display the list of tabs at the bottom of the Configure Element task panel. 9. The second column with the (Visible) icon enables you to display some or all of the layers on the Layout board (it is not a runtime indication). Press Ctrl and check all of the layers, making the components appear semi-transparent. This enables you to stack them one on top of the other, aligning them to their top-left corners. For the example at the top, the Layout might look similar to the following:
82
July 2008
Result
The tabs in design time may look similar to the following:
Each layer represents a different tab, which the user selects to display the contents of the tab. The results in runtime are similar to those at the beginning of this section.
83
July 2008
3.2.1.3
Using Standard Layers
Use
You can use layers for one part of your iViews, to enable the runtime user to flip between views similar to tabs but by means of buttons that specify the navigation. Take, for example, the iView displayed in Create Layered iViews [Page 77]:
In this example, the user inputs information in a form and the results are displayed in a table. When the user selects a row in the form and the results are channeled to the second data service, the data output from two ports of the data service can be layered to display only one view at a time. Here is what the model might look like in design time:
The means of navigation between the two iView are the buttons in the forms Bank Address and Bank Details that trigger the inter-layer navigation. Building standard layers is, like the wizard, a matter of defining layers, creating the transitions and defining the navigation buttons.
84
July 2008
Procedure
... ... ...
1. Create and connect all the components of your iView. 2. To create the layers for the views: a. Click the Compose button in the task-panel toolbar. b. From the Components group of elements, drag a Layer onto the board, under the component(s) it should contain. Then drag the components into it. (By dragging components into layers, you effectively attach them into a single unit.) c. Repeat the last step for each layer you want to create. 3. Configure the layers: a. Click the Configure button in the task-panel toolbar. b. From the Navigation control drop-down list in the Layers group of attributes, choose None. c. In the table at the bottom, enter an appropriate Layer name for each layer. 4. Create the transitions and their triggers:
...
a. From the first layer, drag the green dot at the top to the edge of the layer to which it should be connected. When the line turns red, release the mouse. A transition line called evt1 is created. b. In the Event name field at the top of the Configure Element task panel, rename the transition to give it a logical name that will be used to relate it to a navigation button. c. Repeat steps a and b for each layer, creating a transition back and forth between each layer as required. 5. Create the navigation buttons: In order to trigger the transition to the component of the connected layer, you need to assign an action with the transitions event name to the control that triggers the action. You should do this on the Layout board. a. Create a button in the component of the first layer. You can add a button to the form by selecting the form and at the bottom of the Configure Element task panel, clicking the Add (plus) button and creating a pushbutton. Alternatively, you can create a taskbar button by using the Create Toolbar option from the right-click menu (see Create a Toolbar [Page 170]). b. For the button, define a Custom action, naming it according to the name of the transition. (For pushbuttons, this is done in the Action tab of the Control Properties dialog box, accessed by right-clicking the control on the Layout board and choosing Properties from the context menu.) 6. Lay out the iView, also on the Layout board. a. In each UI component, move the navigation button to a reasonable place that is fairly consistent between the different views/layers. b. In the table at the middle of the Configure Element task panel, press Ctrl and in the second column with the (Visible) icon select all the rows, in order to display the contents of all the layers. This makes the components appear semitransparent c. Stack the components one on top of the other, aligning them to their top-left corners.
Result
The UI components in one layer are displayed when the button in the other layer is clicked.
85
July 2008
3.2.2
Create Interrelated iViews
In the iViews that you create in Visual Composer, you can create links that navigate to other iViews, displayed either within the iView itself, or displayed in a separate window. Within an iView, you can navigate to three different types of related iViews: Popup iView This iView, which can be defined directly within the main iView, is displayed in a separate window. It receives input from the main iView and channels output back to the iView as well. The following is an example of a popup iView in runtime. The Bank List Grid is displayed as a popup at the right, in a separate window.
For more information about defining a popup iView, see Creating a Popup iView [Page 88]. Nested iView A nested iView is an actual iView that sits within the iView being modeled. It can receive input from the main iView but cannot channel data back to the main iView. The following is an example of a nested iView in runtime. The Bank Details iView on the right displays information automatically from the main iView but also includes an input form for user entry within the nested iView.
86
July 2008
For more information about defining a nested iView, see Creating a Nested iView [Page 90].
Navigation You can insert an operator that navigates out of the present iView to another iView. The result in runtime is that the source iView is removed when the target iView is displayed. You may have a source iView that enables you to locate a bank, with its city.
Having located the bank and selected it, you may then want to find its location by calling up a map. To do so, a navigation point to a URL iView is defined in the source iView, resulting in a Find It iView something like the following:
87
July 2008
For more information about defining navigation to an external iView, see Defining Navigation to an External iView [Page 91].
3.2.2.1
Creating a Popup iView
Use
You can create a popup iView to enable the runtime user to access additional data, thereby selecting information that is subsequently input back into the source iView.
Procedure
...
1. On the Design board, create your source iView and drill down into it. 2. Switch to the Layout board, and from the form or view from which the user will access the popup, create a pushbutton by one of two methods: Adding a new control to the component, using the Configure Element task panel and clicking the Add (plus) button at the bottom of the task panel. Creating a toolbar button, choosing Create Toolbar from the context menu.
3. When you create the button, give it a name that directly explains its function to the user, such as Choose Bank or Find Map. 4. Define a Custom Action for the button and enter a single-word name for the event, such as ChooseBank or FindMap. In the Control Properties dialog box, you do this using the Action tab. In the Create Toolbar Buttons dialog box, you click the Add (plus) button and choose Custom Action.
88
July 2008
5. Return to the Design board, and drag out from the out port of the Input Form and choose Open Popup from the context menu. The Select Popup iView dialog box is displayed. 6. At the bottom of the dialog box, choose Create New iView and click OK. An alternative is to create the popup iView independently, prior to starting this procedure. In this case, select the name of the popup and choose Select existing iView. 7. Double-click the evt1 line between the form and the popup icon and change the event name to the action that you entered when defining the button, such as ChooseBank or FindMap. This maps the button in the form to the popup. 8. Build the popup iView: a. Right-click the popup icon and choose Drill Down from the context menu. This opens the new iView. b. Add the data service you need using the Find Data Services task panel. c. Drag out from the Input port of the data service and create a Start Point, selecting the field to receive the input value form the source iView. d. From the output port of the data service, add a UI component, such as a grid or a table. e. From the out port of the output component, add an end point, selecting the output fields to be returned by the popup. f. Double-click on the evt1 line to the end point and rename it appropriately, such as Close. g. As you did in steps 2 to 4, create a button in the output component, and define an action for it with the name you used in the previous step (step f). If the output component is a table, create a button from the Create Toolbar option in the context menu, rather than from the Configure Element task panel (adding a control and using the Control Properties dialog box) h. To define an event that is triggered when the popup is closed, create the appropriate Close (or similar) button with its action, and enter the name of the event in the Closure event field. By naming a data flow anywhere in the model with this name, prefixed by an asterisk (*), the specific event will be triggered when the runtime user closes the popup using the button. If the runtime user closes the popup with the X in the title bar, the event will not be triggered. i. Go onto the Layout board and adjust your layout accordingly. 9. Return to the source iView and double-click the line to the popup. The input and output fields are displayed in the Configure Element task panel. 10. Map the input and output fields to/from the popup. The top table maps the fields from the Input Form (Assign From) to the fields of the popup (Popup Input). The bottom table maps the fields form the popup (Popup Output) to the fields of the Input Form (Assign to).
89
July 2008
11. Adjust the layout to compensate for the popup iView, which will be displayed within the source iView. 12. Save the source iView and deploy it.
Example
To create your own popup iView, step-by-step, see the tutorial of Creating a Popup iView [External].
3.2.2.2
Creating a Nested iView
Use
You can use a nested iView to create an iView displayed within another source iView. The nested iView receives data from the source iView, and the runtime user can enter other information into the iView as well. The nested iView, however, does not return data to the source iView.
Procedure
... ...
1. Create the source iView, adding one or more data services and input forms as needed. 2. Click the Compose button in the task-panel toolbar to display the Compose Element toolbar. 3. From the Components group of icons at the top, drag the Nested iView icon onto the board at the relevant location. The Select Nested iView dialog box is displayed. 4. Choose Create new iView at the bottom, unless you have already created a separate iView that will be embedded in the source iView. In that case, select the iView name and choose Select existing iView. Click OK. 5. Right-click the nested iView icon and choose Drill Down from the context menu. 6. Create the iView logic, adding the data service and the UI components you require. To connect the nested iView to the source iView, drag out from the Input port of the data service and choose Signal In. The Select Input Fields dialog box is displayed. 7. Check the fields that should be input from the source iView and click OK. 8. Go onto the Layout board and adjust the layout as needed. 9. Save the iView and then deploy it by clicking the Deploy Model ( toolbar. ) button in the
10. Go back to your source iView and connect a line between the out port of the UI component to be connected to the nested iView and the icon of the nested iView. 11. If needed, create a button in the UI component and define the action that transfers the data to the nested iView, renaming the connecting line to the nested iView accordingly. (For more information about creating buttons, see Creating a Popup iView [Page 88] 12. Double-click the connecting line and in the Configure Element task panel, map the fields between the UI component and the nested iView. 13. Adjust the layout to compensate for the nested iView. 14. Save the source iView and deploy it.
90
July 2008
Example
The following is the design-time layout of the runtime nested iView shown in Create Interrelated iViews [Page 86].
3.2.2.3
Defining Navigation to an External iView
Use
You can create a navigation point that enables the runtime user to exit the source iView and automatically display a target iView. For example, after locating a bank from a list in the source iView, the user can click a button to activate an HTML iView used to display a map of the city in which the bank is located. Note that the use of the Navigate To connector is limited to the Web Dynpro runtime only.
Procedure
... ...
1. Create the source and target iViews, saving them within the same model. You may do so by creating a package, drilling down and creating the two iViews. 2. Open the source iView and in the output component, create a button that will activate the display of the target iView. Name the action (event) appropriately. For more information about creating the button, see Creating a Popup iView [Page 88]. 3. Drag out from the out port of the output component and choose Navigate To from the context menu. The Select Target iView dialog box is displayed. From the list, select the target iView and choose the Select existing iView option (or choose Create new iView if you did not yet create the target iView). Click OK. A placeholder icon is displayed, linked to the output component. 4. Click on the line connecting the output component and the target iView icon. Rename it according to the action name you defined for the button in step 2. 5. Drill down into the target iView to check it. Be sure to check its layout. Then save and deploy it. 6. Return to the source iView, save and deploy it.
91
July 2008
Example
The following is the design-time layout of the runtime source-and-target iViews shown in Create Interrelated iViews [Page 86].
3.2.3 Use
Define Eventing between iViews
You can create two iViews that communicate with each other on the same page, using clientside eventing, so that the output of the first iView serves as the input to the second. Eventing in the portal is based on the use of the Enterprise Portal Client Manager (EPCM), an object defined by the portal client framework to handle functions such as client eventing.
Prerequisites
You have created the top-level iView icons on the same page in Visual Composer.
Procedures
To define eventing between two iViews created in Visual Composer.
... ...
1. Drill down into the first iView and define the logic: a. From the out port of the last UI component in the flow, drag out and choose Signal Out. The Select Output Fields dialog box is displayed. b. Check the fields that should be output by the signal and click OK. An out port is added to the flow. c. Double-click the connecting line to the signal, to display the Configure Element task panel. d. In the Event name field, rename the evt1 line to a meaningful action, such as Select, or Submit. e. Note the name of the out port, the EPCM event and the exact names of the fields that are transferred out of the iView. 2. Save the iView, navigate back and drill down into the second iView 3. Build the logic of the second iView, creating an input signal (Signal In) by dragging out from the data service or dragging the port from the Compose Model task panel.
92
July 2008
a. If you dragged out from a data service, the Select Input Fields dialog box is displayed. Check the fields that correspond to the fields output from the first iView, although the full names may differ. b. Double-click on the in port and in the Configure Element task panel, rename the signal using the identical name used for the out port in the first iView. In the EPCM event field, enter the same name used in the EPCM event field of the out port in the first iView.
When both iViews are defined in Visual Composer, a default EPCM value com.sap.visualcomposer:epcm is assigned automatically. c. Add fields of the exact names output from the previous iView, such as BANK_CTRY and BANK_KEY. The result may be that you have fields of names similar to those automatically added if you dragged out from the data service, such as BANKCOUNTRY and BANK_CTRY. d. Double-click the connecting line from the in port and its connected component, and in the table of the Configure Element task panel, map the new fields of the port to the connected service or element. 4. Save the second iView.
To define eventing between an iView created and existing in the portal, and an iView created in Visual Composer:
... ... ...
1. Check the properties of the existing portal iView and find out its EPCM event name. 2. In Storyboard, open the iView that is to be the second part of the eventing scenario and create the required port: as input or as output. 3. Double-click the newly-created port and in the Configure Element task panel, enter the portal event name in the Signal name field and the EPCM event in the EPCM event field.
Result
At run-time, client-side eventing can be achieved by using the identically-defined ports.
Example
A page contains two iViews for eventing. The first iView may be used by the Sales department to track customer orders. It may look something like this:
93
July 2008
This iView enables the user to select a sales organization as input to the Customer Search BAPI, which displays a list of all customers managed by that department. The customer selected from the list (Multiple Grid) serves as input to the Salesorder Getlist BAPI, which displays a list of all orders placed by that customer. The selected order is held in the output Port, which serves as input to the second iView:
In the Material iView, procurement personnel can input the specific customer order output from the Salesorder iView and use that as input to the Material Get Detail BAPI. The results are a list of all materials that must be ordered for completing that customer order. At run-time, the two views will be able to communicate through client-side eventing based on the definition of identical properties for the output/input ports. The top-level page would look like the following:
94
July 2008
3.2.4 Use
Use the BI Integration Wizard
The BI Integration Wizard walks you through the process of creating a query using one of a set of query templates. The wizard creates a data service element in the Visual Composer workspace configured with the query you choose. The wizard can create queries upon any data service in your portal system configured to connect via the BI Java Connectors, including OLAP (multidimensional) and relational data sources.
Prerequisites
You have defined at least one data source in the portal based on a BI Java Connector (BI XMLA, BI ODBO, BI JDBC, or BI SAP Query Connector). See Defining Portal Systems and Aliases [External] in the SAP NetWeaver Visual Composer Installation & Configuration Guide. You can use the wizard with SAP BW systems 3.1C and higher if they have been configured as OLAP systems using the BI XMLA Connector. We recommend, however, that you configure SAP BW systems 3.5 and higher with the SAP BI Connector. You can access queries, query views, and characteristics from these systems directly on the Find Data Services task panel (see Using a BI System as a Data Service [Page 101]). You cannot use the BI Integration Wizard with systems configured in this way. You have created an iView in which to place your query before you launch the BI Integration Wizard.
Procedure
The wizards process flow differs depending on which type of system and which template you choose. The basic process is as follows:
...
1. From the BI menu, choose BI Integration Wizard. 2. Select the data service upon which you want to base the query. 3. Select a query template. The list of available templates [External] varies depending on the type of system (OLAP or relational) you have selected. 4. Configure the query parameters. These parameters vary depending on the query template you have selected. 5. Preview the result.
Result
Once you have completed all required wizard screens and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query you have configured. This result is supported by an underlying MDX (for OLAP data sources) or SQL (for relational data sources) statement.
95
July 2008
The data service is configured automatically with a start input and a table view as output. These three elements together constitute a complete iView, ready for preview and deployment to your portal.
Example
See Creating a BI iView [External].
See also: Further Configuring Queries [Page 96] Configuring Queries Directly in Data Services [Page 99] Modifying Queries [Page 100] BI Integration Wizard [External] in the SAP NetWeaver Visual Composer Reference Guide
3.2.4.1
Further Configuring Queries
Use
After you have created a query, you may further configure it by defining different inputs and outputs for your data service. For example, you may wish to: Create a different output port: Create a columns chart view on the output port that graphically displays the result of a Top 5 query in columns. Create a different input port: Create an input form on the data service that lets the user enter a string for a specific country and then re-submit the query. Create advanced BI applications: Create an advanced BI application by stringing multiple objects together from the input and output of the data service.
Prerequisites
As outlined in Use the BI Integration Wizard [Page 94].
Procedures
Creating a Different Output Port
All of the queries created using the BI Integration Wizard (except for Heatmaps) are automatically configured with a table view on the output port. You may instead configure your data service to display a different view such as a chart. To do this:
...
1. Select and delete the table view connected to the output port of your data service.
96
July 2008
2. Drag from query's Output port and choose Add Chart View from the context menu (see Create a Chart [Page 167]). You can also experiment with chart animation and interactivity. Possible alternate views for each query template are suggested in the following table: Output Port Suggestions Query Template All Data Count (OLAP) Count (Relational) Cumulative Total Freeform (OLAP or Relational) Grand Totals Minimum/Maximum Moving Average Percentage Growth Percentage Share Planned vs. Actual Rank Change Top N Trend over Time Zero Activity Alternate View Table Bar chart Table Line chart Table Table Table Line chart Table Pie chart Column chart Table Column chart Line chart Table
Creating a Different Input Port

All of the queries created via the BI Integration Wizard are automatically configured with a start input. You may instead wish to provide a form on the input port so the user can enter specific information and resubmit the query at runtime. To do this: 3. Select and delete the start input of your data service. 4. Drag from query's Input port and choose Add Input Form from the context menu (see Form View [External] in the Visual Composer Reference Guide).
97
July 2008
The table below lists the default fields on the input ports for each type of system: Default Fields on Input Ports System Type Relational systems OLAP systems Description Every field of the selected table One field per dimension of the selected cube
In OLAP queries in which variables are stored, you will also see an additional Variables input port. You can attach an input form in the same way to this port.
Creating Advanced BI Applications

You can string multiple objects together from the inputs and outputs of the data service to create advanced BI applications. For example: Use the result of one query as the input of another query: You could supply a list of countries from a JDBC table as input to a second query. To do this, attach the output of the first query to the input of the second query and map the fields. Use the Field section at the bottom of the Configure Element Task Panel to specify the fields that appear in the input form. Supply real-time results as input for a query: In business scenarios, you may wish to use detailed real-time data such as results from an SAP ERP system BAPI as the input to a query, and then perform analysis of it in the BI query. For example, get a list of current customers from an ERP system BAPI and then perform analysis for each customer with a BI query. One example of such an advanced scenario might look something like the below on the Visual Composer storyboard:
Query results are dynamic. If you are using fields from the result of one query as the input for another object, your mappings could become invalid when the results of your query change during runtime. In this case, the input port becomes null and could provide unexpected results.
98
July 2008
3.2.4.2
Configuring Queries Directly in Data Services
Use
Instead of using the BI Integration Wizard, you can manually configure a query on your data service by dragging a cube (OLAP systems) or a table (relational systems) to the workspace. This provides you with a "shortcut" into creating a query. However, after creating your query in this way, you must configure the input and output ports of your data service manually.
Prerequisites
As outlined in Use the BI Integration Wizard [Page 94]. Depending on how your systems have been named, it may not always be clear which data services listed in the Find Data task panel have been configured with BI Java Connectors. Note that in your system landscape you may have systems based on multiple JDBC connectors. A system based on the JDBC connector provided by the portal, for example, does not provide the BI capability necessary to use the BI query functionality, whereas a system based on the BI JDBC Connector does. In the Find Data Services task panel, you can recognize a BI JDBC system if you see tables. If you see stored procedures, it is a portal JDBC system.
Procedure
...
1. On the Find Data Services task panel, from the System drop-down list, select an OLAP or relational system. 2. In OLAP systems, browse or look for a cube. In relational systems, browse or look for a table. 3. Select the cube or table and drag it onto the workspace.
Result
The data services metadata is retrieved, and a default query is created based on the templates available in the BI Integration Wizard: Default Query Templates System Type OLAP system: cubes Relational system: tables Default Query Template Grand Totals (OLAP) All Data (Relational)
See Modifying Queries [Page 100] to learn about how to modify the default query. Configure the input and output ports of your data service manually in order to create a deployable model (see Further Configuring Queries [Page 96]).
99
July 2008
3.2.4.3
Modifying Queries
Use
After you have created a query, you may modify it using the BI Integration Wizard, or you may edit the query statement directly by using the MDX Editor (OLAP queries) or SQL Editor (relational queries). MDX and SQL Editor functionality is disabled by default. For more information, see Security Risks with the SQL Editor and MDX Editor [External] in the SAP NetWeaver Visual Composer Security Guide.
Prerequisites
As outlined in Use the BI Integration Wizard [Page 94].
Procedure
To modify a query using the BI Integration Wizard:
...
1. In the workspace, select the data service icon. 2. Select BI BI Integration Wizard. Alternately, from the context menu, select Configure Query. The BI Integration Wizard is displayed on the Select a Query Template screen. You may change any aspect of your query except for the data service, cubes, or tables associated with your query.
To modify a query using the MDX or SQL Editor:

...
1. In the workspace, select the data service icon. 2. Select BI MDX Editor (OLAP queries) or BI SQL Editor (relational queries). Alternately, from the context menu, select MDX Editor or SQL Editor. The MDX or SQL Editor appears with your currently configured statement active. If you select a relational data service and you evoke the MDX Editor, the editor disregards your selection and assumes that you want to create a new OLAP query. Similarly, if you select an OLAP data service and you evoke the SQL Editor, the editor disregards your selection and assumes that you want to create a new relational query.
100
July 2008
3.2.5 Use
Work with SAP BI Systems
The BI Extension Kit in Visual Composer allows you to access many features in conjunction with SAP BI systems (BW systems 3.5 and higher).
Prerequisites
You have access to an SAP BI system (SAP NetWeaver 2004 SP Stack 14 or greater), and it is configured to connect via the SAP BI Connector in the portal landscape. See Defining Portal Systems and Aliases [External] in the SAP NetWeaver Visual Composer Installation & Configuration Guide. Earlier SAP BI systems (BW systems 3.1C or higher) configured to connect via the BI XMLA Connector can still work with Visual Composer and are defined as OLAP systems. You can access these systems on the Find Data Services task panel or in the BI Integration Wizard (see Use the BI Integration Wizard [Page 94]). You may only deploy models created using SAP BI system functionality to Adobe Flash format. To check that your runtime is set to Flash: from the Visual Composer main menu, choose Tools Options. Select the Compiler tab, and from the Runtime dropdown box, select Flash.
Features
For information about features you can access while working with SAP BI systems in Visual Composer, refer to the following: Using a BI System as a Data Service [Page 101] Using a Characteristic as a Data Service [Page 105] Using Exceptions in Your Model [Page 107] Adding Query Information to Your Model [Page 110] Using Messages [Page 111] Modeling Hierarchies [Page 112] Working with Favorites [Page 118] Working with Variables [Page 119]
101
July 2008
3.2.5.1
Using a BI System as a Data Service
Use
You can use queries, query views, and characteristics stored in BI systems as data services in your Visual Composer models. Inside the structure of a query or query view, you can view the variables (Variables), characteristics (Characteristics), and different formats of InfoObjects in the query result (Result) available for use while designing your model.
Prerequisites
As outlined in Work with SAP BI Systems [Page 100].
Procedure
...
1. On the Find Data Services task panel, select an SAP BI data service (see Find Data [Page 61]). You can also access BI system favorites (see Working with Favorites [Page 118]). 2. Browse the InfoArea tree to identify the InfoObject you wish to use: a. Expand InfoAreas to see their associated InfoCubes. b. Expand an InfoCube to see all queries or query views stored in it in a structure. c. Expand the Structure folder associated a query or query view to view available InfoObjects in a tree. 3. Expand the Variables folder. If there are any variables stored in a query or query view, you can view them here. Optional variables appear with a green equals sign. Mandatory variables appear with a red equals sign:
4. Expand the Characteristics folder. The characteristics are displayed:
102
July 2008
5. Expand the Result folder. Available InfoObjects (characteristics or key figures) in the query result are displayed, each appended with labels indicating the format of the object. The following table describes the available formats for characteristics, key figures, or both (InfoObjects): Result Folder [InfoObject] and Label [InfoObject] [KeyFigure]_value Details The formatted value of the characteristic or key figure for example, with currency and decimal notation. The unformatted value of the key figure for example, without currency or decimal notation. This is the value typically used in calculations such as in formulas or charts. The key of the characteristic. This is the internal technical identification of the object in the BI system. This value is typically used as input for a filter for example, in controls such as drop-down boxes. This is how the characteristic is represented externally. This is usually the same as the _key value, but differs in time and compound characteristics. For example, a time characteristic's _key value for the date August 29, 2005 is 20050829, and the _ext_key value depends on the user setting configuration for date formats for example: 08/29/2005. This value is typically used in value help as input for a variable. [KeyFigure]_currency [KeyFigure]_unit [KeyFigure]_exception The currency attributed to this key figure. This represents the currency symbol itself. The unit of the key figure for example, piece or pound. If there are exceptions stored in the query, the exception value (or its severity grade) associated with the key figure is stored here. You can use this value in conjunction with styles to indicate exceptional conditions in a chart, for example. See Using Exceptions in Your Model [Page 107]. [Characteristic]_node_level If the query contains characteristics for which hierarchy display is enabled, this value represents the node level of the currently selected characteristic member. See Modeling Hierarchies [Page 112].
[Characteristic]_key
[Characteristic]_ext_key
103
July 2008
[InfoObject] and Label [Characteristic]_node_status
Details If the query contains characteristics for which hierarchy display is enabled, this value provides a key to the hierarchy node drill state: E Expanded C Collapsed L Leaf node
See Modeling Hierarchies [Page 112]. 6. Select a query, query view, or characteristic (see Using a Characteristic as a Data Service [Page 105]) and drag it to the workspace.
Result
The metadata is retrieved and the query, query view, or characteristic is integrated into your model as a data service, complete with any relevant ports:
A characteristic is created with an Input and an Output port. A query or query view can have the following ports: Query or Query View Ports Input Input accepts data Variables accepts values for variables (if variables are available in query or view) (see Working with Variables [Page 119]) Output Output returns data Info returns the query information (text elements) associated with the query (see Adding Query Information to Your Model [Page 110]) Messages returns query-related messages (see Using Messages [Page 111])
You can now, for example, place your BI data service in an iView and configure a start point on the Input port and a table view on the Output port:
104
July 2008
Then you can deploy to the portal to see the results of the query:
See also: Creating an Analytics Application [External], for step-by-step instructions on creating a complete analytics application using BI systems Using Exceptions in Your Model [Page 107] Modeling Hierarchies [Page 112] Working with Variables [Page 119] Filter a BI Query [Page 124] In Data Service [External] (in the SAP NetWeaver Visual Composer Reference Guide), see the BI Query reference for properties you can configure using the Configure Element task panel.
105
July 2008
3.2.5.2
Using a Characteristic as a Data Service
Use
You can use a characteristic as a data service in order to view and access an InfoCubes master data. You can apply this functionality in conjunction with value help, or you can create custom entry lists of characteristic values that you use in formulas or to populate controls such as drop-down lists (see Create Value Help [Page 161]).
Prerequisites
Procedure
...
1. On the Find Data Services task panel, select an SAP BI data service (see Find Data [Page 61]). 2. Expand the Structure of the data service until you are navigating in the Characteristics folder (see Using a BI System as a Data Service [Page 101] for more on the structure of BI data services):
3. Select the desired characteristic and drag it onto the workspace.
Result
The metadata from the characteristic is retrieved and integrated into your model. You can use the characteristic like you would any other data service. You can, for example, place it in an iView and connect a start point to its Input port and a table view to its Output port, creating a model that looks like the below:
106
July 2008
When you deploy this iView to the portal, the table displays the characteristics master data:
See also: In Data Service [External] (in the SAP NetWeaver Visual Composer Reference Guide), see the Characteristic reference for properties you can configure using the Configure Element task panel.
107
July 2008
3.2.5.3
Using Exceptions in Your Model
Use
If exceptions have been stored in a BI data service, they can be retrieved in Visual Composer and used as the basis on which you build an application. For example, you can display query results in a table in which certain exceptional conditions are highlighted in color.
Prerequisites
As outlined in Work with SAP BI Systems [Page 100]. Be sure to set your compiler to Adobe Flash format (Tools Options Compiler tab) to work with styles and style coloring, which is helpful when displaying exceptional conditions.
Procedure
...
1. On the Find Data Services task panel, select an SAP BI data service (see Find Data [Page 61]). 2. Expand the structure of the data service and navigate into the Results folder. Any key figures that represent exceptions are appended with _exception. 3. Select the query or query view that contains the exception(s) and drag it to the workspace in an iView. 4. Attach a start point to the Input port. 5. Attach a table view to the Output port, and select the fields to display in the table. 6. Double-click the table view to access the Configure Element task panel. 7. Define a virtual field to display the key figures exception value with color styling: a. At the bottom of the panel, click the Add (plus) button to display the New UI Control dialog box. b. Select the Expression Box control type, leave the Data type as Text, and enter a name for the field for example, KeyFigure_Vir, where KeyFigure is the name of the key figure with the exception, and _Vir indicates that this is a virtual field and click OK. 8. Configure conditions and styles for the virtual field: Be sure that your compiler is set to Flash for this next step. Style options are only available with the Flash compiler. a. Double-click the new virtual field. The Control Properties dialog box is displayed. b. Select the General tab, and in the Expression field, enter @KeyFigure (the name of the key figure preceded by an ampersand). This indicates that the virtual field should display the key figure indicated. c. Create the styles and conditions under which the styles are to be applied:
108
July 2008
The following coloring values are standard for exceptions in BI systems: BI System Standard Exception Coloring Exception Value 0 1-3 4-6 7-9 Color No color no exception Green Yellow Red
i. ii. iii. iv.
On the Styles tab, click the Add (plus) button to create a new style. Call it Red. Set its Background value to red. Select the Condition field, and in the formula drop-down list, select Enter formula. In the Style Selector dialog box, enter the following formula in the condition field: BOOL(IF(@KeyFigure_Exception>=7&&@KeyFigure_Exception< =9,true,false)). Replace KeyFigure with the name of your key figure. This is your actual key figure with the exception, NOT the new virtual key figure. You can use the Data Fields list to find the exact key figure name.
d. Repeat Step 8c to create Yellow (4-6) and Green (1-3) conditions. You should have defined the following three styles and corresponding conditions: Exception Styles Style Red Yellow Green Condition BOOL(IF(@KeyFigure_Exception>=7&&@KeyFigure_Exception< =9,true,false)) BOOL(IF(@KeyFigure_Exception>=4&&@KeyFigure_Exception< =6,true,false)) BOOL(IF(@KeyFigure_Exception>=1&&@KeyFigure_Exception< =3,true,false))
Remember to replace KeyFigure in these formulas with the name of your key figure. e. Close the Control Properties dialog box. 9. Deploy the model.
109
July 2008
Result
In runtime on the portal, the table displays the results, in which the virtual field is color-coded according to the exception level:
3.2.5.4
Adding Query Information to Your Model
Use
You can integrate query information that is stored in text elements in a BI query into your Visual Composer model. Query information is generated from an output port on the query, and provides information such as query author, last update of the data in the underlying InfoCube, and user who last changed the data. Only query information from general text elements is available in Visual Composer. Variables and static filter values are not available.
Prerequisites
Procedure
...
1. On the Find Data Services task panel, select a query or query view from a BI system and drag it to the workspace (see Using a BI System as a Data Service [Page 101]). 2. In the workspace, drag from query's Info port and choose Add Form View from the context menu. The Select Display Fields dialog box is displayed: 3. Select the query information you wish to display, and click OK.
Result
An info form containing the selected query information is added to the model. Displayed in runtime on the portal, the form might look something like this:
110
July 2008
See also: Select Display Fields: Query Information [External] in the SAP NetWeaver Visual Composer Reference Guide.
3.2.5.5
Using Messages
Use
You can integrate query-related messages into your Visual Composer model. Messages are generated from an output port on the query, and provide information that is relevant to the query, such as whether the query has been successfully saved or if there has been a problem saving it.
Prerequisites
As outlined in Work with SAP BI Systems [Page 100] There must be active messages associated with the query in order for them to be displayed in Visual Composer Some messages will only appear the first time they are issued if, for instance, they have to do with successfully generating a query, which is an activity that is not repeated (until the query definition is changed again).
Procedure
...
1. On the Find Data Services task panel, select a query or query view from a BI system and drag it to the workspace (see Using a BI System as a Data Service [Page 101]). 2. In the workspace, drag from query's Messages port and choose Add Table View from the context menu.
Result
A Messages Table is added to the model. The table lists any available messages in rows and displays for each message its type (for example, I for information or S for success), ID number, and text in three columns. Displayed in runtime in the portal, the table might look something like this:
111
July 2008
See also: Messages Table [External] in the SAP NetWeaver Visual Composer Reference Guide.
3.2.5.6
Modeling Hierarchies
Use
If you have an active hierarchy in an SAP BI query, you can model display and limited navigation of the hierarchy into your Visual Composer model. Visual Composer's table view element does not support a tree display, which is typically required for hierarchy navigation. You can work around this and support limited hierarchy navigation by modeling and programming drill actions into a table view toolbar with the use of the SAP BI Web Design API.
Prerequisites
Visual Composer reads a hierarchy setting saved in an SAP BI query to know that a hierarchy is enabled and active for a characteristic. In the BEx Query Designer, make sure the Activate Hierarchy Display setting is enabled in the characteristic properties and saved in the query before you proceed. For more information about the BEx Query Designer, see the online documentation at: http://help.sap.com SAP NetWeaver Library SAP NetWeaver by Key Capability Information Integration by Key Capability Business Intelligence BI Suite: Business Explorer Query Design: BEx Query Designer
Procedure
...
1. Model the basic elements:

...
a. On the Find Data Services task panel, select the SAP BI system in which your query is located, and find the query that contains the hierarchy-enabled characteristic. Note that for each hierarchy-enabled characteristic, two additional fields are created in the Result folder for an SAP BI query:
112
July 2008
CHARACTERISTIC_node_level provides the value for the hierarchy node level of the selected row. The root node is level 1. CHARACTERISTIC_node_status provides the value that corresponds to the hierarchy node drill state: E - expanded C - collapsed L - leaf node
b. Select the query itself and drag it to the workspace (see Using a BI System as a Data Service [Page 101]). c. In the workspace, connect a start point to the query's Input port. d. Connect a table view to the Output port, and select the fields you want to display in the table. Make sure that your hierarchy-enabled characteristic is selected as one of the fields (you do NOT need to select the special *_node_level and *_node_status fields). 2. Add drill buttons to the table view: Next, model the two buttons that will perform hierarchy navigation. a. Double-click the table view to access the Configure Element task panel. b. Select Show in the Toolbar dropdown list to enable toolbar display for the table. c. Click Edit to edit the toolbar. d. In the Create Toolbar Buttons dialog box, click Add Button and create two buttons with the following settings: Button name=Drill Down Action type=Custom action Custom action=DRILLDOWN Button name=Drill Up Action type=Custom Action Custom action=DRILLUP e. Click OK to save the toolbar with the new buttons and close the dialog box.
113
July 2008
3. Program the drill down action: a. In Storyboard, drag a line to connect the Out port of the table view to the Input port of the query. b. Select this line, and in the Configure Element task panel, select drilldown from the Event name dropdown list. c. At the bottom of the task panel, select the Assigned Value column next to the WEBAPI field, and from the dropdown list, select Enter formula. d. In the Assign Value dialog box, enter the Web Design API commands that will drill to the second hierarchy level and at the same time filter by the selected hierarchy node. Start with this formula as a template: FILTER_NODE_IOBJNM=CHAR_TECH_NAME;FILTER_VALUE='&CHAR_key&' ;FILTER_COLLAPSE= ;FILTER_IOBJNM=CHAR_TECH_NAME;CMD_1=CMD%3DDRILL_TO_LEVEL%26 LEVEL%3D2%26IOBJNM%3DCHAR_TECH_NAME%26DATA_PROVIDER%3DDP;'
(Note: There is a space after FILTER_COLLAPSE) e. Replace the three instances of CHAR_TECH_NAME with the technical name for your characteristic. f. CHAR_key represents the key of the currently selected characteristic member. You replace this with your value, prefixed with the ID of the table view, by using the data fields provided: i. ii. Expand the Data Fields node, then expand the Output Table node. Drag the key field of your hierarchy-enabled characteristic into the text editor and place it in the correct location in the formula.
g. Click Check to validate the formula, and if valid, click OK to save the changes and close the dialog box.
114
July 2008
4. Program the drill up action: a. Repeat step 3 to create a drill up event. At step 3.d, use the Web Design API command to drill to the level of the currently selected hierarchy node, without filtering. Start with this formula as a template:
'CMD_1=CMD%3DDRILL_TO_LEVEL%26LEVEL%3D'&NSTR(CHAR_node_level ,'B')&'%26IOBJNM%3DCHAR_TECH_NAME%26DATA_PROVIDER%3DDP;'
b. Just as with the drill down commands, replace CHAR_TECH_NAME with the technical name for your characteristic (it appears in one place). c. CHAR_node_level represents the node level of the currently selected characteristic member. Replace it with the right node level field of your table view: i. ii. Expand the Data Fields node, then expand the Output Table node. Drag the node level field of your hierarchy-enabled characteristic into the text editor and place it in the correct location in the formula.
When your model is complete, with the commands modeled for both drill down and drill up, the Storyboard looks something like this:
Result
In runtime in the portal, the application looks something like this:
115
July 2008
Hierarchy nodes are displayed using indentation and special flags for drill states: Root nodes: Aligned fully left Subnodes: Indented Nodes that are expanded: Prefaced with "-" Nodes that are collapsed: Prefaced with "+"
To drill down, select a node that is collapsed (prefaced with "+"), and click the Drill Down button:
116
July 2008
The node expands and its subnodes are displayed beneath it:
You can continue drilling down into collapsed subnodes until they are fully expanded:
To drill up, select an expanded node (prefaced by "-") and click the Drill Up button. You can continue drilling up until all nodes are collapsed. Using SAP BI Web Design API commands in procedures similar to the above, you can build additional hierarchy support into your model. For example, you can add a button that drills to level "X" (where you provide an input field for "X").
117
July 2008
3.2.5.7
Working with Favorites
Use
Favorites provide an easy way to access frequently used queries. In Visual Composer, you can browse and modify the list of favorite queries stored for your user in a BI system. Note that depending on how users are mapped in the system, the current BI system user could differ from the current portal user.
Prerequisites
Procedure
To browse for and select a Favorite:
...
1. On the Find Data Services task panel, select an SAP BI data service (see Find Data [Page 61]). 2. In the Look for drop-down list, select Display favorites. Any Favorites stored in this system under your user appear in the list. They may either be stored at the root or in a folder hierarchy. 3. Navigate to, select, and work with an InfoObject in the Favorites and query structure as desired (see Using a BI System as a Data Service [Page 101]). To add a query to Favorites:
...
1. On the Find Data Services task panel, select a query in a BI system. 2. From the context menu, select Add to Favorites. The Select Favorites Folder dialog box appears:
3. Navigate to where you want to store the Favorite. You can store a Favorite at the root node or you can store it in a folder. 4. Click Create New Folder to create a new folder. You can also nest folders into existing folders.
118
July 2008
5. Click Remove Folder to remove a selected folder. 6. Click Add to store the Favorite in the selected location and dismiss the dialog box. To remove a query from Favorites:
...
1. On the Find Data Services task panel, select an SAP BI data service. 2. In the Look for drop-down list, select Display favorites. 3. Select a query, and from the context menu, select Remove from Favorites.
Result
If you created a Favorite or modified the Favorites list, this information is stored under your user in the BI system.
See also: Favorites Folders [External] in the SAP NetWeaver Visual Composer Reference Guide.
3.2.5.8
Working with Variables
Use
If you have characteristic value variables saved in an SAP BI query or query view, they are available on the Variables input port of the data service. Model a variables input form to allow users to enter values for the variables at runtime on the portal before executing the query. If you have a mandatory variable, you must model an input form for it or the query will fail to execute properly. When using variables in input forms in Visual Composer, you need to use the proper selection syntax in the input field. In addition, whereas regular input fields take the Key value (_key) of a characteristic, variable input fields take the Key (External Display) (_ext_key) value. For these reasons, we recommend you use value help to generate the proper value and selection syntax. This procedure is described below.
Prerequisites
As outlined in Work with SAP BI Systems [Page 100] SAP BI query or query view with one or more variables Although this procedure relies on an SAP BI system created with the SAP BI Connector on the portal to fully leverage BI capabilities, variables are also supported in systems created with the BI XMLA Connector.
119
July 2008
Procedure
...
1. Model the basic elements Create the data service, variables form, and table that form the basis of the model: a. On the Find Data Services task panel, select an SAP BI data service (see Find Data [Page 61]). b. Locate a query or query view that contains variables, and navigate into the Variables folder. Optional variables appear with a green equals sign. Mandatory variables appear with a red equals sign:
Note on mandatory variables: With the Variables port on the data service selected, any mandatory variables display in the Field section of the Configure Element task panel appended with an asterisk and marked as Required. Before you can deploy a model with a mandatory variable, you must either provide a value for the variable in the field properties, or uncheck the Required checkbox. c. Select the query or query view and drag it to the workspace in an iView. d. Drag from the data services Variables port and choose Add Input Form. e. Drag from the data services Output port and choose Add Table View, and select the fields to display in the table. f. Select the fields to display in the variables form: Double-click the Variables Form, and in the Field section of the Configure Element task panel, select the variables for which you want to provide input when the query is executed at runtime on the portal, keeping the SUBMIT button also selected:
120
July 2008
If you have mandatory variables, you must keep these on the form. g. Save the model. 2. Explore the required input syntax At this point, your model is functionally complete, and you could deploy it to the portal, enter values in the variable fields, and execute the query. However, you need to know the proper selection syntax to enter in each of the input fields. We explore that in this section, but we recommend you add value help, which provides the proper values and syntax for each variable type (which we cover in Step 3, below).
About SAP BI Variable Selection Types

In the querys definition, you can configure SAP BI characteristic value variables that allow you to provide different kinds of selections. For example, you can configure a variable to select single values, multiple values, or a range of values. These are called "display areas" of variables in SAP BI, and each requires a specific type of syntax in an input field in Visual Composer.
Variable Types and Visual Composer Field Syntax

The following table lists the display areas for variables in BI, the corresponding value help type in Visual Composer, and the syntax required by Visual Composer in the input field by each. Note that with variables, you must pass the Key (External Display) (*_ext_key) value of the characteristic to the field. "Value" in the syntax column refers to this value:
121
July 2008
Field Syntax BI Variable Visual Display Composer Area Value Help Type Input Field Syntax Examples
Single Value Single Selection [Value]
1612 (the single value 1612)
Multiple Single Values Interval
Multiple Selection Interval Selection
[Value1];[Value2];[Value3 1612;1614 ] ... (1612 and 1614) [Value(Start)]:[Value(End)] 07/2004:12/2004 (the range from 07/2004 to 12/2004) 1592::EQ:I;1612:1614:BT: [Value]:[Value(End optional)]:Operator:I (Includes) I or E (Excludes) (include the single value 1592 and the range from 1612 to 1614) Available Operators: EQ Equal to GE Greater than or equal to GT Greater than LE Less than or equal to 1552::LT:I;4000::GT:I LT Less than BT Between (all values less than 1552 and greater than 4000) 1614::GE:I;6512::EQ:E (include all values greater than or equal to 1614 except 6512)
Selection Option
Selection Options
SAP BI precalculated value set variables are not supported in Visual Composer. 3. Add value help to the input field Adding value help to the input form will not only help to select the right value to pass along to the form, but will create the syntax for each variable selection type for you. a. On the Layout board, right-click a variable input field and choose Add Value Help from the context menu. b. On the Add Value Help for Selected Input Field screen, notice that Visual Composer recommends the type of value help to use. For variables, you must accept the recommended type, which corresponds with the display area configured in the variable itself. Uncheck the Hide advanced configuration options (BI systems only) checkbox. c. On the Select Data Service screen, browse to and select the characteristic that will provide the list of valid variable values.
122
July 2008
d. On the Specify Data Service Runtime Parameters screen, you can leave all values as they are by default except Key field. The key field is the value that is actually passed on to the input form. The Key and Key (External Display) values are usually the same in characteristics, but when they differ (such as is usually the case for time characteristics), you need to use the Key (External Display) value as input for a variable. Accordingly, select Key (External Display) from this drop-down list. This field is also referred to in Visual Composer as [Characteristic]_ext_key. e. Click Finish to exit the wizard and generate the value help. Once you have completed the wizard screens, you return the Layout board, where you can see that a Value Help button has been added next to each input field where you have configured it. f. Save the model. 4. Deploy a. Go to the Deploy to Portal task panel and click Deploy to deploy the model to the portal in Adobe Flash format. b. Click Run [iView name] to view the iView in runtime on the portal. When the iView appears on the portal, you see the input form, value help buttons, and table. The query is waiting for you to select variable values before it executes.
Result
Use the value help dialog boxes to not only retrieve valid Key (External Display) values, but to also create the proper selection syntax. When you are done, click Done in the value help dialog box to exit and transfer the value to the input field. Note that the field now contains the proper field value and syntax for the variable. Click Submit to execute the query with the variable values you configured and retrieve the result for display in the table:
123
July 2008
If you have mandatory variables, you must configure values for these before you submit the query (unless you have unchecked the fields Required flag in the model). Variables that are configured with default values in the query definition pass along that value automatically when the query is executed. You can leave optional variable fields blank.
See also: Variables [External], in the BEx Query Designer documentation Value Help Configuration Wizard [External], in the SAP NetWeaver Visual Composer Reference Guide Filter a BI Query [Page 124]
124
July 2008
3.2.6 Use
Filter a BI Query
A filter is a set of criteria that restricts the set of records returned as the result of a query. With filters, you define which subset of data appears in the result set. You can filter your query's result set by providing a value in a field in an input form during runtime on the portal. You can also enter special selection syntax into the field.
Prerequisites
You have configured a BI system on the portal using the SAP BI Connector or a BI Java Connector. See Defining Portal Systems and Aliases [External] in the SAP NetWeaver Visual Composer Installation & Configuration Guide.
Procedure
...
1. On the Find Data Services task panel, select the BI data service (see Find Data [Page 61]). 2. Select a query or query view (SAP BI systems), or cube (OLAP systems) and drag it to the workspace in an iView. 3. Drag from the data service's Input port and choose Add Input Form. You may also add an input form on the data service's Variables port, if variables are available in the query definition. 4. Drag from the data service's Output port and choose Add Table View, and select the fields to display in the table. 5. Deploy the model to the portal. 6. In runtime on the portal, enter appropriate values in the input fields and click Submit.
Input Field Values

Data Service Input Field Value Variable Field Value [Member]_key Supported Selection Syntax Selection options type not supported
OLAP queries (from [Member]_key data services created with the BI XMLA or BI ODBO Connectors)
BI queries (from data [Characteristic]_key services created with the SAP BI Connector)
[Characteristic]_ext_ke All selection options types supported y
For the available selection options types and their exact syntax, see the Field Syntax table in Working with Variables [Page 119].
125
July 2008
Tip: Add value help to an input field to help you determine the proper value, its format, and selection syntax. See Value Help Configuration Wizard [External] in the SAP NetWeaver Visual Composer Reference Guide.
Result
After you have configured values in the input fields and clicked Submit, your query is executed with the filter value you configured and the results are retrieved for display in the table:
See also: You can use the BI Integration Wizard [External] to create query filters within the context of individual query templates. See Define Filters [External] in the SAP NetWeaver Visual Composer Reference Guide.
126
July 2008
3.2.7 Use
Add an Alert Data Service
You can build an alert data service into your model to display SAP alerts in an analytical application. An alert data service displays all SAP alerts available in the Universal Worklist on the portal. You display the alerts in a table, using the Select Display Fields dialog box to select which alert attributes are displayed.
Prerequisites
You must have an SAP ERP or SAP BI system configured on the portal as an AlertConnector. For more information, see Universal Worklist Configuration [External] in the Technology Consultant's Guide Your portal user must be configured with the additional Standard User Role required by the alerting framework. This adds the Universal Worklist to the portal in the Home Work tab. You must have conditions that lead to the broadcast of alerts in your system, and the alerts must be active and displaying in the Universal Worklist on the portal, for them to show up in the Visual Composer alert data service. To see if you have active alerts, log in to the portal and choose Home Work, then select the Alerts tab. For more information, see Triggering Alerts [External] in the SAP NetWeaver Developer's Guide. For more information and references on configuring an alert data service for Visual Composer, see Configuring Universal Worklist Connectivity [External] in the SAP NetWeaver Visual Composer Installation & Configuration Guide.
Procedure
...
1. Navigate into an iView, and choose Tools Alert Data Service. 2. Click Generate to place an alert data service on your storyboard. 3. On the storyboard, connect a start point to the data services Input port and a table view to its Output port, which evokes the Select Display Fields dialog box. 4. Using the Select Display Fields dialog box, select the alert attributes you wish to display in the table, and click OK:
127
July 2008
In your workspace, your model is now complete and ready to be deployed to the portal. It looks something like this:
5. Before you deploy, make sure your runtime is set to Adobe Flash format: a. From the main menu, select Tools Options. b. Select the Compiler tab, and from the Runtime dropdown box, select Flash. 6. Go to the Deploy task panel, and choose Deploy.
Result
As displayed in the portal in runtime, your iView might look something like this:
128
July 2008
The table lists all active alerts in your Universal Worklist on the portal, including all attributes you configured for display.
Tip: You can model your applications to display ACTIVITYLINK fields in HTML views. Drag an HTML view to the workspace, connect it to the alert tables out port, double-click the connecting select line and map the url input field to the desired ACTIVITYLINK value.
See also: Alert Data Service [External] in the SAP NetWeaver Visual Composer Reference Guide.
129
July 2008
3.2.8 Use
Create a Toggled View
You can use a toggle button to enable the user to switch between views within a UI component. The toggle button label changes in order to display the component not currently visible.
Procedure
... ...
1. After creating your model on the Design board, switch to the Layout board and select the UI component (form, table or chart) that will contain the toggle button. You can create a separate form just for this purpose (see the Example following). 2. Right-click the component and click the Configure button from the task-panel toolbar. 3. At the bottom of the task panel, click the Add (plus) button. The New UI Control dialog box is displayed. 4. From the Select control type list, choose Toggle Button and in the Field name field, enter an appropriate name for the button. (The Data type should be Text in most cases.) 5. Click OK. The button is displayed in the layout. 6. Right-click the new button and choose Properties from the context menu. The Control Properties dialog box is displayed. Note that in the General tab, the Default value of the button is true. You can change this, and also use this Boolean value to define the formula for hiding other fields. 7. To give the toggle button two names, according to the visibility of other components, click the Display tab and in the Label field, create a conditional formula describing when each label should be applied. (See Define a Dynamic Expression [Page 138]). 8. Click the other fields or views that are to be toggled in conjunction with the toggle button: If you are toggling a field, define its visibility by creating a formula for the Condition in the Hidden field of the General tab in the Control Properties dialog box. If you are toggling a view, enter the formula in the Visibility condition field of the Configure Element task panel.
Example
This example is based on the BanksB model created in Adding a Data Service for Choosing Banks [External]. It adds a toggle button in order to enable the runtime user to switch between different views of bank information.
...
1. Import the BanksB model or create it from scratch. 2. On the Design board, drag a Form View icon from the Compose Model task panel to create a free-standing form called Bank Information. Place it between the Bank Address and Bank Details forms, as follows:
130
July 2008
3. Click the Layout tab and double-click the Bank Information form to open the Configure Element task panel. 4. Create and define the toggle button as follows: a. Create the button as described in steps 3 to 5 of the previous Procedure. b. Right-click the new button and open the Control Properties dialog box. c. In the Default value field of the General tab, enter true. d. Click the Formula button to the right of the Label field of the Display tab. The Dynamic Label (Expression Editor) dialog box is displayed. e. Expand the Conditional Functions node and double-click the IF option to display an If formula in the text box. f. Use the formula in conjunction with the Data Fields node to enter the following formula: IF(@@==true,'Bank Details','Bank Address') This formula indicates that when the toggle button (@@) is true, the button label is Bank Details; when it is false, the label is Bank Address. g. Click Check to ensure that the formula is valid and then click OK. h. On the layout, expand the width of the button to compensate for its size and check that the layout is appropriate. It should look something like the following:
131
July 2008
5. Program the visibility of the forms to be toggled: When the Bank Details button label is displayed, the Bank Address form should be visible and vice-versa. Therefore: a. Double-click the edge of the Bank Address form and in the Visibility condition field in the Configure Element task panel, click fx and Enter formula. The Hiding Condition (Expression Editor) is displayed. b. Expand the Data Fields node and then the Bank Information node and doubleclick Toggle. The toggle control ID is displayed in the text box. c. Create the following formula: #ID[ACA92P]@Toggle=='true' d. Repeat steps a through c for the Bank Details form, entering the following formula: #ID[ACA92P]@Toggle=='false' 6. Check that the layout is appropriate and deploy. The runtime results should be similar to the following:
132
July 2008
133
July 2008
3.2.9 Use
Create an Entry List
The Entry List tab in the Control Property dialog box enables you to create a list of entries for the following types of controls: Bulleted list Combo box Drop-down list List box Numbered list Radio group
You can create the list by entering a set group of options a static list or you can create a list that dynamically takes its values from fields you designate (a dynamic list) and, optionally, according to a formula that you enter. The static and dynamic lists that you create here are used only for the defined control. The Tools Entry List Manager option enables you to create dynamic and static lists that can be used throughout the model; these are called global entry lists. This section describes how to create the different types of lists.
Procedures
To create a local, static entry list for the specific control selected do the following:
... ...
1. After defining the controls for the form, go onto the Layout board, right-click the list control and choose Properties from the context menu. The Control Properties dialog box is displayed. 2. Click the Entry List tab. From the List scope set of radio buttons, chose Static. 3. Click the Add (plus) button at the right, and in the row created in the table, enter a Value (which is returned from the data service for the field) and the Display Text (which is the option that the user sees in the list). You might create a list as follows: Value US DE GB NL Display Text United States Germany Great Britain The Netherlands
In this case, the list would contain four options, displayed according to the value received from the data service and shown according to the display text listed. 4. Click Close. When creating a combo box control, if a user enters text, that text will be taken as the value.
134
July 2008
To create a local, dynamic entry list for the specific control selected do the following:
...
1. In the Entry List tab in the Control Properties dialog box (see step 1 in the previous procedure), choose Dynamic from the Entry list set of radio buttons. The Find Data Service dialog box is displayed. To create a dynamic entry list based on a JDBC-based stored procedure, see Create a Dynamic Entry List with a JDBC-Based Stored Procedure [Page 137] following. 2. Locate the data service you require: a. In the System drop-down list, choose the portal system in which the data service resides. If no list is available, click the Find Data button in the task-panel toolbar and choose the System there. b. From the Look for drop-down list, choose the data service that you require or enter a search string instead. c. Click Search and select your data service from the Select data service list. 3. Using the Input port and Output port drop-down lists, choose the ports of the data service through which the data should be channeled and click OK. The fields channeled into the input port you defined are then displayed in the top table (Input port) of the Control Properties dialog box, in the Input Field column. If you are accessing a BI data service, be aware that the port names may differ from the port names of the same data service displayed in Storyboard. 4. In the Assigned Value column of the Input port table, define the input values that you require in order to get the output values you want in your list. You can: Enter a fixed value, such as United States for an input field BANK_COUNTRY. Use the Expression Editor (choose Enter formula) from the drop-down list to create a formula defining different values according to input value, such as: IF('US','United States','Other') Enter a different field (using the Expression Editor) found in the form, from which to take the value. For example, for BANK_CTRY, you might assign a field @BANK_REGION.
5. In the Output port table at the bottom, define the source field from which the VALUE should be taken and the corresponding field from which the display TEXT should be taken. For example, the VALUE might be BANK_KEY and the TEXT might be BANK_NAME. 6. You can use the checkboxes below the output table to define the following options: Sort: sorts the list options alphabetically Allow duplicates: enters identical text options more than once, according to the results returned from the data service Additional entries: enables you to add static text options to the list
See the Example section following for a detailed example of a dynamic list.
135
July 2008
To create a global entry list for use in any list of the iView do the following:
...
1. Choose Tools Entry List Manager. The Entry List Manager dialog box is displayed. 2. At the bottom left, click Add and from the drop-down list, choose the type of entry list you want to create. 3. Select the label text and rename the list appropriately. 4. If you are creating a static entry list, follow the steps outlined in the first procedure (To create a local static entry list) of this section. If you are creating a dynamic entry list, follow the steps outlined in the previous procedure (To create a local dynamic entry list). To apply a global list to a selected list control in a form, choose Global from the Entry list set of radio buttons in the Entry List tab of the Control Properties dialog box.
Result
The result of creating an entry list is similar to the following:
Example
You would like to define a dynamic entry list to create a drop-down list of customer names: companies who do business with your company. You are going to use a data service called: BAPI_Customer_Details (which does not really exist). The input port receives the following required fields: Sales_Mgr_ID Max_Rows
For output to the list, the entry values should be received from the Customer_Number field, but displayed according to the Customer Name field. You want the drop-down list of customers to be alphabetized, and have only one instance of each name. Therefore, you might fill in the dialog box as follows:
136
July 2008
The result would be a list of customers, similar to the following:
137
July 2008
3.2.9.1
...
Create a Dynamic Entry List with a JDBC-Based Stored Procedure
1. In the Entry List tab in the Control Properties dialog box, choose Dynamic from the Entry list set of radio buttons. The Find Data Service dialog box is displayed. 2. Locate the stored procedure: a. From the System drop-down list, choose the JDBC-based database containing the stored procedure that you require. b. In the Look for combo box, enter the name of the stored procedure (without the prefix) or enter an asterisk (*). c. Click Search and select your stored procedure from the Select data service list. 3. Using the Input and Output drop-down lists, choose the ports of the data service through which the data should be channeled a. Input port will always be displayed as INPUT. If displayed as disabled (gray), this indicates that no input values are required by the stored procedure. b. Output port can be OUTPUT (usually a single record value) or RESULT (a record set, or table). Usually, you will select RESULT. 4. Because the fields of the stored procedure are returned dynamically, you need to first display the fields so that Visual Composer can store them. To do so: a. Click Add Fields. The Test Data Service dialog box is displayed. b. In the Input pane at the left, enter values for all required fields (those with asterisks). c. Click Execute. The returned results are displayed in the main pane. d. Click Finish. Visual Composer saves the fields of type Text string. 5. In the Assigned Value column of the Input port table, you can see the input value that you entered previously in the Test Data Service dialog box. In the Output port table under it, select the source field from which the VALUE should be taken and the corresponding field from which the display TEXT should be taken. The fields in the list are the text fields that were displayed in the results pane of the Test Data Service dialog box. 6. Click Close. You can use JDBC-based stored procedures in a similar manner to create Value Help in your model. See Adding Value Help to Your Model [Page 165].
138
July 2008
3.2.10 Use
Define a Dynamic Expression
A dynamic expression is a formula that you define in order to generate a dynamic field value in a property of a model element. Dynamic expressions can define conditions for field initialization, calculation, validation and text manipulation. They can also be used to define element behavior, such as whether an element is visible, editable or selectable. For example, you can define the following dynamic expression for a Plain Text control (a static text-display field) that indicates how many seats remain in economy class on a flight: Book your flight soon! There are only "&NSTR(@Econofree,"")&" seats left in economy class on this flight." The Dynamic Expression Editor assists you in writing and validating the syntax of dynamic expressions. You access the editor by: Clicking the function (fx) icon that appears to the right of an attribute field and selecting Enter formula. Clicking a Formula button to the right of a field in the Control Properties dialog box. This enables you to define a formula that computes a new value for the field based on results returned in the function. Clicking a Condition button to the right of a field in the Control Properties dialog box. This is used to define when a control is Hidden, Disabled or Required. For more information, see Control Properties Dialog Box [External] in the SAP NetWeaver Visual Composer Reference Guide. Note that when creating a dynamic expression for the Hidden option, this parameter can operate only on columns, rather than on single cells. The value can be specified as either the Boolean true/false or else activated by a control external to the table (rather than according to a value in another field of the same table). For examples of many commonly-used dynamic expressions, see Tables of Functions [Page 141].
139
July 2008
Procedure
...
1. Click one of the buttons that displays the Dynamic Expression Editor or click the function (fx) icon and choose Enter formula, as appropriate. The Dynamic Expression Editor dialog box, named according to the property that you are defining, is displayed as follows:
2. In the Function pane at the right, expand the node of the category that contains the function that you want to use. The different functions are grouped into categories (nodes), including: Data Fields, which contains all of the fields available from the data services in your model. This can be useful if, for example, you want a particular action type, such as a hyperlink, to represent a specific output in a query. Entry Lists, which display the values listed in all available global static entry lists. All available functions, divided into the following categories: Text Functions, Numeric Functions, Date Functions, Time Functions, Conditional Functions and Scientific Functions. Operators, which lists all the mathematical, logical, and comparison operators available for use in the expression.
Each function has an explanatory tooltip. In addition, the icon to the left of each function represents the data type returned when the function is evaluated, as follows: Icon Data Type Boolean Date Number Text Time
140
July 2008
Make sure that the icon of the function that you choose matches the required data type. You can read the text displayed above the Expression pane to see what data type is expected in the result. 3. Drag the required function to the Expression pane on the left of the dialog box. For example, you may want to expand the Conditional Functions node and use the IF function. In this case, the following expression is displayed in the Expression pane: IF(test,expr1,expr2) where test is any value or expression that can be evaluated to TRUE or FALSE, expr1 is the value that is returned if test is TRUE, and expr2 is the value that is returned if test is FALSE. When you click on a function or drag it to the Expression pane, the Help pane opens at the bottom left, displaying an explanation of the function and an example. 4. Use the formula to create your custom expression. You can write the expression by entering free text in the Expression pane, by dragging additional functions from the Function pane to the Expression pane, or by using a combination of the two methods. You can use the Data Fields node to locate another field whose value you want to include in your expression. To do this, expand the node and drag the field to the required position in the expression. Note the following rules: @@ = current field value @FieldName = value of the field with the specified name A reference to a field in an element other than that in focus uses the following format: #ID<ElementCode>@FieldName Do not concatenate strings that need to be translated.
5. When you have completed your expression, click Check to ensure that the expression is valid. If an error occurs, a message explaining the problem is displayed. For more information about validation messages, see Messages in the Dynamic Expression Editor [Page 160]. 6. When your expression is valid, click OK. The expression is displayed in the text box from which you accessed the Dynamic Expression Editor.
To view and validate all expressions defined in your model, you can click the Inspect button in the task-panel toolbar, and review all the expressions, listed in the Inspect Formulas task panel. For an example of using the Expressions Editor, see Adding a Second Data Service [External]. For examples of common expressions, see Tables of Functions [Page 141].
141
July 2008
3.2.10.1
Tables of Functions
The tables in the following sections list the functions that you can use in creating dynamic expressions. They are arranged by type, in the order that they appear in the Expression Editor. Text Functions [Page 142] Numeric Functions [Page 149] Date and Time Functions [Page 153] Conditional Functions [Page 158] Scientific Functions [Page 159] Dynamic Expression Operators [Page 160]
3.2.10.1.1
Function ASC
Text Functions
Description Syntax Examples ASC(A) Returns the Unicode equivalent of the character; in this case: 65 AT(Middletown,6) Returns the sixth character of the text string: e Returns the numeric ASC(char) code for the character char, according to Unicode encoding. Returns the character at the position indicated by the number n. If n is out of range, an empty string is returned. Checks (true or false) whether the string begins with the designated text string (pattern). The test is case-insensitive. AT(text,pos) where pos is a numeral indicating the character position from the start of the string
AT
BEGINS
BEGINS(text, pattern) where pattern is the text to be matched against the text of the same length at the beginning of the string
BEGINS(hello world, world) Indicates whether the string begins with the string world; in this case, returns false BEGINS(hello world, hello) This expression would return true CAPITAL(@COMP_NAME) Displays the string in sentence case; for example: Atlas city.
CAPITAL
Converts the string to CAPITAL(text) sentence case (first word capitalized).
142
July 2008
Function CAPITALW
Description
Syntax
Examples CAPITALW(@COMP_NAME) Displays the string in title case; for example: Atlas City
Converts the string to CAPITALW(text) title case (each main word capitalized and separated by underscores or white spaces). CHR(code) Returns the character represented by the given Unicode code. Compacts the given COMPACT(text) text by replacing consecutive spaces with a single space, and removing leading or trailing spaces.
CHR
CHR(65) Returns the character represented by the Unicode number (code), in this case: A COMPACT(' hello world ') == 'hello world' Removes spaces at the beginning and ends of the string, and replaces all groups of spaces with a single spaces; in this case, the result would be: hello world CONTAINS(hello world, wor) Indicates whether the string contains the text wor; in this case, returns true CONTAINS(hello world, hall) This expression would return false
COMPACT
CONTAINS
Checks (true or false) whether the string contains the designated text string (pattern). The test is case-insensitive.
CONTAINS(text, pattern) where pattern is the text to be matched against the contents of the string
ENDS
Checks (true or false) whether the string ends with the designated text string (pattern). The test is case-insensitive.
ENDS(text, pattern) where pattern is the text to be matched against the text of the same length at the end of the string
ENDS(hello world, world) Indicates whether the string ends with the string world; in this case, returns true ENDS(hello world, hello) This expression would return false
FILL
Fills a string of a given length with the specified (pad) characters.
FILL(len,pad)
where len is the desired number of characters in the string and pad is the character or characters for filling
FILL(8,*) Returns a string of eight characters, using * to represent all empty characters in the string. For example, HOME would be displayed as HOME****
143
July 2008
Function LEFT/ RIGHT
Description
Syntax
Examples LEFT(@@,3) Displays the first three characters of the returned string. For example, DOCUMENTATION would be displayed as DOC RIGHT(@SHORT_TEXT,4) Displays the last four characters of the string. For example, a value of FINALCOST would be displayed as COST LEN(hello world) Returns the number of characters in the text string; in this case, 11 LIKE(hello world, war) Indicates whether the string matches the search string *world; in this case, returns true LIKE(hello world, *war) This expression would return false
Returns a substring LEFT(text,len) of a specified number RIGHT(text,len) of characters, starting from the end of the string (RIGHT) or beginning of the string (LEFT).
LEN
Returns the number of characters in the string.
LEN(text)
LIKE
Checks (true or false) whether the designated search string (pattern) matches the text string. The test is case-insensitive.
(text,pattern) where pattern is the search text, to be matched against the text of string; it may contain wildcard characters
LOWER/ UPPER
Converts the returned string to lower case or upper case, respectively.
LOWER(text) UPPER(text)
LOWER(@COUNTRY_NAME) Displays the string in all lowercase letters; for example: usa UPPER(@@) Displays the string in all capital letters; for example: ATLAS
144
July 2008
Function LPAD/ RPAD/ ZPAD
Description Pads a string on the left/right (respectively) until the specified length of characters is reached. ZPAD pads strings on the left with zeroes to reach a specified length, but only if text is an integer.
Syntax LPAD(text,len, pad) where len is the desired number of characters in the string and pad is the character or characters for padding
Examples LPAD(hello,8,*) Adds the number of specified characters (in this case an asterisk) needed to reach the specified number of characters (8 in this example). In this case, the following would be displayed: ***hello RPD(hello,4,*) would return: hell ZPD(1000,10) would return: 0000001000 but ZPD(hello,10) would return: hello
MID
Returns a string starting a specified number of characters from the beginning of the string and containing the next specified number of characters.
MID(text,start,len) where start is the character number indicating the position at which to begin returning the characters, and len is the number of characters to display in the returned string
MID(@SHORT_TEXT,5,3) Displays a substring consisting of the sixth, seventh and eighth character of the string. For example, DOCUMENTATION would be displayed as ENT
The counting of characters begins from 0. PREF Returns the leftmost n characters in the text string, converting them to upper case.
PREF(text,len)
where len is the number of characters to return, starting from the first (leftmost) character in the string
PREF(hello world,5) Counts the indicated number of characters from the start of the string and converts them to upper case. In this example, the following would be displayed: HELLO
145
July 2008
Function REPLACE
Description Replaces all occurrences of the given string (pattern) with the designated replacement string. The Replace operation is casesensitive.
Syntax
Examples
REPLACE(text,pattern,r REPLACE(abcabc,b,** epstr)
*) where pattern is the search text and repstr is the text to Searches for each occurrence of replace each occurrence of the search pattern (in this case b) and replaces it with the the pattern search string (in this case ***). In this example, the following string would be returned: a***ca***c REPLACE(abcabc,bc, ) Would return: aa
TRANSLATE
Indicates the string parts that require translation.
TRANSLATE(text, [tType]) where text is the string to be translated and tType is the (optional) type classification of the string. See the Text Type Classifications [Page 147] table for the available classifications.
=IF(@Status=="1", TRANSLATE("green"), TRANSLATE("red")) Specifies that the values green and red should be included in the translation file. If these values are translated (using translation tools), the corresponding translated text appears at runtime, according to the value of the Status field. =(TRANSLATE("Football", "XTIT")=="Football") When used in the Hidden property of a control, hides the control for languages that translate the term 'football' as something other than 'football'. XTIT is the Title string classification. Do not use TRANSLATE for static values (use it only for dynamic expressions) because interpretation of the TRANSLATE function may affect runtime performance.
146
July 2008
Function TRIM/ LTRIM/ RTRIM
Description Removes the white space from both ends of the string. LTRIM removes the white space only from the left and RTRIM removes all the trailing spaces.
Syntax TRIM(text) LTRIM(text) RTRIM(text)
Examples TRIM(@YEAR_TO_END) Removes the white space in the returned value. For example, the value ANNUAL TURNOVER would be displayed as ANNUAL TURNOVER (without the spaces at the beginning and the end). LTRIM( hello world ) Removes white space only from the left; in this case, the following would be displayed: hello world
(string)&(string) & Connects two (Concatenate returned values in using Logical order to produce a AND) single, continuous value. NOTE that only two arguments can be concatenated.
(@CITY_NAME)&(STATE_NAME ) Displays the returned values of the two fields as a single value. For example, if the values DAYTON and OHIO are returned for the two fields, the value DAYTON OHIO would be displayed.
3.2.10.1.1.1
Text Type Classifications
Following is a list of type classifications used in the TRANSLATE function. The classifications are possible values for the tType parameter, and the display names are the strings that appear in the translation information file. Code XACT XALT XBCB XBLI XBUT XCAP XCEL XCKL XCOL Display Name accessibility alternativetext breadcrumbstep listitem button caption cell checkbox tableColumnHeading
147
July 2008
Code XCRD XDAT XFLD XFRM XGLS XGRP XHED XLGD XLNK XLOG XLST XMEN XMIT XMSG XRBL XRMP XROW XSEL XTBS XTIT XTND XTOL XTXT YACT YBLI YDEF YDES YEXP YFAA YFAQ YGLS YINF
Display Name tabStrip datanavigationtext label frame term grouptitle heading legendtext hyperlink logentry listbox menu menuitem messagetext radio roadMapStep tableRowHeading selectiontext tab tableTitle treeNode quickInfo generaltext accessibilitylong list definition description explanation faqa faq glossarydefinition informationtextlong
148
July 2008
Code YINS YLOG YMSE YMSG YMSI YMSW YTEC YTIC YTXT ZFTX
Display Name instruction logEntrylong errorMessage messagetextlong informationMessage warningMessage technicaltextlong ticker generaltextlong formattedtext
149
July 2008
3.2.10.1.2
Numeric Functions
Function ABS
Description
Syntax
Examples ABS(-3) Returns the value of the number without the sign. In this case, the returned value would be 3 CEIL(@@,0.01) Returns a number rounded off to the next highest multiple of 0.01. For example, 6.2468 would be rounded off to 6.25
ABS(n) Returns the absolute value of a given number. Rounds a number upward to the nearest integer or multiple of a defined factor. CEIL(n,factor) where factor is the basis for rounding off the number
CEIL
FLOAT
Converts a text FLOAT(str) string to a floating-point number. Rounds the given number to the highest integer that is equal to or smaller than the number. FLOOR(n)
FLOAT(-3.14) Returns the digital representation of the floating-point number in the string. In this case, the returned value would be -3.14 FLOOR(3.14) Rounds the number down to the highest integer. In this case, the returned value would be 3
FLOOR
HEX
HEX(str) Converts a hexadecimal number in a text string to a decimal number. Converts a text INT(str) string to a integer, rounding it down to the nearest whole number. Constrains a number to the specified range. LIMIT(lower,n,upper) Where lower is the minimum value that can be returned and upper is the maximum value that can be returned
HEX(6EA5) Parses a text string containing a hexadecimal number. In this case, the returned value would be 28325 HEX(100) This expression would return would return 256 INT(100) Parses a text string containing an integer. In this case, the returned value would be 100 INT(-3.14) This expression would return would return -3
INT
LIMIT
LIMIT(0,3,10) If n is less than the lower (first) value, returns the lower value. If n is greater than the upper value, returns the upper value. Otherwise, returns n. In this case, the returned value would be 3 LIMIT(0,13,10) This expression would return would return 10
150
July 2008
Function MAX
Description
Syntax
Examples MAX(0,2,3) Displays the largest value in the set of values. In this case, the returned value would be 3
MAX(n1,n2) Returns the largest value among a specified set of values. MIN(n1,n2) Returns the smallest value in a set of values. Returns a formatted string representing the defined number. NSTR(n,mask) where mask is a formatted sequence defined according to the Number Formatting Mask [Page 152] table
MIN
MIN(0,3,6) Displays the smallest of the set of values. In this case, the returned value would be 0 NSTR(@@,B) Displays or hides zero/blank values. In this case, an empty space or a value of 0 would not be displayed. NSTR(@SD_DOC,Z) Displays leading zeroes in the field value. In this case, if @SD_DOC contains 10 characters in the string, the number 1432 would be displayed as 0000001432 NSTR(@@,10.2) Rounds off a long decimal output to a two-place decimal value. In this case, if the value of the current field is 142.3213762, the following value would be displayed: 142.32 NSTR(@TOTAL_PRICE,C) Adds a comma separator to values in the thousands. In this case, if the value of @TOTAL_PRICE is 682328, the following value would be returned: 682,328
NSTR
To concatenate two numbers, use the NSTR function with Logical AND , as in this example: NSTR(@FIRST,NORMAL)&NSTR(@SECOND,NO RMAL). In this example, returned values of 2 and 4 would result in a value of 24 being displayed. NVAL Converts a text NVAL(str) string to a numeric value where possible. NVAL(0xFF) Parses a text string and returns a decimal number, where possible. In this case, the returned value would be 255. NVAL(83) This expression would return would return 83 NVAL(holiday) This expression would return would return 0
151
July 2008
Function POS
Description
Syntax
Examples POS(100) Parses a text string and returns a positive integer. In this case, the returned value would be 100 POS(-3.14) This expression would return would return 0
Converts a text POS(str) string to a positive integer number.
RND
RND(max) Returns a random where max is the top value number that is in the range greater than or equal to zero and less than or equal to the given maximum value. ROUND(n) Returns the integer value closest to the given number.
RND(68) Returns a random integer between 0 and the given number. In this case, a returned value might be: 7 or 34
ROUND
ROUND(11.75) Rounds the given number up or down, to return the closest integer. In this case, the returned value would be: 12 ROUND(11.50) This expression would return would return 12 POS(11.25) This expression would return would return 11
SIGN
SIGN(n) Returns the sign of the given number.
SIGN(13) If number is less than 0, returns -1. If number is greater than 0, returns 1. Otherwise, returns 0. In this case, the returned value would be 1 SIGN(-5.3) This expression would return would return -
152
July 2008
3.2.10.1.2.1
Number Formatting Mask
The number formatting mask uses the following syntax: [-|+] [Z|P] [B] [C] [n][.m] [@r | % | $ | [CUR] ]
Mask + Z P B C N .m @r % $ [CUR] NORMAL
Description Displays + for positive values and - for negative values. Displays a space for positive values and - for negative values. Displays insignificant digits as zeros. Displays insignificant digits as spaces. Displays a space when the value is zero, regardless of other codes. Inserts a thousands separator into the number. Number of digits to display to the left of the decimal point. If omitted, only the significant digits are displayed. Number of digits to display to the right of the decimal point. If omitted, only the significant digits are displayed. Displays numbers using radix r (2 - 36). Displays numbers as a percentage of 100. Inserts the locale-specific currency code. Inserts the given currency code. The currency code must be enclosed in brackets (such as [USD] or [EUR]). Displays the number in standard format
153
July 2008
3.2.10.1.3
Date and Time Functions
Function Description
DATE
Syntax
Examples
DATE(year,month,day DATE(2005,4,23) Returns the date Compiles the year, month and day specified by the given ) values into a formatted date. In this year, month, and day case, the following might be returned: values in the default 23/4/2005 format. TIME(hour,min,sec) TIME(14,30,45) == 14:30:45 Returns the time Compiles the current time according to specified by the given the hour, minute and second values into hour, min, and sec a formatted time. In this case, the values in the default following might be returned: 14:30:45 format. Increases/decreases a date/time value by the specified number of date (dt) units. DADD(dt,n,unit) TADD (t,n,unit) where unit is one of the items listed in the Date and Time Units [Page 155] table DGET(dt,part) TGET(t,part) where part is one of the items listed in the Date and Time Parts [Page 155] table TADD(@CREATE_TIME,13,H) Adds 13 hours to the value returned. In this case, 10:17:22 would be converted to 23:17:22 (default HH:NN:SS format). DGET(@CREATE_DATE,M) Returns only the value of the specified time unit from within the date value. In this case, 30.05.2002 would return 5, while 27.02.2004 would return 2 DSTR(@DATE_FIELD,MON DD, YYYY) Converts the date value returned to a string date format. In this case, 30.05.2002 would be converted to May 30, 2002 DSTR(DADD(@CREATE_DATE,13,D) ,XML_DATE) Using the DADD function, this expression adds 13 days to the returned date, and then converts the date format to the XML standard format. In this case, 30.05.2002 would be converted to: 2002-06-12 DSUB(NOW(),@CREATE_DATE,D) Calculates the difference in the two dates, specified here, in days. In this case, values of 16.09.2007 (today) and 05.8.2007 for these two fields would return 39
TIME
DADD/ TADD
DGET TGET
Returns the numeric value of the selected part of a date (dt) or time (t).
DSTR/ TSTR
DSTR (dt,mask) Converts a date or time object format to a TSTR (t,mask) where mask is devised defined text string. from the set of special characters listed in the Date and Time Masks [Page 156] table
DSUB/ TSUB
Returns the difference DSUB(dt1,dt2, between two dates, in unit) the specified date unit. TSUB (t1,t2,unit) where unit is one of the items listed in the Date and Time Units [Page 155] table
154
July 2008
DVAL/ TVAL
Syntax DVAL(str) TVAL(str)
Examples DVAL(@TIME_FIELD) Converts a date string to a standard input format. For example, '30.05.06' would be converted to the standard date format: 30/05/2006
Converts a date or a time string representation usually in a user input field to a standard date/time value. The date/time input format is defined by the client platform and user locale settings. Returns the current date or time.
NOW/ TNOW
NOW() TNOW()
NOW() Returns the current calendar date, such as: 27/06/2006

TNOW()
Returns the current time, such as: 08:40:10
3.2.10.1.3.1
Code Z S N H D M Q Y C
Date and Time Units

Date/Time Unit Milliseconds Seconds Minutes Hours Days Months Quarters Years Centuries Milliseconds 1ms 1,000 ms 60,000 ms 3,600,000 ms 86,400,000 ms 2,592,000,000 ms 7,776,000,000 ms 31,536,000,000 ms 3,153,600,.000,000 ms
155
July 2008
3.2.10.1.3.2
Date and Time Parts
Code D DD DAY M MM MON Y YY YYYY MS SS NN H HH H12 HH12 AM|PM
Date/Time Part Days as 1-31 Days as 01-31 Days as Sun-Sat Months as 1-12 Months as 01-12 Months as Jan-Dec Years as 0-99 Years as 00-99 Years as 1900-9999 Milliseconds as 000-999 Seconds as 00-59 Minutes as 00-59 Hours as 0-23 Hours as 00-23 Hours as 0-12 Hours as 00-12 Meridian indicator
Any character codes other than the date-part codes listed in this table are embedded as is. To insert codes reserved as date-part codes, you can use HTML code (for example, you might use &#68 for D).
156
July 2008
3.2.10.1.3.3
[date-part Mask date-part embedded-chars special-format |
Date and Time Masks

embedded-chars]* Description Listed in the Date and Time Parts [Page 155] table Character codes other than those listed in the Date and Time Units [Page 155] and the Date and Time Parts [Page 155] tables Listed in the Special Date and Time Formatting Codes [Page 157] table | special-format
The date/time formatting mask uses the following syntax:
To insert codes that are reserved as date-part codes, you can use HTML code (for example, you might use D for D).
3.2.10.1.3.4
Special Date and Time Formatting Codes
Code DATE SHORT_DATE LONG_DATE XML_DATE LOCALE_DATE TIME SHORT_TIME LONG_TIME XML_TIME LOCAL_TIME DATETIME SHORT_DATETIME LONG_DATETIME XML_DATETIME
Format DD/MM/YYYY D/M/Y Long date format YYYY-MM-DD Local date format HH:NN:SS H:NN Long time format THH:NN:SS Local time format DD/MM/YYYY HH:NN:SS D/M/Y H:NN Long date/time format YYYY-MM-DDTHH:NN:SS
Sample Result 31/01/2001 31/1/1 Wed Jan 31 2001 2001-01-31 Jan 31, 2001 02:39:40 2:39 02:39:40 UTC+0200 02:39:40 2:39:40 31/01/2001 02:39:40 31/1/1 2:39 Wed Jan 31 2001 02:39:40 UTC+0200 2001-01-31T02:39:40 2:39:40, Jan 31, 2001
LOCALE_DATETIME Local date/time format
Any arbitrary date/time format can be defined using sequences of DATE_PARTS, listed in the Date and Time Parts [Page 155] table.
157
July 2008
3.2.10.1.4
Conditional Functions
BOOL
Syntax
Examples
BOOL('YES')
BOOL(value) Evaluates a string with a logical value (ignoring case) and returns true when the string equals true, T, yes or Y, or if it contains a non-zero number. Otherwise, it returns false IF(text,expr1, Checks expr2) whether a specified condition is met. If it is, returns the first specified value; otherwise, returns the second specified value.
This expression would return true

BOOL('NO')
This expression would return false

BOOL(1)
This expression would return true
IF
IF(@NET_PRICE>1000,Expensive,Che ap) If the expression in the field is TRUE (the value is greater than 1000), the value Expensive is returned. If the expression is FALSE (the value is less than 1000), the value Cheap is returned. IF(@@==DE,Germany,Other) If the string DE is returned, the value returned is Germany. Otherwise, the value returned is Other IF(@BANK_CTRY==US,United States, IF(BANK_CTRY==GB,England,IF(@BA NK_ CTRY==IL,Israel,IF(@BANK_CTRY== DE, Germany,Other)))) A nested IF expression defining display text for country names. If the value returned is not US, GB, IL or DE, the value returned is Other IF(ISNULL(@@),NO FAX NUMBER, @@) If the value of the current cell is empty, the value returned is NO FAX NUMBER; otherwise, the value of the current cell is returned.
ISNULL
Returns TRUE ISNULL(value) if a reference is to an empty, undefined or null cell, otherwise, returns FALSE
158
July 2008
NVL
Syntax
Examples
NVL('a', 'b')
NVL(v1,v2) Returns the value of the first nonempty or undefined string in a given set of values. If all argument items are empty, returns an empty string.
Returns the value of the first non-empty string in the set of values; in this case: a
NVL('', 'b')
In this case, the first string is empty, so that the value of the second item is returned: b
3.2.10.1.5
Scientific Functions
Function ACOS
Description
Syntax
Examples
ACOS(0.540302306)
ACOS(n) Returns the arccosine of n. The arccosine is the angle, in radians, in the range [0...], whose cosine is n. ASIN(n) Returns the arcsine, or inverse sine, of n. The arcsine is the angle, in radians, in the range - [-/2.../2], whose sine is n. Returns the arctangent of n. ATAN(n) The arctangent is the angle, in radians, in the range [/2.../2], whose tangent is n. Returns the arctangent of the ATAN2(y,x) specified (x, y) coordinates, in radians, in the range (/2.../2]. Returns the cosine of n, where n is an angle in radians. COS(angle)
This expression would return would return: 1 COS(1) This expression would return would return: 0.540302306
ASIN
ATAN
ATAN(1.557407725)
This expression would return would return: 1

ATAN2(2,2)
ATAN2
This expression would return would return: 0.785398163

COS(1)
COS

EXP(2.5)
EXP
Returns e (the base of natural EXP(n) logarithms) raised to the power of n. Returns the natural logarithm LOGN(n) n.

LOGN(12.18249396)
LOGN
159
July 2008
Function POW
Description
Syntax
Examples
POW(2,10) == 1024
POW(n,p) Returns the result of a number n raised to the power Where n is the base number of p. and p is the power Returns the sine of an angle, SIN(angle) in radians. Returns the square value of n. SQ(n)
SIN
SIN(1) This expression would return would return: 0.841470985

SQ(6)
SQ

SQRT(256)
SQRT
Returns the square root of n. SQRT(n)
This expression would return would return: 16 TAN(1) This expression would return would return: 1.557407725
TAN
Returns the tangent of an angle, in radians.
TAN(angle)
3.2.10.1.6
Dynamic Expression Operators
Type Mathematical operators
Function + * / Addition of two numeric values Subtraction of a numeric value Multiplication of two numeric values Division of two numeric values
Logical operators
AND Logical AND of two Boolean values
&& Logical AND of two Boolean values

Logical OR of two Boolean values OR Logical OR of two Boolean values NOT Logical NOT of a Boolean value
! Other operators < <= > >= == != <> %
Logical NOT of a Boolean value Less than (any value) Less than or equal to (any value) Greater than (any value) Greater than or equal to (any value) Equal to (any value) Not equal to (any value) Not equal to (any value) Modulus arithmetic of two numeric values
160
July 2008
3.2.10.2
Messages in the Dynamic Expression Editor
When you click Check in the Dynamic Expression Editor dialog box, the validation results are displayed in the area below the Expression pane. Validation results can include the following: If an expression is correct, it is confirmed with a green flag and the message Expression is valid is displayed. If an expression uses invalid syntax, an error (yellow flag) or warning (red flag) is displayed, together with information that helps you to correct the syntax. When there are data type mismatches, the Dynamic Expression Editor implicitly converts types where possible. For example, when it expects data of type String, but the validation result is Boolean, the editor confirms the expression and generates a warning that suggests that you use a different function (or else accept the implicit conversion). You can choose to proceed with the defined expression or you can modify it. If the type conversion is problematic such as attempting to convert data of type Date to type Boolean the editor generates an error message. You can choose to proceed with the defined expression, or you can modify it.
161
July 2008
3.2.11
Create Value Help
Value help, also known as input help, selection help, or F4 help, is the offering, typically in a pop-up dialog box, of possible valid values for an input field. Visual Composer includes functionality for creating two different types of value help: Value Help Entry Lists (Design-time Value Help) You can create reusable selections of values that are made available as entry lists. You can then use these lists while designing your model to, for example, supply valid values to a formula. This is provided in conjunction with the Entry List function described in Create an Entry List [Page 134]. See Creating a Value Help Entry List [Page 162] Value Help in Your Model (Run-time Value Help) You can integrate value help into your model. When you do this, you add a button next to an input field that displays a dialog box that lists valid values. This helps a user select the right, properly formatted value to enter into the field. You configure this type of value help with the value help wizard. The wizard creates the button and an embedded iView that models the value help functionality. See Adding Value Help to Your Model [Page 165]
3.2.11.1
Creating a Value Help Entry List
Use
You can create value help entry lists to help you while designing your model for example, to supply valid values to a formula or to populate controls such as drop-down lists. You design these types of lists in conjunction with the Entry List function, described in Create an Entry List [Page 134].
Procedure
...
1. Choose Tools Entry List Manager. The Entry List Manager dialog box is displayed. 2. At the bottom left, click Add and choose Value Help List from the drop-down list. The Value Help wizard is displayed. 3. On the Select a Data Source screen, use the Available Services section to browse to the data service that you require (refer to Find Data [Page 61],which describes the similar Find Data task panel). 4. Depending on the type of data service, select a characteristic (BI system), level (XMLA system), or table column (JDBC system):
162
July 2008
5. Click Next. 6. On the Review Value Help List screen, click Browse to retrieve available values. Up to the first 1000 records are returned. You can use the Look for dropdown list to search for values, if the values you require are not found in the first 1000 records. If you search, you can select an Operator and enter values in the Low and High fields to help restrict your search. 7. From the Available Values list, chose the values you want to appear in the entry list and (right arrow) to transfer them to the Selected Values list in the right pane. Click click (left arrow) to remove selected values from the list:
163
July 2008
8. When your list is complete, click Finish. The values are transferred to the Entry List Manager, as in the following example:
164
July 2008
Result
The entry list that you created is now available as a global entry list, accessible from the Entry List tab in the Control Properties dialog box when defining various types of lists (see Create an Entry List [Page 134]). You can use the values in the Expression Editor, like you would data fields, by expanding the Entry Lists node in that dialog box:
You can also use a value help entry list to populate controls such as drop-down lists or list boxes, which might look something like this in runtime:
See also: Value Help List [External] in the SAP NetWeaver Visual Composer Reference Guide.
165
July 2008
3.2.11.2
Adding Value Help to Your Model
Use
You can add a value help button to your model that the user can click to display a dialog box that lists valid values. This helps the user select the right value to submit in an input form.
Procedure
...
1. On the Layout tab, right-click a field in an input form, and from the context menu, choose Add Value Help. 2. In the Add Value Help for Selected Input Field dialog box, from the Type drop-down list, select the type of value help to create. Notice that information about the selected field appears in the Properties section of the screen. Uncheck the Hide advanced configuration options (BI systems only) checkbox, so that you will be able to see the advanced Specify Data Service Runtime Parameters screen (step 5, below). Click Next. 3. In the Select Data Service dialog box, identify the data service that will provide the actual values for the value help list (refer to Find Data [Page 61], which describes the similar Find Data task panel). In typical cases, this will be the data service of the input field itself, but you could use values from any data service. You can use a JDBC-based stored procedure as your data service that provides the values for the value help. The procedure is similar to that described in Create a Dynamic Entry List with a JDBC-based Stored Procedure [Page 137]. 4. In the Properties section, select whether to retrieve values for the list from the Dimension Table or Master Data Table from the Get data from drop-down list. Click Next. 5. Configure value help parameters on the Specify Data Service Runtime Parameters screen: a. In the Input section, select the port for the input value, pre-configure values for the list if desired, and configure search functionality if desired. b. In the Output section, select the port for the output value, configure which type or types of fields to display, and select the key field to deliver to the query. 6. Click Finish.
Result
A Value Help button is created next to the input field on the form. When the user presses the button, a dialog box appears that lists valid values for the field:
166
July 2008
Example
See Integrating Value Help into Your Model [External].
See also: Value Help Configuration Wizard [External] in the SAP NetWeaver Visual Composer Reference Guide.
167
July 2008
3.2.12 Use
Create a Chart
With Visual Composer, you can create a wide range of different types of charts, including animated charts. Charts make it easy for users to visualize comparative values and to see trends in the data. The charts are linked to the data generated from the data service and are updated as the data itself is modified. There are two kinds of chart modes: A linked chart receives data directly from the data service, displaying the data in one of the chart forms. The output can be subsequently linked to another data service so that the user can click on a chart element (value) and display detailed information relating to that value. The following is a design-time example of a linked chart:
A bound chart receives its data from another output component, from which the information is channeled using data binding. This means that the identical data is displayed in the two UI components, one (possibly) in tabular form and one in chart form. The following is a design-time example of a bound chart:
168
July 2008
Procedure
... ...
1. Prepare and connect the main components of your iViews: the data service(s), the input components and the output views as needed. 2. Drag out from the output port of the data service or output component and choose Add Chart View. The chart icon is displayed. 3. Link the chart as follows: If the chart data is to flow into another data service, drag out from the out port of the chart and link to the Input port of the data service. Then: i. ii. Map the fields of the link by double-clicking the line and mapping the fields in the Configure Element task panel. Create a Select event on this link in order to activate the data service each time a selection is made in the chart.
If the chart data is to flow into another UI component, drag out from the out port of the chart and create the link to the other component.
4. Double-click the chart icon to configure it in the Configure Element task panel. 5. In the Chart view group of attributes, you can rename the chart and select the chart type, along with type-specific details for specifying the graphical look of the data presented in the chart. See Chart View [External] in the SAP NetWeaver Visual Composer Reference Guide. 6. From the Field drop-down list in the Category Axis group, choose the field whose values will be displayed as axis categories. In the Axis label field, enter the display name for the axis. In the following example, which is the runtime result of the design-time example previously, the Category Axis displays the values in the Material column of the table:
7. To provide a label for the axis of data values, enter a name for it in the Axis Label field of the Value Axis group of attributes.
169
July 2008
8. Fill in the other attributes as needed. Full explanations of all of the attributes are provided in the Chart View [External] section of the SAP NetWeaver Visual Composer Reference Guide. 9. In the table at the bottom of the Configure Element task panel, define the data series by clicking the Add (plus) button and choosing the field whose values will be flowed into the chart. In the Data Series column, enter a name for the series. You can click the button again to create other data series as well. In the example shown in step 6, you can see that there are two data series Net Price and Quantity taken from the Net Price and Dlv Qty columns in the table, respectively. 10. Click the Layout tab and lay out the chart placeholder to indicate the location and size of the tab. Charts are displayed only in runtime.
Example
The example of the linked chart at the beginning of this section is displayed in runtime as follows:
In this case, the data from the chart Material category and the data series data is channeled into a data service and the results are displayed in a form.
170
July 2008
3.2.13 Use
Create a Toolbar
In certain forms, tables or other UI components, you may want to create a collection of buttons that initiate different actions in the workflow, such as adding a row in a table, displaying a popup window or closing a window. You can create a toolbar for a UI component on either the Layout board or the Design board.
Procedure
... ...
1. On the Layout board (recommended), right-click the edge of the UI component for which you want to create the toolbar and choose Create Toolbar from the context menu. Alternatively, you can click the Edit button to the right of the Toolbar field in the Configure Element task panel. The Create Toolbar Buttons dialog box is displayed. 2. At the bottom left, click the Add (plus) button and in the Button name field at the top, enter a name for the button. 3. In the middle section of the dialog box, click the (Add) button to create an action:
A system action is a predefined event, such as closing a window or inserting a row. All the available system actions are displayed in the popup menu when you add an action. A custom action is a specialized action that you define, by choosing Custom action from the popup menu and entering a name for it in the Action Name column of the new row.
4. To the right of the action list, choose the values you require for that action: From the Apply to drop-down list, select either Self (the component in which the button resides) another UI component in which the event should be activated (if any). From the Validation drop-down list, choose None for no validation of that action, or Self, Element or Window to what item should be validation.
5. To create a sequence of actions for the selected control, add other actions and order them using the 7. Click OK. 8. You may wish to change the order of the buttons in the layout once you have finished defining the toolbar. 9. Return to the Design board and, if necessary, rename the various connecting lines according to the event names assigned to the Custom Action buttons, respectively. (Move Up) and (Move Down) buttons.
6. If needed, add other buttons by repeating steps 2 through 5.
Result
At runtime, a toolbar of buttons is displayed at the top of the UI component. Each button initiates a different action.
171
July 2008
Example
This toolbar was created for an output grid, enabling the user to add and delete lines, and scroll through the list of records:
The buttons were created as system actions, as follows:
Try this! You can create a button that links to a URL by creating a hyperlink and embedding the URL in a formula. Say, for example, you want to enable the user to display information about a bank that he selects from a table of banks.
...
172
July 2008
1. Create the BanksA iView described in Adding a Data Service for Choosing Banks [External]. 2. On the Layout board, right-click the Bank Address Form and choose Create Toolbar from the context menu. The Create Toolbar Buttons dialog box is displayed. 3. Add a button and name it Bank Info. 4. Define a System action, choosing Hyperlink from the System action drop-down list. 5. Click the Formula button to the right of the Hyperlink address field. The Hyperlink address (Expression Editor) dialog box is displayed. 6. To create the URL for a browser search such as in Google first run the search in a separate browser window and copy the URL text up to the specifics of the search. 7. Paste the copied text into the text box of the dialog box, placing it within quotation marks. 8. Expand the Operators node at the bottom of the list of expression types and doubleclick the & (concatenation) sign. Then expand the Data Fields node and double-click on the BANK_NAME field. Check your expression; it should look similar to the following:
9. Click OK and click OK in the Create Toolbar Buttons dialog box. 10. Your toolbar should look similar to the following:
173
July 2008
3.2.14 Use
Define an Image Control
You can use an Image control to display an image in a UI component.
Prerequisites
You have created an image library containing the image(s) that you require. To do so:
... ...
1. Choose Tools Image Manager. The Image Manager dialog box is displayed. 2. Click the Browse button at the bottom center and in the Choose file dialog box, navigate to and select the image that you want to add to the library and click Open. 3. Click the Upload button. The image is added to the Image Manager display box. 4. If needed, rename the image by selecting it and clicking the Rename button in the toolbar. 5. Repeat steps 2 and 3 to add additional images. 6. When done, click Close. The image library is now available for use throughout your model.
Procedure
... ...
1. On the Layout board, right-click the UI component that is to contain the image and choose Configure Element from the context menu. The Configure Element task panel is displayed. 2. Click the Add (plus) button at the bottom right and from the list in the New UI Control box, choose Image. In the Field name field, enter a name for the image and click OK. 3. Right-click the border of the new image and choose Properties from the context menu. The Control Properties dialog box is displayed. 4. If you do not want a label for the image, click the Display tab and from the Label position drop-down list, choose No label. 5. Click the Image tab. The images created in the image library (described in the Prerequisites section previously) are displayed. 6. Select the checkbox under the image to be entered in the control. It is displayed in the selected area on the layout. 7. In the Image field, enter the Condition in which the image is to be displayed (true is the default). You can use the Condition button to create the formula in the Expression Editor. 8. Choose a radio button to display the image in its Original size, or Fit size to adapt it to the defined area. 9. Click Close and adjust the image in the layout as necessary.
174
July 2008
3.2.15 Use
Use the Style Editor
You can use the Style Editor accessed through the Control Properties dialog box to define the look and size of the text in the following controls: Expression box Progress bar Ticker
Prerequisites
The Adobe Flex technology has been installed with your Visual Composer server.
Procedure
... ...
1. On the Layout board, right-click the control whose text style you want to define and choose Properties. The Control Properties dialog box is displayed. 2. Click the Styles tab. 3. To define the first style, click the Add (plus) button at the right. The Style 1 row is added. 4. Using the controls at the bottom, define the Text font, colors, style and alignment as needed. The results are displayed on the text in the Style cell. 5. In the Condition cell, define the condition for when the style is used, by entering true or false (for Boolean values), defining a formula, or leaving it as the single style. 6. Repeat steps 3 to 5 to define the other styles. 7. Click Close.
Example
The following example is taken from the SalesordersB example in Adding a Second Data Service [External]. It defines a font and color of the cells according to the dynamic expression defined for the field.
175
July 2008
3.2.16 Use
Print the Model
You can print the diagram of the model level currently displayed or you can print a document containing selected levels, together with notes, subdiagrams and other documentation.
Prerequisites
Your model is displayed on the Design board.
Procedure
To print the diagram currently displayed:
...
1. Choose Model Print. A printer-friendly version of the diagram is generated and displayed. 2. From the dialog-box menu, choose File Print. The standard Windows Print dialog box is displayed. 3. Click Print.
To print the model documentation and diagrams:

... ...
1. Choose Tools Documentation Wizard. The Documentation Wizard is displayed. 2. In the Source model level field, choose the model level or iView whose documentation you want to print. 3. From the Include indocumentation list, choose which items to print: Option Top-level Design-board diagrams only Model elements and properties Description Prints the diagram(s) displayed on the Design board. Prints information about the model (for example, the iView name, author, last modified date, user-defined hyperlink and user defined notes). In addition, it prints a table listing the elements belonging to the model component, and properties of those elements. If the component has no lower-level elements, the table does not appear. A section at the end of the document that provides the following model statistics: Total Diagrams, Total Definitions, Total Property Values, Average Definitions per Diagram, Average Properties per Element. Adds an alphabetized index of model elements to the document. Prints all diagrams of component levels below that displayed on the Design board.
Statistics
Index All Design-board diagrams
176
July 2008
If none of these options are selected, the printed documentation includes a heading per model, module, page, and iView node in the model hierarchy, a table of contents, and a description under each heading. (You write the object descriptions in the Configure Element task panel, in the Comments field.) 4. Click Generate. The document is displayed in a new browser window. To save a permanent copy of the document, choose File Save As in the new browser window. The file is saved in HTML format. To print the document, choose File Print in the new browser window.
3.2.17 Use
Manage Your Portal System Aliases
In large models, you may want to review the systems from which you have chosen your data services, and possibly change the source system as well. This is done based on the aliases defined for each system in the portal. This function is useful when system aliases have been changed in the portal or when a model is ported between servers that have different aliases for the same back-end systems.
Procedure
... ... ...
1. Choose Tools Alias Manager. The System Alias Manager dialog box is displayed, listing the following information: Alias: alias defined for the system in the System Landscape editor of the portal Used in: name of the iView containing a data service within the named system Used by: name of the data service System Type: type of system containing the data service
2. Select the check boxes of the aliases you want to change, or use the Select button to: Select all instances of a single alias (Select <aliasname> Alias) Select All Aliases Select None
3. To change from one alias to a different one, click Replace. The Choose Alias dialog box is displayed. In the empty field, enter the alias of a different system defined in the portal and click OK.
177
July 2008
3.2.18 Use
Store Data in a Data Store for Later Use
Data store is a central data container in which you temporarily store data for later use. You create one data store per iView. To do so, you can place a single data store instance in the model, or, for convenience purposes, you can place multiple data store elements, all pointing to the same data store. The connecting lines to the input port of the data store are of data mapping type. The values in the data store are accessed using expressions.
Procedure
...
1. In your model, drag out from the out port of the UI component whose data is to be stored, and choose Data Store from the context menu. 2. Double-click the data store to open the Configure Element task panel. 3. At the bottom of the task panel, click the Add (plus) button to display the Field Properties dialog box. 4. In the Field name field, define a virtual field for the data store and click OK. 5. Click the connecting line to the data store, and name the event according to the action that should be performed for adding items to the data store, for example: Add_Item. 6. In order to map values from the table to the data store, create a dynamic expression by clicking fx in the first row of the Assigned Value column and choosing Enter formula. In the Assign Value dialog box, enter the required expression. An example of such an expression is given in step 5 of the following example. 7. To create a complementary data store that clears the store, for example, repeat steps 1 - 6. 8. On the Layout board, create buttons for transferring items (and removing, if needed) to the data store: a. Right-click the UI component from which values are to be sent to the data store and choose Create Toolbar from the context menu. The Create Toolbar Buttons dialog box is displayed. b. Create buttons named logically, and assigned a Custom action named according to the event defined for them (step 5). c. Click OK. 9. On the Design board, drag a Form View icon from the Compose Model task panel to create a free-standing form that represents the data store in the iView. 10. Define a virtual field to display the data store values: a. At the bottom of the Configure Element task panel, click the Add (plus) button to display the New UI Control dialog box. b. Choose Expression Box, name it appropriately, and click OK. c. Double-click the row of the new field to display the Control Properties dialog box. d. In the General tab, click Formula to the right of the Expression field. The Computed Value dialog box is displayed.
178
July 2008
e. In the list of functions in the right pane, expand the Data Store group, and double-click the name of the field in the data store. This is the field whose values will be transferred to the form. f. Click OK to close the dialog box. 11. Click OK in the Control Properties dialog box.
Example
In this example we will use the Salesorders A model and add to it a data store. We will then create a form called Cart into which users can transfer materials from the Salesorders table. Materials transferred to the cart will be concatenated into one string divided by semicolons.
...
1. Import the Salesorders A model or create it from scratch. 2. On the Design board, drag out from the out port of Sales Orders Grid and choose Data Store from the context menu. 3. In the Configure Element task panel, create a virtual field for the data store, named Items. 4. Click the connecting line to the data store, and name the event Add_to_Cart. 5. In the first row of the Assigned Value column of the table, create an expression that maps values from the table to the data store. Leave the Default value field blank, and click OK. a. Double-click in the Assigned Value column to display the Assign Value dialog box (Expression Editor). b. Enter the following expression: IF(CONTAINS(STORE@Items,@MATERIAL),STORE@Items,STORE@Items &(IF(LEN(STORE@Items)>0,'; ',''))&@MATERIAL) This expression checks whether the MATERIAL value transferred to the Items field is already contained in it. If it is not, the value is concatenated with the existing values. c. Click Check to validate the expression, and then click OK. 6. Create another data store as described in steps 2-5. However, name the event Clear_Cart and map the value as the Assigned Value of the input field (this will assign an empty value to the Items field). 7. On the Layout board, create buttons for activating and clearing the data store items (step 8 in the previous Procedure).On the Layout board, right-click the Sales Orders Grid and choose Create Toolbar from the context menu. The Create Toolbar Buttons dialog box is displayed. a. Add a button named Add to Cart, with a Custom action called Add_to_Cart. b. Add a second button named Clear Cart, with Clear_Cart as the action name. 8. On the Design board, create a free-standing form called Cart. Place it above the Sales Orders Grid. 9. Define a virtual field to display the data store (cart) values and name the field Items (following step 10 in the previous Procedure). 10. Close the dialog boxes.
179
July 2008
Your model should look similar to the following:
11. Rearrange the layout, placing the cart along the top of the iView (you can use the Resize to Fit Window option in the context menu to stretch it along the width of the iView). Place the Sales Orders Grid to the right of the Input Form. 12. Deploy. The runtime results should be similar to the following:
Result
When the user selects an item and clicks Add to Cart, the Material name is displayed in the Items list of the cart. When additional items are selected, they are concatenated in the Items field.
180
July 2008
3.2.19 Use
Display Data on a Calendar
The Calendar view represents date data by mapping it onto a calendar display. The Calendar view is available only with the Web Dynpro runtime. Each record coming from the back-end system has a start and end date, and is mapped onto a series of dates in the calendar called a time period. Each time period can be highlighted on the calendar according to a defined legend. The legend can come from the back-end system, or can be defined locally in Storyboard. The following is an example of the Calendar view displaying time periods:
All required data can be retrieved from the back-end system in one operation. The Calendar view displays subsets of this data. In the previous example, data is displayed for the months of February to April. The user can page to the next subset to display data for March to May. However, in many cases the back-end system contains a large number of records for the defined time range, the retrieval of which may slow down performance. You can therefore model your iView so that only subsets of data are retrieved at a time, and with each click of the paging ( ) button, the system is re-accessed and a new subset is retrieved.
Procedure
In the following example we will define a calendar view. The user will enter a start date in a form and click Submit to display a three-month period containing the time periods during which he was absent from work. With each click of the paging button ( ), the back-end system will be accessed, and the start date of the retrieved data will be incremented by one month. In the example we use a data service called BAPI_ABSENCE_GETLIST.
...
1. On the Design board, create and connect all the components of the iView. Your iView should look similar to the following:
181
July 2008
2. Double-click the calendar control. The Configure Element task panel is displayed, showing the properties of the calendar. In the No. of months field in the Formatting group, enter 3. 3. On the input port of the data service, map a start date that defines the first record to be retrieved from the back-end system. Click the submit connector, and assign @StartFrom to the Start field and @DADD(@StartFrom,3,M) to the End field.
4. Click the calendar control, and in the Configure Element task panel, configure the calendar as follows: a. From the Calendar range drop-down list in the Time period group, choose Bound. b. From the Calendar start drop-down list, choose the field that was mapped to the Absence Getlist input port. In this example, the field comes from the input form. 5. Map the output of the calendar to the input of Absence Getlist: a. Drag out from the out port of calendar to the Input port of Absence Getlist. b. Click the connecting line and in the Event name field, define its name as goto. A list of fields transferred by the link is displayed at the bottom of the Configure Element task panel. c. Map the input fields of the data service to the fields that are output from the form as follows: assign @ID[ACA1SN]@StartFrom to the Start field and @DADD(#ID[ACA1SN]@StartFrom,3,M) to the End field. Your model should look similar to the following:
At runtime, with each click of the paging button ( ) the date entered in the input form will be incremented by one month, and as a result, the entire range displayed will be incremented by one month.
182
July 2008
3.3

Connectivity and Interoperability

The means of connecting Visual Composer Storyboard to the required back-end systems The technology environments to which models composed in Storyboard can be deployed
This section briefly describes:
Connectivity with Back-End Systems

Visual Composer provides tools that let you connect via the portal to back-end applications defined in the portal system landscape. This connection enables you to import into your model the relevant function modules on which you want to base your iViews. The imported function modules are referred to as data services. Normally, you can connect to any installation of a back-end application to import a data service, and then deploy the content to any portal that enables access to an instance of the same back-end application. However, if the customer installation of the back-end application includes customized function modules, you will need to import the data services in the customer environment, in order to retrieve the customized functions. Most connections to back-end systems are accomplished using the SAP and JDBC connectors deployed automatically as part of the connector framework installed with the portal. The SAP connector provides access to R/3 and BW systems, while the JDBC connector provides access to a wide range of databases, including Microsoft SQL, Oracle, DB2 and others. BI connectors, installed separately in the portal, can be used to access a range of different data, including multidimensional cubes, relational tables and queries. Connectivity is based on defining a system in the portal landscape. You may define systems for the following connections: BI XMLA BI ODBO BI JDBC BI SAP Query
In addition, you can configure the BW system, installed automatically with the SAP connector, for accessing predefined queries. The following table describes the systems from which Visual Composer can import data, and the connectors that are required. The Connector (second column) indicates the name of the connector used to install the system in the portal.
183
July 2008
Visual Composer Connectivity Connector Standard SAP SAP_Connector SAP_JDBC BI BI_XMLA BI_ODBO BI_JDBC BI_SAPQ SAP_Connector Back End R/3 (BW) SQL, Oracle, DB2 MS Analysis BW Local cube file SQL, Oracle, DB2 R/3, BW BW Queries Part of portal connector framework Tables (relational) Data Service BAPIs Stored procedures Cubes (multidimensional) Comments Part of connector framework
Deployment to Runtime Environments

You can deploy the models you create in Visual Composer to different technology engines, including Web Dynpro and Adobe Flex (Flash environment). The same model can be deployed to more than one environment, although not all components and controls are fully supported in each. Visual Composer implements a proprietary XML-based Visual Composer Language (VCL) as its source code for creating the models. Only at deployment is the model actually compiled into the executable code required by the select UI technology. The result is the one model can essentially run anywhere.
184
July 2008
3.4
Advanced Programming Techniques
Purpose
This section is written for Visual Composer administrators and more experienced users.
Implementation Considerations
Users performing these techniques should be assigned the portal Administrator role.
Topics in this section include: Defining Model-Profile Properties [Page 185] Working with Stored Procedures [Page 186] Unlocking Models [Page 186] Creating a Web Service System [Page 187] Creating a Multi-Selection Table [Page 188]
3.4.1 Use
Defining Model-Profile Properties
You can define properties that provide information about your model file. These user-defined properties may include attributes such as Created by, Group, Language, Domain and others. In addition, you can add properties as needed.
Procedure
... ...
1. On the Design board, at the top level of your model, click the Configure button in the task-panel toolbar. The Configure Element task panel is displayed, with a table of properties and their values at the bottom. Certain of the properties such as Language, for example may already have default values assigned to them. 2. View the properties and enter values, or change existing ones as needed. 3. To add a value: a. Click the Add (plus) button at the bottom right. The Model Properties dialog box is displayed. b. From the drop-down list in the Name field, choose the property that you want to add to the profile. c. In the Value field, enter the value of the property. d. Click OK. The newly-defined property is displayed in the task-panel table.
185
July 2008
3.4.2 Use
Working with Stored Procedures
Visual Composer can import any third-party JDBC-based stored procedure through the SAP_JDBC connector, which is an integral part of the standard portal connectivity framework.
Procedure
You add a JDBC-based stored procedure to the model as you do any other data service. For more information, see Find Data [Page 61]. When you browse to the location of your stored procedures in the Find Data Services task panel, certain items in the list may be displayed in red. This is an indication that the names of those procedures include characters not supported by the connected back-end system. To correct this, access the source system, copy the procedure and rename it with standard characters. Be aware that because the output of stored procedures is dynamic, the output table fields are not listed automatically in the Configure Element task panel. Therefore, to determine the contents of the output table, you should:
... ...
1. Right-click the data service and choose Test Data Service from the context menu. The Test Data Service dialog box is displayed for the stored procedure. 2. Execute a test and display the field output from the stored procedure. 3. Note the names of the fields (columns) and close the Test Data Service dialog box. 4. On either the Design board or the Layout board, double-click the form or table connected to the output of the stored procedure. In the Configure Element task panel, click the Add (plus) button at the bottom right and manually add the fields that you require.
186
July 2008
3.4.3 Use
Unlocking Models
Models created in Visual Composer can be modified by more than one user, although not simultaneously. Models in client-workspace (MyModels) folders are locked when the user opens it for editing, allowing other users who have access to the model to open it in read-only mode for viewing only. A model currently being modified by one user can be viewed by another user in read-only mode. Only after the first user saves and closes the model can it be modified by another user. Each user can unlock only those models in his/her own workspace, using the Unlock Models function. The Visual Composer administrator manages the network of public and private files on the Visual Composer server, unlocking model files that may become locked (files left open but not updated). For more information about unlocking models on the Visual Composer server, see Unlocking Models on the Server [External] in the Administration of SAP NetWeaver Visual Composer guide.
Prerequisites
All models must be closed in your Storyboard.
Procedure
... ...
1. Choose Model Unlock Models. The Unlock Models dialog box is displayed, listing only those models in your client workspace. 2. Check the model(s) that you want to unlock. 3. Click Unlock. The model can now be opened in Edit mode. If one user is presently editing a model, and another user unlocks that same model, any changes made to the model by the first user are lost, and an error may occur.
187
July 2008
3.4.4 Use
Creating a Web Service System
You can define Web services to be used in the modeling process from within Visual Composer. A Web service that you define in Visual Composer automatically appears in the SAP NetWeaver portal. Web services that you define will be accessible only to users logging on to Visual Composer using your user name and password. Users performing this task should be assigned the portal User Administrator role. To define the path to the Portal Catalog folder where the new systems are created, go to the Tools Options Compiler tab, and in the Portal system folder field, enter the required location.
Procedure
...
1. Choose Tools Define Web Service System. The System Definition (Web Service) dialog box is displayed. 2. In the New system name field, enter a unique name for the Web service system. 3. In the New system alias field, enter the alias that will be used in the portal to identify the Web service system. 4. In the Web service URL field, enter the URL address of the Web service. 5. If the Web service requires user authentication, select the URL requires User and Password checkbox, and then enter the user and password in the appropriate fields. 6. Click Create.
188
July 2008
3.4.5 Use
Creating a Multi-Selection Table
You can define a table to enable selection of either single or multiple rows. When a user selects multiple rows, all of the rows are transferred to the data service. The following procedure explains the settings that you need to define in order to create a model with a multi-selection table.
Prerequisites
The data service used in the model can receive multiple rows.
Procedure
...
1. In your model, double-click the table that serves as the input to the data service. The Configure Element task panel is displayed. 2. From the Selection mode drop-down list, choose Multiple. This will enable users to select multiple rows. 3. Select the line connecting the output port of the table and the data service. 4. From the Mapping scope drop-down list in the Configure Element task panel, choose one of the following: Selected data rows transfers only the table rows that have been selected All data rows transfers all rows of the table
5. On the Layout board, create a button for transferring the values of multiple table rows to the data service: a. Right-click the table and choose Create Toolbar from the context menu. The Create Toolbar Buttons dialog box is displayed. b. Create a button named logically such as Submit Selected Rows and define the action that transfers the table rows to the data service. The action should be the same as the event defined for the connecting line. (For more information about creating buttons, see Create a Toolbar [Page 170]). You may want to create a second button, such as Submit All Rows, as well. Instead of creating a button, you can use the Select row default event, which automatically transfers to the data service each additionally selected row. However, for multi-selection tables it is recommended to create a button. c. Click OK.
Results
At runtime, the user can select rows by holding down the Ctrl key and clicking each additional row, and then submitting them using the appropriate button, as can be seen in the following example:
189
July 2008
190
July 2008
3.5
Application Adaptation and Distribution
This section describes how Visual Composer models are deployed to the portal environment and how the models are manipulated as iViews in the portal. Topics in this section include: Deploying to the Portal [Page 191] Preparing iViews for Portal Translation [Page 192] Preparing Portal Themes for Flex Controls [Page 194] Application Life Cycle Management [Page 195]
3.5.1 Purpose
Deploying to the Portal
You can deploy models created in Visual Composer to the portal to which you are connected. Models are deployed as PAR packages, and are stored in the Visual Composer folder in the Portal Content Directory (PCD).
Prerequisites

...
To deploy to a development or test portal, you have been assigned a VC role. To deploy to a production portal, you have been assigned an Administrator role. You have defined the target location in the PCD for storing the Visual Composer files. To do this: a. In Storyboard, choose Tools Options. b. In the Options dialog box, click the Compiler tab and in the Portal deployment folder field, enter the name of the PCD location for Visual Composer files, such as: pcd:portal_content/com.sap.gm.cnt/vcmodels
Process Flow
The process of deploying to the portal is very direct, with no manual coding or compiling required. Follow the procedure outlined in Deploy the Model [Page 75]. The model is automatically compiled and packaged into a standard PAR file in the portal, where it is stored in the PCD.
Result
You can access the deployed files in the portal by choosing Content Administration Portal Content and in the PCD hierarchy, locating the Visual Composer folder.
191
July 2008
3.5.2 Use
Preparing iViews for Portal Translation
You can translate the text strings of a deployed Visual Composer model using the standard portal translation worklist mechanism. When models are deployed, they are bundled as Portal Archive (PAR) packages and stored in the portal in the Visual Composer folder of the Portal Content Directory (PCD). By setting the proper translation options in Visual Composer (see Prerequisites following), two translation files are created when you deploy (and automatically compile) the model: localization.properties: a Visual Composer translation file that contains all the string identifiers (see Text Type Classifications [Page 147]) and raw text strings from the model package_lang.info: a portal-like translation worklist file, including the portal UIstring classification codes
Once you deploy your file to the portal, you can translate it using the Translation Worklist Editor, accessed by choosing Content Administration Portal Content Translation Translation Worklist Coordination. For more information about portal translation procedures, see Portal Content Translation [External] in the Portal Administration Guide. All standard plain texts (static values) in the model such as field labels, button labels and tooltips are entered automatically into the translation lists. However, dynamic text such as field values cannot be entered. Dynamic expressions and formulas containing strings can be entered in the translation lists as long as they include a special TRANSLATE function code. Avoid using the TRANSLATE function for static values, since interpretation of the unnecessary TRANSLATE function may affect runtime performance. However, if you use a dynamic expression in a property, the value is not automatically tagged for translation. In this case, you should use the TRANSLATE function if you want the string to be translated. For example: Hello: Tagged automatically for translation The price is & @Price: Not tagged for translation TRANSLATE(The price is)& @Price: Tagged for translation
For more information about the TRANSLATE function, see Text Functions [Page 142].
Prerequisites
You have tagged the model for translation by choosing Options Compiler and selecting the following checkboxes: Deploy model with PAR Generate Translation Info file
192
July 2008
Procedure
To prepare text within a formula (dynamic expression) for translation:
... ...
1. To the right of the field (in the Configure Element task panel or in the Control Properties dialog box) that will contain the formula, click fx, Formula or choose Enter formula from the drop-down menu. The appropriate Expression Manager dialog box is displayed. 2. Select the formula and enter the required fields, as needed. 3. Before entering the text string, expand the Text Functions node and double-click TRANSLATE (at the bottom of the list). 4. In the parentheses after TRANSLATE, enter the text and the type of UI-string classification code. The following is an example of defining a formula that includes a dynamic field (BANK_CTRY) and static text for translation.
For more information about the TRANSLATE function and the possible values for the UIstring classification code, see Text Functions [Page 142] and Text Type Classifications [Page 147].
Result
Upon deployment, the translation files are created, containing all standard static strings and those strings created in formulas that contain the TRANSLATE code. The result of the previous example would be listed in the package_lang.info file as follows:
193
July 2008
For detailed information about translating primary and nested iViews modeled in Visual Composer, see How to Translate a Visual Composer Model - Part 1 (accessed through the Visual Composer page of SDN).
194
July 2008
3.5.3 Use
Preparing Portal Themes for Flex Controls
For Visual Composer applications that are deployed to Adobe Flex runtime, you can define the look-and-feel of Flex controls within a selected portal theme. All default themes supplied with the portal include a list of default values for controls used in Visual Composer models. However, the set of default values is defined for the SAP Tradeshow theme only and is used as is in all portal themes. This function is therefore most useful for defining values for the controls within a customer's own (non-portal default) theme.
Prerequisites
You have System Administrator rights to the portal to which the models are deployed.
Procedure
In the portal:
... ...
1. Choose System Administration Portal Display Theme Editor. 2. In the Theme Editor, choose the theme or template that you want to customize for Flex runtime. 3. Scroll down to the Visual Composer header and click Flex Runtime Controls beneath it. The list of Flex controls used in Visual Composer is displayed. 4. Edit each parameter that is relevant to the application(s) that you are modeling. For more information, see the following topics in the portal Administration Guide: Working with Portal Themes [External] Changing Style Parameters and Saving Them as a New Theme [External]
In Visual Composer: In the Compiler tab of the Tools Options dialog box, check the option Enable styling of Flex controls in portal themes. Applications modeled with this option checked and deployed to Flex will apply the portal theme modified for Visual Composer.
Result
At runtime, the iViews deployed to Flash runtime apply the customized portal theme to the models, rather than using the colors defined by Visual Composer for the different Flex controls.
195
July 2008
3.5.4
Application Life Cycle Management
In this version of Visual Composer, there is no NetWeaver Development Infrastructure (NWDI) integration, and therefore standard versioning and other life-cycle management mechanisms are not yet available. However, the following functionality can assist you in backing up, adapting and redeploying your models and the generated content: Model export and import (see Importing a Model [Page 20] and Exporting a Model [Page 20]). Save as (see Saving a Model [Page 18]). Redeploy translation (see Redeploying Translations [External] in the Administration of SAP NetWeaver Visual Composer Guide). To use this option, you must first open the model in the Portal Content Catalog using the Open in Storyboard option. Generated content transport: To transfer generated content and models from a development portal to a production portal, or from one production portal to another, use the standard portal transport methods. To create the transport package, follow the standard portal procedures outlined in Packaging Portal Transport Archives [External] in the Portal Administration Guide.
196
July 2008
Ensuring Quality
When you deploy your model, you can run it in the portal directly from the Deploy task panel. Once you test its performance, you can return to the Storyboard and make any required changes.
4.1
Logging and Tracing
Purpose
You can use the Console at the bottom of the Storyboard desktop to display error and trace logs.
Process Flow
Select the level of the logs as follows:
...
1. Choose Tools Options. The Options dialog box is displayed. 2. Click the Administration tab. 3. From the Log severity drop-down list, choose the level you require: Fatal indicates the occurrence of an error from which the application cannot recover and this severe situation has caused fatal termination. This level displays only fatal errors. Error indicates that the application can recover from an error that has occurred, but it cannot fulfill the required task due to the error. This level displays errors, warnings and fatal messages. Warning indicates that an anomaly has occurred. The application can recover and fulfill the required task but it requires attention from a developer or operator. This level displays warnings and fatal error messages. Info is text describing that actions that have been performed. This level includes all levels of log messages. None indicates that no logs will be written.
4. From the Trace severity drop-down list, choose from the following levels: Path is used to trace the execution flow and is the commonly-selected trace option. Debug is used debugging purposes, with extensive and low-level information. None indicates that no trace messages will be written.
Result
According to the selections made in the Administration tab of the Options dialog box, you can view the log and trace messages in the Console by dragging the pane separator at the bottom of the workspace up to open the Console.
197
July 2008
Reference
A link to the Visual Composer Reference Guide [External], where you can find detailed descriptions of all components of Visual Composer Storyboard. Step-by-step Advanced Tutorials [External] that will help you exercise and improve your knowledge of Visual Composer. A Checklist [Page 220]to ensure that you are ready to begin working with Visual Composer.
This section contains the following:
5.1
Advanced Tutorials
After you have learned how to build a base model and enhance it by using a range of different functionalities of Visual Composer, you can proceed to learn more advanced features. This section includes a group of tutorials, in which you learn new features while exercising and improving your knowledge of Visual Composer. Tutorials included in this section are: Integrating Value Help into Your Model Creating an Analytics Application Integrating Web Services in your Model
198
July 2008
5.1.1
Integrating Value Help into Your Model
In this example, you build an iView in which the user can input a sales organization in order to display a table of all incoming orders that belong to that organization. You enhance this input form with a button that provides value help by displaying an additional dialog box that lists all valid values for the sales organization field. This helps the user select the right value to submit.
Prerequisites
You have access to an SAP BI system (NetWeaver 2004 SP Stack 14 or greater), and it is configured to connect via the SAP BI Connector in the portal landscape. See Defining Portal Systems and Aliases in the SAP NetWeaver Visual Composer Installation & Configuration Guide. The necessary demo content is activated in the system. This example is based on the InfoCube SAP Demo: Sales and Distribution: Ovewrview, query order and sales values (technical name: 0D_SD_C03_Q009). You have been mapped to a user of this BI system.
Process
You build the iView in three stages: Build the query, table, and input form: Configuring the Main Model Elements Create the button for the input form and configure the value help it will evoke: Adding and Configuring Value Help Fine-tune the layout of the input form and the value help dialog box itself, and deploy the model: Fine-Tuning and Deployment
Result
In this example, you learn to perform a number of basic tasks of Visual Composer, including: Integrate a query based on an SAP BI data service into your model Add an input form to the query, and output the results into a table Add a button to the input form that provides value help Configure the type of value help and the values that will appear Configure the layout of the value help dialog box Deploy to Adobe Flash format
See also: Value Help Configuration Wizard in the SAP NetWeaver Visual Composer Reference Guide.
199
July 2008
5.1.1.1
Configuring the Main Model Elements
In this example, you integrate a query based on an SAP BI data service into your model, output the results into a table, and attach an input form to the query.
Prerequisites
As outlined in Integrating Value Help into Your Model
Procedure
1. Create the model and name it appropriately, such as ValueHelp. 2. Create an iView (dragging the iView icon from the Compose Model task panel) and call it Order and Sales Values: Select Sales Organization. Drill down into the iView. 3. Integrate the query into your model: a. On the Find Data Services task panel, from the System drop-down list, select the data service that contains the BI system in which the demo InfoCube is activated. b. From the Look for drop-down list, select Look for a query. c. In the Query field, enter the technical name of the query: 0D_SD_C03_Q009, and click Search. d. Select the query Order and sales values (0D_SD_C03_Q009) and drag it onto the workspace. The metadata from the query is retrieved and integrated into your model:
4. Create an input form for the query so that the user can specify a distribution channel:
...
a. Drag from query's Input port and choose Add Input Form from the context menu. b. You want to only display the sales organization and a submit button in the form, so double-click the input form to display the Configure Element task panel. In the first column of the table at the bottom, click the checkmarks to deselect all fields except Sales_organization and SUBMIT:
200
July 2008
5. Output the query results into a table:

...
a. In the workspace, drag from query's Output port and choose Add Table View from the context menu. The Select Display Fields dialog box is displayed. b. To configure the table to display the incoming orders value and sold-to party fields, select Incoming_orders_value and Sold_to_party. 6. Save the model.
Result
You have created an iView that outputs the results of a BI query into a table, and you have attached an input form in which the user can specify the sales organization. The model should look similar to the following:
You are now ready to proceed to Adding and Configuring Value Help.
201
July 2008
5.1.1.2
Adding and Configuring Value Help
In this example, you create a value help button on the input form and configure the values that will appear in the dialog box it displays.
Prerequisites
You have created the model in Configuring the Main Model Elements and it is open in Storyboard.
Procedure
1. On the Layout board, start the value help wizard to begin creating value help for the sales organization field: Right-click the Sales Organization field in the input form, and choose Add Value Help from the context menu. The Value Help Configuration Wizard is displayed. 2. Select the type of value help to add:
...
a. In the Add Value Help for Selected Input Field screen, from the Type drop-down list, select Single selection. This setting means that the user will only be able to select one value to submit at a time. Notice that information about the selected field, Sales_organization, appears in the Selected Field Properties section. b. Uncheck the Hide advanced configuration options (BI systems only) checkbox, so that you will be able to see the advanced Specify Data Service Runtime Parameters screen (step 4, below). c. Click Next. 3. Select the data service that will provide the values for the value help list: In the Select Data Service screen, identify the Sales Organization characteristic as the data service that will provide the actual values for the value help list. This is the typical case, in which the characteristic itself provides its list of values, but you could use values from any data service.
...
a. From the System drop-down list, select the data service that contains the BI system in which the demo InfoCube is activated. b. From the Look for drop-down list, select Look for a query. c. In the Name field, enter the technical name of the query, 0D_SD_C03_Q009, and click Search. All queries matching the name are displayed in the pane below. d. Expand the query Order and sales values (0D_SD_C03_Q009), expand the Structure folder, and expand the Characteristics folder. e. Select the characteristic Sales Organization (0D_SALE_ORG). In the Properties section, notice the Get data from drop-down list. By default, values for the selected characteristic are retrieved from the dimension table. Instead, we want all values present in the master data table to be displayed in the value help list, so change this to Master Data Table. This screen of the value help wizard should look like this:
202
July 2008
f. Click Next. 4. Configure value help parameters on the Specify Data Service Runtime Parameters screen:
...
a. In the Input section, leave the values as they appear by default, as indicated in the following table: Setting Port Input Fields: Assigned Value Search field ID Search field name Value INPUT (the default) (blank) (no selection) (blank)
b. These settings indicate that behind the scenes, the sales organization value is delivered to the Input port, the list of valid sales organizations has no preassigned values since you want the user to see all valid values, and the user will not be offered search functionality to search for values. c. In the Output section, leave the values as they appear by default, but place a checkmark in the first column of the Output Fields table in the TEXT (in addition to the KEY) row, as indicated in the following table: Setting Port Output Fields Key field Search field name Value OUTPUT (the default) Both KEY and TEXT are checked Key (the default) (blank)
203
July 2008
d. These settings indicate that behind the scenes, the list of values are delivered to the Output port (actually returned to the input field), long names (TEXT) as well as key values (KEY) will be listed in the value help list, and the Key field is delivered to the input field for the query. 5. Click Finish. An additional button now appears on your input form:
6. Save your model.
Result
In addition to generating the Value Help button, the wizard has created an embedded iView that represents the value help dialog box and its functionality. At runtime, when the user presses the value help button, the dialog box appears and lists valid values for the sales organization field. On the Design board your model should now look similar to the following:
You're now ready to proceed to Fine-Tuning and Deployment.
204
July 2008
5.1.1.3
Fine-Tuning and Deployment
In this example, you fine-tune the layout of the input form and the value help dialog box itself, and deploy the model.
Prerequisites
You have configured the main model elements, added and configured value help, and the model is open in Storyboard.
Procedure
1. On the Layout board, adjust the size of the input form: Click the right edge of the form and drag to the right, so that it is as wide as the table below it. Recommendation You can select the form and click the at the bottom. (Fit to Window) button in the Layout toolbox
2. Adjust the layout of the Sales Organization field:

...
a. Right-click the Sales Organization field and from the context menu, choose Properties, to display the Control Properties dialog box. b. Click the Display tab and from the Label position drop-down list, choose Long label. The label is adjusted accordingly. c. Click Close. d. Move the field to the right, towards the center of the form, so that the label is fully visible. 3. Edit the text and size of the value help button:
...
a. Right-click the Value Help button and from the context menu, choose Edit Label. b. Enter Value Help for Sales Organization... to indicate that this button displays a dialog box in which you can select a value for the sales organization. c. Click the edge of the button and drag to the right to resize it to accommodate the longer text. d. Move the button as appropriate so that it doesn't overlap the Sales Organization field. 4. Fine-tune the layout of the value help dialog box itself: a. Go to the Design board, right-click Value Help for Sales_organization, and from the context menu, choose Drill Down. Here, you see the layout of the embedded iView that represents the value help, which you created in the previous example using the value help wizard:
205
July 2008
( The Characteristic: 0D_SALE_ORG data service, together with its start point and search results, supplies the list of values. The Select form represents the dialog box in which the list of values appears. b. Go to the Layout board to see and adjust the layout of the dialog box. Resize it, and enter new labels for the table and buttons as desired, for example:
Recommendation To change the window title of this dialog box, change the window title of the popup signal that represents the embedded iView: 1. Go back to the Design tab for the main model. 2. Select (single-click) Value Help for Sales_organization to display the Configure Element task panel for the popup signal. 3. Enter new text in the Window title field as desired, for example: Select Sales Organization. 5. Go to the top level of your model and deploy (if necessary, first set your compiler to Adobe Flash format, on the Visual Composer Tools Options Compiler tab):
...
a. Click the Deploy button in the task-panel toolbar. b. Click Deploy.
206
July 2008
Result
The model is compiled and deployed to the portal to which you are connected. View the runtime version of your model by clicking Run "Order_and_sales_values_select_", under the Deployed successfully message in the Deploy to Portal task panel. The iView looks something like this:
When you click the Value Help for Sales Organization button, value help is displayed in a dialog box. This consists of a list of possible text values for Sales Organization next to the actual key equivalents for the value. The dialog box looks something like this:
When you select a value and click Select, the Sales Organization field is filled with the proper key for the field as required by the query. When you then click Submit, the values in the Output Table update with the results of the query:
207
July 2008
208
July 2008
5.1.2
Creating an Analytics Application
In this example, you create a basic analytical application, or dashboard, that displays the key performance indicators in the major retail channels of a consumer-products manufacturer, together with details about revenue. It can be used to monitor and track the budgets for promotional activities. The Trade Marketing Manager can evaluate the effectiveness of promotions based on a plan versus actual comparison regarding volume and revenue.
Prerequisites
You have access to an SAP BI system (NetWeaver 2004 SP Stack 14 and greater), and it is configured to connect via the SAP BI Connector in the portal landscape. See Defining Portal Systems and Aliases in the SAP NetWeaver Visual Composer Installation & Configuration Guide. You have been mapped to a user of this BI system. You have the following systems installed as data sources: o o o o BW 3.5 (BI Content 3.5.3), with demo content activated CRM release 4.0 R/3 release 4.70 SAP AFS application 5.0
Process
You build the iView in three stages: Add your data sources. Define output charts and tables, and connect them with the data sources. Fine-tune the iView layout and deploy the model.
Result
You create an analytical application through which the user can select a trade-promotion channel, view the brands in that channel and as a result, view charts that indicate which promotion tactics have the highest return on investment according to budget availability. This gives the user quick insight into where the money is, and where it is recommended to use the available trade dollars to drive volume.
209
July 2008
5.1.2.1
Creating a Trade Marketing Analytics iView
The SAP Analytics expert can use this dashboard to view the key performance indicators in the major retail channels of a consumer-products manufacturer, and thereby determine the cost-effectiveness of different promotional tactics and channels.
Prerequisites
As outlined in Creating an Analytics Application.
Procedure
1. Create a new model and create an iView, naming it Trade Marketing Application. 2. Add the data services:
...
a. Drill down into the iView (double-clicking it or choosing Drill Down from the context menu) and click the Find Data button in the task-panel toolbar. The Find Data Services task panel is displayed. b. From the System drop-down list, choose the SAP_BW system alias, or the appropriate alias of the BW system that includes the demo content. c. From the Look for drop-down list, choose Look for a query and in the Query field, enter the following: 0CP_SLSCA_Q0015. Then click Search. The Trade Promotions Channel Overview (0CP_SLSCA_Q0015) query is displayed. d. Drag the query to the top left of your workspace. e. To add the other data services, from the Look for drop-down list in the task panel, choose Look for a view and in the Query field, backspace (delete) in order to enter 0CP_SLSCA_ only and click Search. All views matching that mask are displayed. You may want to drag the splitter between the workspace and the task panel to the left, in order to expand the width of the task panel. f. Drag the following data services onto the workspace: Tactic Analysis (0CP_SLSCA_Q0015_V01) to the right of the first data service Period Overview (0CP_SLSCA_Q0015_V02) to the left, under the first data service Budget for Channel and Customer (0CP_SLSCA_Q0005_V01) towards the bottom center of the workspace.
g. Reduce the width of the task panel and save your model. 3. Build your model logic:
...
a. From the Input of the first data service, Trade Promotions Channel Overview, drag out and create a Start Point. The Select Input Fields dialog box is displayed. Click OK without selecting any fields. b. Drag out from the Output port of the data service and choose Add Table View. The Select Display Fields dialog box is displayed.
210
July 2008
i.
Select the following fields: Actual_Promotion_Volume_YTD_value BP_Group_Level_5 Budget_Spent_versus_Plan_value Budget_Spent_YTD_value Promotion_Volume_Versus_Plan_value
ii. iii.
Click OK. Rename the table: Trade Promo YTD by Channel.
c. You want the information displayed in this table to be the input to the other data services, so that the user can select a channel in the table and see how the results change accordingly. Therefore: i. ii. Drag out from the out port of the table three times, once to each Input port of the other three data services. Double-click each line to display the Configure Element task panel, and map the field BP_Group_Level (in the Input Field column) to BP_Group_Level_5_key.
In some cases, BP_Group_Level_5 is assigned for mapping automatically. Be sure to change this to BP_Group_Level_5_key (again, you may want to widen the task panel).. Your model should look similar to the following:
211
July 2008
d. Create a chart to receive the output from Tactic Analysis (at the top right): i. ii. iii. Drag out from the Output port of the data service and choose Add Chart View. Rename the chart: Tactic Analysis Volume YTD. Double-click the chart to display the Configure Element task panel and configure the chart as follows, leaving the default in the fields not mentioned: iv. Chart type: Pie Category Axis - Field: Tactic (Axis label is changed accordingly) Chart Formatting - Legend Placement: Right
Define the data series by clicking the Add (plus) button at the bottom. From the drop-down list in the Formula column, choose: @Actual_Promotion_Volume_YTD_value. In the Data Series column to the left, enter a meaningful name for the series. Drag out from the Output port of the data service and choose Add Chart View. Rename the chart: Promo Volume YTD Plan vs. Actual Configure the chart as follows: Chart type: Line Category Axis - Field: Posting_period: Category Axis - Axis label: Month Data Animation - Effect: Slide in/out
v.
e. Create a chart to receive the output from Period Overview (at the left): i. ii. iii.
iv.
Define the following data series: @Actual_Promotion_Volume_YTD_value and overwrite Series 1 with: Actual Volume @Planned_Promotion_Volume_YTD_value and overwrite Series 2: Planned Volume
v.
Save your model.
f. We need to add the same data service, Period Overview, a second time in order to show different information, but using the same results coming from the first table: i. ii. iii. Display the Find Data Services task panel and select the same System that you selected previously. From the Look for drop-down list, choose Look for a view. In the Query field, enter 0CP_SLSCA_Q0015_V02 and click Search.
212
July 2008
iv.
Drag the Period Overview data service to the center of the workspace, to the right of the Promo Volume YTD Plan vs. Actual chart and under the Tactic Analysis data service. Connect the out port of the Trade Promo YTD by Channel table to the Input port of this data service. Double-click the select line and map the BP_Group_Level_5 field to @BP_Group_Level_5_key.
v. vi.
g. Create a chart to receive the output from Period Overview, which you just added: i. ii. iii. Drag out from the Output port of the data service and choose Add Chart View. Rename the chart: Promo Budget YTD Plan vs. Actual Configure the chart as follows: iv. Chart type: Line Category Axis - Field: Posting_period: Category Axis - Axis label: Month Data Animation - Effect: Slide in/out
Define the following data series: @Budget__Spent_YTD_value and overwrite Series 1 with: Actual Budget @Planned_Budget_YTD_value and overwrite Series 2 with: Planned Budget
h. Drag out from the Output port of Budget for Channel and Customer (at the bottom center) and choose Add Table View. The Select Display Fields dialog box is displayed. Drag the right-bottom corner of the dialog box in order to expand it. i. Select the following fields: ii. iii. BP_Group_Level_6 Promotion_Budget_Approved_value Promotion_Budget_Budgeted_value Promotion_Budget_No_Longer_Available_value Promotion_Budget_Released_value Promotion_Budget_Spent_value Promotion_Budget_Still_Available_value
Click OK. Rename the table: Budget Availability YTD.
213
July 2008
i. Save the model. It should look something like this:
4. Lay out the model:

...
a. Click the Layout tab to move to the Layout board. b. Select the Trade Promo YTD by Channel table. Widen it just a bit and reduce its height. Leave the full header names only partly visible. c. Move the Tactic Analysis Volume YTD chart to the top right and adjust its size to match the height of the table. d. Scroll down and move up the Promo Volume YTD Plan vs. Actual chart, adjusting its size to approximately match that of the table above it. e. Scroll down again and move the Promo Budget YTD Plan vs. Actual chart up to the right of the Promo Volume YTD Plan vs. Actual chart. Align its size with the chart to the left, and its right side to the chart above it. f. Move the Budget Availability YTD table up and widen it to match the full length of the two charts above it. g. Save the model. Its layout should look something like this:
5. Deploy the model by clicking the
(Deploy Model) button in the toolbar.
214
July 2008
Result
You can view the runtime version of your model by double-clicking Run "Trade_marketing_application" in the Deploy to Portal task panel. The iView should look something like this:
215
July 2008
5.1.3
Integrating Web Services in your Model
In this tutorial, you use the Salesorders A model and add a web service to it. The iView that you create will enable the user to view: The exchange rate of a selected currency The net price of a sales order in a currency of his/her choice
For example, the user may select a sales order whose net price is 500 Euro, and view the equivalent price in US dollars.
Prerequisites
Your system administrator has defined the Conversion Rate web service system in the portal.
If you have been assigned an Administrator role, you can define the web service system from within Visual Composer. For information about defining web service systems, see Creating a Web Service System.
H H
Creating a web service system requires that you enter the URL of the web service. Use the following URL: www.webservicex.net/CurrencyConvertor.asmx?WSDL Name the system CurrencyConverter and give it the alias Converter..
Procedure
1. Open or create your model and import the Salesorders A model. 2. Double-click the Input Form to display the Configure Element task panel. In the first column of the table at the bottom, deselect all fields except CUSTOMER_NUMBER, SALES_ORGANIZATION and SUBMIT. You may then wish to adjust the layout to match the new size of the form. 3. Define the output from Sales Orders Grid:
...
a. Drag from the Sales Orders Grid out port, and choose Add Form View from the context menu. The Select Display Fields dialog box is displayed. b. Select the CURR_ISO field, and click OK. c. At runtime, the currency of the row selected in the Sales Orders Grid will be the input of the CURR_ISO field. d. Rename the form Currency Selector. 4. Add a Convert To drop-down list to the Currency Selector form, to enable the user to convert the returned value to a selected currency:
...
a. On the Layout board, select the Currency Selector form. The Configure Element task panel is displayed at the right, showing the properties of the form and listing the fields displayed in the form.
216
July 2008
b. Under the table at the bottom of the task panel, click the New UI Control dialog box is displayed.
(Add) button. The
c. From the Select control type list, choose Drop-down List. In the Field name field, type Convert_To and click OK. The Convert_To field is added to the form. d. Right-click the Convert To field, and choose Properties from the context menu. The Control Properties dialog box is displayed. e. Click the Entry List tab to define a static list of entries with fixed values. f. Click the (Add) button at the right to create the first entry. In the Value column, write USD and in the Display Text column, write United States Dollars. g. Create two more entries (using the Value EUR GBP h. Click Close. 5. Add a button to the form to execute the conversion operation:
...
(Add) button) as follows:
Display Text Euros United Kingdom Pounds
a. Select the Currency Selector form, and on the Configure Element task panel, click the (Add) button. The New UI Control dialog box is displayed.
b. From the Select control type list, choose Pushbutton. In the Field name field, type Convert and click OK. c. Right-click the Convert button, and choose Properties from the context menu. The Control Properties dialog box is displayed. d. Click the Action tab, click the action type. e. Click Close. 6. Import the web service into the model:
...
(Add) button and select Submit Form as the
a. On the Design board, click the Find Data button in the task-panel toolbar and from the System drop-down list, choose the alias of the web service system, Converter. b. Be sure that the Operation field is blank and click Search. The ConversionRate web service is displayed. c. Drag the web service onto the Design board, and place it to the right of the Currency Selector form. d. Connect the Currency Selector form to the web service by dragging out from the out port of the form to the Input port of the web service.
217
July 2008
7. Map the fields of the Currency Selector form to the web service:
...
a. Double-click the Submit line. The Configure Element task panel is displayed. b. In the table of the task panel, click in the Assigned Value column next to each field, click the fx button, and make the following selections: Input Field FromCurrency ToCurrency 8. Save the file. 9. Create a form for the conversion rate result:
...
Assigned Value @CURR_ISO @Convert_To
a. Drag from the Output port of the web service and choose Add Form View from the context menu. Rename the form Conversion Results. b. At this stage, the Conversion Results form will display the conversion rate of the selected currency. Add another field to display the price of the sales order in the selected currency. c. At the bottom of the Configure Element task panel, click the (Add) button and add an Input Field. Choose Number as the Data type, and type Converted_Net_Price for the Field name. d. Double-click the Converted_Net_Price field in the table. The Control Properties dialog box is displayed. e. To the right of the Default value field at the bottom of the General tab, click Formula. The Default Value (Expression Editor) dialog box is displayed, to enable you to create your formula for the computed field. i. ii. iii. iv. v. vi. vii. viii. Expand the Data Fields node, and double-click ConversionRateResult. Expand the Operators node, and double-click * (Multiplication). Expand the Sales Orders node (within the Data Fields node), and doubleclick NET_PRICE. Your formula should be as follows: @ConversionRateResult*#ID<field ID>@NET_PRICE This formula takes the net price of the sales order, and multiplies it by the conversion rate. Click Check to validate the expression, and then click OK. Click Close.
10. Save the model. It should look similar to the following:
218
July 2008
11. Go onto the Layout board, and fine tune the layout of the model:
...
a. Place the Conversion Results form to the right of the Currency Selector form. b. Change the layout settings of the Conversion Results form so that the labels are displayed in full: Right-click the form and choose Configure Element from the context menu. From the Align contents drop-down list, choose Vertical. Apply this setting also to the Input form at the top. c. Right-click the fields of the Conversion Results form and choose Edit Label from the context menu. Change the label Conversionrateresult to Conversion Rate Result. In the Currency Selector form, change Curr Iso to Currency. The model should look similar to the following:
12. Save the model and deploy it by clicking the toolbar.
(Deploy Model) button in the
219
July 2008
Result
Your iView should look something like this:
Check the operation of the iView: 1. Enter 0000001002 in the Customer No.field and 1000 in the Sales Organization field, and click Submit. Results are displayed in the Sales Orders Grid. 2. Select a sales order row in the table. Notice that the currency of the order is automatically displayed in the Currency field of the Currency Selector form. 3. From the Convert To drop-down list in the Currency Selector form, choose a new currency for calculating the net price of the sales order, and click Convert. In the Conversion Results form, the conversion rate of the selected currency is displayed, along with the price of the sales order calculated based on the required currency.
220
July 2008
5.2

Checklist
Have you defined the systems that you need in the portal, along with an alias? Have you been mapped as a user to the backend system? If you intend to use web services, have you written down the name and URL? Have you checked if a user ID and password are required? Has your administrator assigned you a VC Role? Have you received the appropriate VC Role permissions?
Before you begin working with Visual Composer, review and confirm the following list items to ensure high quality and smooth functioning of the application:
221

63f2052e-0c01-0010-b9a2-e1f7457a7fbe

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

63f2052e-0c01-0010-b9a2-e1f7457a7fbe

Caricato da

Copyright:

Formati disponibili

Model er's Guide

SAP NetWeaver Visual Composer

Documentation on SAP Service Marketplace You can find this documentation at

GO AND CREATE ........................................................................................................... 26 2.1

CORE DEVELOPMENT TASKS ..................................................................................... 59 3.1

ENSURING QUALITY.................................................................................................... 197 4.1

REFERENCE ................................................................................................................. 198 5.1

Modeling Applications with SAP NetWeaver Visual Composer

Modeling Applications with SAP NetWeaver Visual Composer

Modeling Applications with SAP NetWeaver Visual Composer

Concepts of Visual Composer

Modeling Applications with SAP NetWeaver Visual Composer

Design Time and Runtime

Creating and Adapting Applications

Modeling Applications with SAP NetWeaver Visual Composer

Modeling Applications with SAP NetWeaver Visual Composer

Visual Composer Architecture

Browser Design Time

Visual Composer Visual Composer Server Server Development Server Save

Flex Flex Connectivity Layer Connectivity Layer

Development Server Repository

Portal Content Directory (PCD)

Modeling Applications with SAP NetWeaver Visual Composer

Data service Data store Dimension

Modeling Applications with SAP NetWeaver Visual Composer

Modeling Applications with SAP NetWeaver Visual Composer

Model Multidimensional data Navigation line

Operation Operator Package Port Query

Modeling Applications with SAP NetWeaver Visual Composer

Term Relational database

Modeling Applications with SAP NetWeaver Visual Composer

Working with Visual Composer

Modeling Applications with SAP NetWeaver Visual Composer

To get started, choose Model New Model.

Modeling Applications with SAP NetWeaver Visual Composer

The Storyboard Desktop

Modeling Applications with SAP NetWeaver Visual Composer

Main Menu and Toolbar

Workspace Boards and Toolboxes

Modeling Applications with SAP NetWeaver Visual Composer

Navigation Icons and Navigation Path

Modeling Applications with SAP NetWeaver Visual Composer

Modeling Applications with SAP NetWeaver Visual Composer

Creating a New Model

Modeling Applications with SAP NetWeaver Visual Composer

Modeling Applications with SAP NetWeaver Visual Composer

Managing Multiple Versions of a Model

Modeling Applications with SAP NetWeaver Visual Composer

Modeling Applications with SAP NetWeaver Visual Composer

Modeling Applications with SAP NetWeaver Visual Composer

Copying and Pasting Between Models

Modeling Applications with SAP NetWeaver Visual Composer

Using the Model Browser

Modeling Applications with SAP NetWeaver Visual Composer

Defining the Storyboard Environment

Avoid overlapping shapes

Modeling Applications with SAP NetWeaver Visual Composer

Option Select all shapes partially within selection box

Portal deployment folder

Modeling Applications with SAP NetWeaver Visual Composer

SalesordersA Example 2.1 Salesorder iView

Find data service Define input Define output table Deploy

Fine tune layout Use Simulator Export model

In the left pane, edit the formula as follows: IF(@REQ_QTY@NET_PRICE>100000,@REQ_QTY@NET_PRICE,'Small')