Visual Composer

Modeler’s Guide

SAP NetWeaver Visual Composer

Document Version 1.00 – January 2008

SAP NetWeaver 7.0 SP Stack 14

© Copyright 2007 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 SAP’s 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

T yp o g r a p h i c C o n v e n t i o n s I c o n s

Type Style Represents

Example Text 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.

EXAMPLE TEXT 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.

Example text 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.

Example text Exact user entry. These are words or characters that you enter in the system exactly as they appear in the documentation.

<Example text> Variable user entry. Angle brackets indicate that you replace these words and characters with appropriate entries to make entries in the system.

EXAMPLE TEXT Keys on the keyboard, for example, F2 or ENTER.

Icon Meaning

Caution

Example

Note / Tip

Recommendation

Syntax

Contents

MODELING APPLICATIONS WITH SAP NETWEAVER VISUAL COMPOSER .................... 1 1 GETTING INVOLVED........................................................................................................ 2

1.1 Target Audience........................................................................................................ 3 1.2 Concepts of Visual Composer................................................................................... 3

1.2.1 Application Modeling ...................................................................................... 4 1.2.2 Visual Composer Architecture........................................................................ 7 1.2.3 Glossary ......................................................................................................... 8

1.3 Working with Visual Composer ............................................................................... 12 1.3.1 Prerequisites................................................................................................. 12 1.3.2 Logging On ................................................................................................... 13 1.3.3 The Storyboard Desktop .............................................................................. 14 1.3.4 Managing Models ......................................................................................... 18 1.3.5 Defining the Storyboard Environment .......................................................... 25

2 GO AND CREATE ........................................................................................................... 27 2.1 Creating a Salesorder iView.................................................................................... 28

2.1.1 Creating the Base Model.............................................................................. 29 2.1.2 Adding a Second Data Service .................................................................... 32 2.1.3 Fine-Tuning .................................................................................................. 36

2.2 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......................................................................................... 47

2.3 Creating a BI iView.................................................................................................. 51 2.3.1 Creating the Query ....................................................................................... 52 2.3.2 Creating and Configuring the Chart.............................................................. 55 2.3.3 Fine-Tuning and Deployment ....................................................................... 57

3 CORE DEVELOPMENT TASKS ..................................................................................... 59 3.1 Developing Business Logic ..................................................................................... 59

3.1.1 Suggested Process Flow.............................................................................. 60 3.1.2 First Steps .................................................................................................... 62 3.1.3 Find Data ...................................................................................................... 63 3.1.4 Compose the Model ..................................................................................... 65 3.1.5 Configure Elements...................................................................................... 75 3.1.6 Lay out the Model ......................................................................................... 76 3.1.7 Deploy the Model.......................................................................................... 79

3.2 How to . . . ............................................................................................................... 80 3.2.1 Create Layered iViews ................................................................................. 81 3.2.2 Create Interrelated iViews ............................................................................ 89 3.2.3 Define Eventing between iViews.................................................................. 97 3.2.4 Use the BI Integration Wizard .................................................................... 100 3.2.5 Work with SAP BI Systems ........................................................................ 107

3.2.6 Filter a BI Query ......................................................................................... 132 3.2.7 Add an Alert Data Service .......................................................................... 134 3.2.8 Create a Toggled View............................................................................... 137 3.2.9 Create an Entry List.................................................................................... 142 3.2.10 Define a Dynamic Expression .................................................................... 147 3.2.11 Create Value Help ...................................................................................... 178 3.2.12 Create a Chart ............................................................................................ 184 3.2.13 Create a Toolbar......................................................................................... 187 3.2.14 Define an Image Control ............................................................................ 190 3.2.15 Use the Style Editor.................................................................................... 191 3.2.16 Print the Model ........................................................................................... 192 3.2.17 Manage Your Portal System Aliases.......................................................... 193 3.2.18 Store Data in a Data Store for Later Use ................................................... 194 3.2.19 Display Data on a Calendar ....................................................................... 197

3.3 Connectivity and Interoperability ........................................................................... 199 3.4 Advanced Programming Techniques.................................................................... 201

3.4.1 Defining Model-Profile Properties............................................................... 202 3.4.2 Working with Stored Procedures................................................................ 203 3.4.3 Unlocking Models ....................................................................................... 204 3.4.4 Preparing iViews for Portal Translation...................................................... 209 3.4.5 Preparing Portal Themes for Flex Controls................................................ 212 3.4.6 Creating a Web Service System ................................................................ 205 3.4.7 Creating a Multi-Selection Table ................................................................ 206

3.5 Application Adaptation and Distribution ................................................................ 208 3.5.1 Deploying to the Portal ............................................................................... 208 3.5.2 Application Life Cycle Management ........................................................... 213

4 ENSURING QUALITY.................................................................................................... 214 4.1 Logging and Tracing ............................................................................................. 214

5 REFERENCE ................................................................................................................. 215 5.1 Advanced Tutorials ............................................................................................... 215

5.1.1 Integrating Value Help into Your Model ..................................................... 216 5.1.2 Creating an Analytics Application............................................................... 226 5.1.3 Integrating Web Services in your Model..................................................... 233

5.2 Checklist................................................................................................................ 238

Document History

Document Version Description

V 1.0 SAP Library release of document, with SP Stack 14. The entire manual has been updated to fully match the text to minor changes made in the UI since SP Stack 11. The following changes were made in the manual to reflect new features for SP Stack 14:

Opening a Model: Added text describing the new option for choosing a model from the Recently Used Models list in the Get Started task panel.

Copying and Pasting Between Models: New topic that describes how to copy the contents of one model and paste them into another model using a “standard” copy-paste function.

Find Data: Text added to note that you can now use the keyboard to type in system alias names in the System field of the Find Data taks panel.

Deploy the Model: Added text about the new Last Deployment feature, which displays a link to the runtime component of a model that has been previously deployed.

Define a Dynamic Expression: Revised the documentation explaining how to use the Dynamic Expression Editor and its different options. Added comprehensive tables describing all available functions (Tables of Functions) and another topic describing messages that might be received when using the editor (Messages in the Dynamic Expression Editor).

Preparing iViews for Portal Translation : Added details to the info topic describing how to translate models that have been deployed to the portal.

December 2007

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 2]

● Go and Create [Page 27]

● Core Development Tasks [Page 59]

● Ensuring Quality [Page 214]

● Reference [External]

Be sure to read SAP Note 919388 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.

Modeling Applications with SAP NetWeaver Visual Composer 1

December 2007

1 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 experts, 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 portal’s 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 organization’s 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 12]


December 2007

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 unit’s 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 4]

● Visual Composer Architecture [Page 7]

● Glossary of Terms [Page 8]


December 2007

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 user-centric 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.

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


December 2007

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. 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


December 2007

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.


December 2007

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.

Development Server

Visual Composer Server

Visual Composer Server

Portal ContentDirectory (PCD)

RR

Save Save

J2EE Server

DevelopmentServer

RepositoryBusinessPackage

PortalConnectivity Layer Connectivity Layer

HTMLB HTMLB

Deploy

Export

Flex Flex Back-endSystem

Browser Design Time

Adobe SVG Viewer

MSXML Parser

BrowserRuntime

Flash Client

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.


December 2007

1.2.3 Glossary Term Definition

Board A tabbed area in the workspace used to manipulate the model and its elements: Design board, Layout board and Source board.

Characteristic 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.

Component A reusable model element, such as a UI component or a data service.

Cube A set of data organized as a multidimensional structure defined according to dimensions and measures.

Related SAP BI terms include InfoCube and query.

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.

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.

Data mapping 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.

Data service Any function call, business object or query imported into the model. At runtime, the data service is called and returns results.

Data store A central data container where data of a model can be temporarily stored for future use.

Dimension 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 parent-child 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).

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.

Field 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.


December 2007

Term Definition

Filter 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.

Hierarchy 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.

InfoArea 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.

InfoCube 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.

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).

JDBC 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.

Join 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.

Key figure 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.

Layer A collection of UI elements that are all visible at the same time at runtime.

Level 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.

MDX Multidimensional Expressions, a query language used to retrieve and manipulate multidimensional data.

Measure 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.


December 2007

Term Definition

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 An object created in Storyboard. Models may contain packages, pages, iViews and any other model elements.

Multidimensional data

Data in dimensional models suitable for business analytics. In this documentation, we use the term multidimensional data synonymously with OLAP data.

Navigation line 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.

ODBO OLE DB for OLAP – Microsoft’s 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 ODBO-compliant systems.

OLAP Online analytical processing – a system of organizing data in a multidimensional model that is suitable for decision support. SAP BI systems are OLAP systems.

Operation A functionality provided by a Web service.

Operator A mechanism used to manipulate data returned from the data service before it is displayed in the iView.

Package A high-level “container”; it can contain any number of pages, iViews or other packages.

Port A defined point of interface into and out of a component.

Query 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.

Query view 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.

Relational database

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).

Row 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.


December 2007

Term Definition

SAP Query 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.

Storyboard The Visual Composer client from which you design models.

Table A set of rows, also known as a relation. The table is the central object of the relational model.

Task panel A work area of the Visual Composer Storyboard desktop that displays a specific set of tools for building a model.

Toolbar The horizontal row of buttons under the main menu (main toolbar) or the vertical row of buttons in the task panel (task-panel toolbar).

Toolbox A set of board-specific tools that assist in performing tasks in the Visual Composer workspace.

Value help 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.

Web service An interface between two or more software applications that is implemented with the industry standards SOAP, WSDL and UDDI.

Workspace The main grid area of Visual Composer that displays the model as it is built and modified. The workspace consists of boards.

XMLA 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 XMLA-compliant systems.


December 2007

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 12]

● Logging On [Page 13]

● The Storyboard Desktop [Page 14]

● Managing Models [Page 18]

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.


December 2007

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.


December 2007

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 15]

● Workspace Boards and Toolboxes [Page 15]

● Navigation Icons [Page 16]

● Task Panels [Page 17]

● Context-Sensitive Help [External]


December 2007

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 Use

Design Constructing your model

Layout Customizing the layout of iViews

Source 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.


December 2007

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.


December 2007

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 Toolbar Button Description

Get Started Appears when no model is open in the workspace. Lets you open an existing model or create a blank model.

Browse 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.

Compose Model

Used to add the elements to the model, on the Design board.

Configure Element

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.

Inspect Formulas

Used to view and edit formulas in the fields of the different model components.

Find Data Services

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.

Deploy to 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 63]


December 2007

● Compose the Model [Page 65]

● Configure Elements [Page 75]

● Deploy the Model [Page 79]

For detailed information about each aspect of the task panels, see Task Panels [External] in the SAP NetWeaver Visual Composer Reference Guide.

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 19]

● Opening a Model [Page 20]

● Saving a Model [Page 20]

● Exporting a Model [Page 21]

● Importing a Model [Page 22]

● Copying and Pasting between Models

● Deleting a Model [Page 23]

● Renaming a Model [Page 23]

● Using the Model Browser [Page 24]


December 2007

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 a New Model dialog box is displayed.

2. In the 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

3. Click OK.

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 62].

To define properties for a model profile, see Defining Model-Profile Properties [Page 202].


December 2007

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 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 204] 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 19].

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).

Prerequisites The model is open in Storyboard.

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.


December 2007

1.3.4.4 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. The model is saved at the selected location.

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.


December 2007

1.3.4.5 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.


December 2007

1.3.4.6 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.7 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 ( ) button in the toolbar. A Confirm delete message is displayed.

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.


December 2007

1.3.4.8 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.9 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 19]

● 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


December 2007

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 Option Description

Model Reload last model at startup 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.

Drawing Avoid overlapping shapes 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.


December 2007

Select all shapes partially within selection box

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 creating:

These options activate the display of dialog boxes that 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 Lets you define your deployment environment.

PAR name prefix Lets you define the prefix of all PAR files created by Visual Composer.

Compiler

Portal deployment folder 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.


December 2007

2 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:

Example 2.1SalesorderiView

SalesordersA SalesordersB SalesordersC

Example 2.2Bank InformationiView

BanksA

BanksB BanksD

BanksC

• Add a data service as input• Create a sort operator• Export model

• Create a Wizard

• Add a pop-up iView

• Create base model• Adjust layout• Simulate model

• Add second data service• Create a dynamic expression• Lay out iView (Layout board)

• Find data service• Define input• Define output table• Deploy

• Fine tune layout • Use Simulator• Export model

Example 2.3BI iView

Step A 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 [Page 28]

● Creating a Bank Information iView [Page 38]

● Creating a BI iView [Page 51]


December 2007

2.1 Creating a Salesorder iView

Purpose 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:

○ BAPI_SALESORDER_GETLIST

○ BAPI_SALESORDER_GETSTATUS

Process Flow You build the iView in three stages: ... ...

1. Create the basic flow for generating the tables of orders: Creating the Base Model [Page 29]

2. Enhance this model by adding a second data service for displaying the order details: Adding a Second Data Service [Page 32]

3. Fine-tune the iView layout, deploy the model and export it: Fine-Tuning [Page 36]

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.


December 2007

2.1.1 Creating the Base Model

Use 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 [Page 28]

Procedure ...

1. Begin by creating a model:

a. Choose Model → New Model.

b. In the Create a New Model dialog box, enter a Name for the model, such as: FirstExample.

c. 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, check 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. In the Customer Number field, enter 0000001002 and in the Sales Organization field, enter 1000.

ii. Click Execute. All the information for the sales orders placed by customer 1002 is displayed.

iii. Click Close to remove the Test Data Service dialog box.


December 2007

4. Define the input:

a. Drag out from the Input port of Salesorder Getlist, release, and from the context menu, choose Add Input Form.

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, listing the metadata that can be input from the start point to the data service. Check CUSTOMER_NUMBER and SALES_ORGANIZATION and click OK.

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, CUSTOMER_NUMBER and SALES_ORGANIZATION have been mapped to the connected data service.

d. In the Assigned 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:

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.

Click OK.

6. Save the model.


December 2007

Result Your model should look similar to the following:


December 2007

2.1.2 Adding a Second Data Service

Use 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 [Page 29] 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.

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 Grid) 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 Input port of Salesorder Getlist. 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 in the Assigned Value column and choosing it from the drop-down menu (you will need to scroll down in the menu).

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.

c. Save the model. It should now look similar to the following:


December 2007

d. Add a field with a dynamic expression: This section explains how to add a “virtual field” to the second table (StatusInfo Grid), in order to dynamically describe the order size of the selected material.

i. On the Design board, double-click StatusInfo Grid. The Configure Element task panel is displayed, showing the properties of the table itself and listing the columns displayed in the table.

ii. Under the table at the bottom, click the Add (plus) button. The New UI Control dialog box is displayed.

iii. From the Select control type list, choose Expression Box. In the Field name 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.

iv. Double-click the Order_Size row in the table to display the Control Properties dialog box.

v. 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.

vi. 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)

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

When creating your formula, you can expand the Data Fields option in the right pane and select the field names from the list, in order to assist you in data entry.


December 2007

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. Click Check to ensure that the formula is valid. The following message should be displayed: Formula is valid.

ix. Click OK. The formula you created is displayed in the Expression field.

x. Click Close to enter the dynamic expression in the Order_Size field of the table.

xi. 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 Grid) should be below the Input Form. The second table (Statusinfo Grid) should be at the top right of the layout.

b. Click the edge of the Input Form, and do the following:

i. To accommodate the long text labels of the fields, from the Align contents drop-down list in the Configure Element task panel, choose Vertical. All of the form’s fields and controls are lined up vertically.

ii. 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.

iii. 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.

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.

ii. Click the Display tab. In the Label field, change the label to “Customer No.“.

iii. Click Close.


December 2007

d. Rename the tables as follows:

i. Click the edge of the Sales Orders Grid (below the Input Form) and in the Table title field at the top of the Configure Element task panel, select the text Sales Orders Grid and overwrite it with Salesorders.

ii. Click the Statusinfo Grid (at the top right) and rename it Details.

e. Save the model. It should look similar to the following:

5. Deploy the model by clicking the Deploy Model ( ) button in the toolbar. The model is compiled and deployed to the portal to which you are connected.

Result Your runtime model should look similar to the following:


December 2007

2.1.3 Fine-Tuning

Use 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 [Page 32] and it is open in Storyboard.

Procedure ... ...

1. Modify the controls of the Input Form:

a. Click the Layout tab.

b. “Streamline“ the Input Form by deleting the following fields (select and press Del):

■ Document Date

■ Document Date To

■ Material

■ Purchase Order

■ Transaction Group

c. Move the Sales Organization field to the top of the three fields.

d. Right-click the Sales Organization field and choose Properties from the context menu. The Control Properties dialog box is displayed.

e. Click the General tab and from the Control type drop-down list, choose Drop-down list to change the field type. This requires you to create a list of menu options for this control.

f. Click the Entry List tab. You use this dialog box to define a Static list of entries, meaning a set list of entries whose values are defined for them.

g. Click the Add (plus) button at the right to create the first entry. In the Value column, write 1000 and in the Display Text column, write Flat Screens.

h. Create two more entries (using the Add button), as follows:

Value Display Text

2000 Full Screens

3000 Jumbo Screens

i. Click Close.

2. Save the model.


December 2007

3. Deploy the model and view it in runtime. It should look similar to the following:

4. And 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.


December 2007

2.2 Creating a Bank Information iView

Purpose 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:

○ BAPI_BANK_GETLIST

○ BAPI_BANK_GETDETAIL

Process Flow 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 [Page 39]

● Adding a Data Service for Choosing Banks [Page 42]

● Creating a Popup iView [Page 44]

● Creating a Wizard [Page 47]

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.


December 2007

2.2.1 Creating the Base Model

Use 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 [Page 38].

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.

d. Test the data service (choosing the Test Data Service right-click context menu), using the following values:

○ Bankcountry: US

○ Bankkey: 12345678 or 021000089

4. Define the input by dragging out from the Input port of Bank Getdetail, right-clicking and choosing Add Input Form from the context menu. You can double-click the submit line to see 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 Bank Address 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.

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.


December 2007

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 Align Controls ( ) button in the Layout toolbox at the bottom.

e. Resize the Bank Address Form and rearrange the fields as follows: Bank Name, Bank No., 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.

Result Your runtime model should look similar to the following:


December 2007

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 [Page 42]) and subsequently creating a wizard (Creating a Wizard [Page 47])

○ Creating a popup iView to bring in the same data (Creating a Popup iView [Page 44])


December 2007

2.2.2 Adding a Data Service for Choosing Banks

Use 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.


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 choosing Edit → Copy).

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 at the left. You may have to move the existing elements to the right first.

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. The fields between the form and the data service are mapped automatically.

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.

ii. Double-click on the operator to display the Configure Element task panel.

iii. At the bottom of the task panel, click the Add (plus) button and from 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).

b. Add the table view: ...


December 2007

i. Drag from the output port of the Sort operator and choose Add Table View from the context menu.

ii. In the Table title field of the Configure Element task panel, rename the newly-added table view icon: Bank List Table.

iii. 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. By default, all of the fields are selected for display. This is indicated in the table at the bottom of the Configure Element task panel.

b. Map the output table to the input of Bank Getdetail:

i. Drag out from the out port of Bank List Table to the Input port of Bank Getdetail.

ii. Double-click the select line. A list of fields is displayed at the bottom of the Configure Element task panel. In the BANKCOUNTRY row, click in the Assigned Value column, and from the drop-down list, select the corresponding field name. This maps the input field of the data service (Input Field column) to the field that is output from the table (Assigned Value column). Do the same for the BANKKEY field.

iii. Click the Input port of the Bank Getdetail data service and select the BANKKEY row. Deselect the Required checkbox at the bottom. The data service will not require that field as input from the table.

2. 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.

3. Save the iView. It should look similar to the following:

4. Deploy the iView by clicking the Deploy Model ( ) button in the toolbar.

5. Export the model (choose Model → Export to File), saving it on your hard disk for subsequent use in this example.


December 2007

2.2.3 Creating a Popup iView

Use In this example, you create an alternative to the iView designed in Adding a Data Service for Choosing Banks [Page 42]: 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.


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. Select the outline of the Input Form and then click the Configure button in the task-panel toolbar. The fields and controls in the form are displayed in the table at the bottom of the task panel.

b. Click the Plus (Add) button at the bottom of the task panel. The New UI Control dialog box is displayed.

c. From the Select control type list, choose Pushbutton and in the Field name field, enter Choose_Bank. This creates a new control in the Input Form.

d. In the Layout board, move the new button to the right of the Bank Key field. This way, the user can enter the bank country, and rather than manually entering the bank key, she can click the button and get information directly.

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. Be sure that the Custom action radio button is selected and in the Custom action field, enter CHOOSE_BANK. Then click Close.

Your layout should look something like the following:


December 2007

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 “SQ1”.

c. Double-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 deselect the Required checkbox.

e. From the Bank List output port of the data service, add a Table View.

f. From the out port of the Bank List Grid, add an end point, selecting BANK_CTRY and BANK_KEY as the output fields.

g. Double-click on the evt1 line to the end point and rename it Close.

h. Right-click the Bank List Grid and choose Create Toolbar from the context menu. The Create Toolbar Buttons dialog box is displayed.

i. To create a button that will activate the Close event, click the Add (plus) button at the bottom and create a button called Close (Button name field). Create a Custom action, also called Close. Click OK.

j. Save the model and deploy the iView by clicking the Deploy Model ( ) buttonin the toolbar.


December 2007

7. Return to the BanksC iView and map the input and output to/from the popup iView:

a. Double-click the CHOOSE_BANK line. The input and output fields are displayed in the 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 (you do not need to assign MAX_ROWS). 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 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:

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.


December 2007

2.2.4 Creating a Wizard

Use 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 [Page 42] (model BanksB). You do so after importing the BanksB model.

Prerequisites You have created the model in Adding a Data Service for Choosing Banks [Page 42] and have the base model (Creating the Base Model [Page 39]) open in Storyboard.

Procedure ...

1. From the Design board top level (SecondExample), import the model:

a. Choose Model → Import from File. The Import from File dialog box is displayed.

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 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:


December 2007

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. First, select the Input Form and double-click on the SUBMIT button row in the task panel. The Control Properties dialog box is displayed.

ii. In the Display tab, rename the button "Next“.

iii. In the Action tab, change the Action type to Custom action and name it Next.

iv. Close the Control Properties dialog box.

v. Double-click the submit line and rename it Next.

vi. 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 forward and backward:

i. Right-click the Bank List Table and choose Create Toolbar from the context menu. The Create Toolbar Buttons dialog box is displayed.

ii. As you did previously, create a button called Next, which triggers a Custom action also called Next.

iii. 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, choose System action and from the System action drop-down list, choose History back. Then click OK.


December 2007

e. For the View Details layer, create transitions and events as follows:

i. Create a transition from the View Details layer to the Enter Country layer and rename it BackToStart.

ii. Right-click the Bank Address Form and choose Create Toolbar from the menu.

iii. 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 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:


December 2007

Tip

You can use the following three buttons in the toolbox below the board to view parts of your model, as follows:

Button 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. model and then deploy it by clicking the Deploy Model (Save the ) button in the toolbar.

Your runtime model should look similar to the following:

Result


December 2007

2.3 Creating a BI iView

Purpose 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 [External] 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 Flow You build the iView in three stages:

● Use the BI Integration Wizard to walk you through generating your query: Creating the Query [Page 52]

● Enhance the query result by creating a chart to display the results: Creating and Configuring the Chart [Page 55]

● Fine-tune the iView layout and deploy the model: Fine-Tuning and Deployment [Page 57]

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 [External] in the SAP NetWeaver Visual Composer Reference Guide.


December 2007

2.3.1 Creating the Query

Use 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 [Page 51].

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.

a. Define query ranks and values:


December 2007

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 Checked? Type Value

Top rank type Yes Count 3

Bottom rank type Yes Count 3

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 Value

Dimension Material

Hierarchy Material

Level Material Level 01

According to measure Incoming orders value

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:

10. Click Finish.

11. Save your model.


December 2007

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 [Page 55].


December 2007

2.3.2 Creating and Configuring the Chart

Use 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 [Page 52] 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:

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:


December 2007

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.

Your chart is now configured. You are ready to proceed to Fine-Tuning and Deployment

Result

[Page 57].


December 2007

2.3.3 Fine-Tuning and Deployment

Use In this example, you deploy your iView, then fine-tune the layout and deploy again.

Prerequisites You have created your query [Page 52], configured the output port with a chart [Page 55], 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, select Tools → Options.

b. Select the Compiler tab, and from the Runtime dropdown box, select Flash.

c. Click OK.

2. Go to the Deploy 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:


December 2007

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:

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:


December 2007

3 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 80]

● Connectivity and Interoperability [Page 199]

● Advanced Programming Techniques [Page 201]

● Application Adaptation and Distribution [Page 208]

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 60]

● First Steps [Page 62]

● Find Data [Page 63]


● Configure Elements [Page 75]

● Lay out the Model [Page 76]

● Deploy the Model [Page 79]


December 2007

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 . . .

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 Modeler’s Guide.

Process Steps Tasks Section

...

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.

First Steps [Page 62]

...

...

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 63]

...

...

1. Open the Compose Model task panel.

2. Either drag out from data-service ports and select elements, or drag elements from task panel.

3. Connect model elements as needed.

Compose the Model [Page 65]


December 2007

Process Steps Tasks Section

...

1.

Configure each m at

figure Elements [Page Open the Configure Element task panel.

odel element by defining the different tributes.

Con75]

...

1.

2. Use the Control

gure the ach ld.

Lay out the Model [Page Display the Layout board (Layout tab).

Properties dialog box to confiproperties of econtrol and fie

76]

...

...

panel.

2. Click Deploy.

3. View the model in runtime.

Deploy the Model [Page 1. Open the Deploy task 79]


December 2007

3.1.2 First Steps

Use 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 13]. 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 19]. 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.


December 2007

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 service’s operations, sorted by groups. When searching for third-party Web services, you use the Operations criteria.


December 2007

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 89].

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:


● How to . . . Manage Your Portal System Aliases [Page 193]

● Find Data Services Task Panel [External] in the SAP NetWeaver Visual Composer Reference Guide


December 2007

3.1.4 Compose the Model

Use 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 75].

Example Your model may contain data services, UI components, operators and other model elements, as in the following (fairly basic) example:


December 2007


December 2007

3.1.4.1 Components

n Components are standardized s a UI component or a data service.

Use el of your diagram ilable:

● iView

● Page

● Package

Each of these items can contai for example, a package can contain pages, ckages, while Once you drill down into an iView,

a range of UI components are d ompose Model task panel, along with other model elements, suc ors.

ture The following table lists the com he

Components

Component Name Runtime Component

Definitiomodel elements that are reusable, such a

At the top lev , the following components are ava

n other items;iViews or other pa a page can contain iViews.

isplayed at the top of the Ch as operators and connect

Strucponents that are available w

Description

n building your model.

iView A portal iView

Page A portal page

Package A container for organizing model elements into a portal package


December 2007

Component Name Description Runtime Component

Form View A standardized iView component used by the runtime user to input data, to view data and/or select displayed data

A table of data used by the Table runtime user to view output data and/or to edit data

Chart View A chart – of any selected type – that graphically displ d data ays the returne

HTML View g an external HTML document A container for displayin

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

ds or

button)

S

are shown or hidden, in tabbed iViews, wizarlayered views (such as with a toggle

ee Create Layered iViews [Page 81] for instructions on coreating tabs, wizards and ther transitions

Full descriptions of the components and their operation are prov the Compose Model ided in Task Panel [External] section of the

SAP NetWeaver Visual Composer Reference Guide.


December 2007

3.1.4.2 Connectors

Definition Connectors are points in the data flow that represent connection

ew.

Use You can use connectors to bring parameters in from another iVithe data flow to another iView, or to define the iView initializationyou can use specialized connectors to augment the data flow w

ture The following table lists the con en

Connectors

Connector Name

s that channel data from/to points outside the open iVi

ew or send them at the end of or end value. In addition,

ithin the iView.

Strucnectors that are available wh building your model.

Description Example

Start point ay n ustomers, the

initialization value defined in the start point might be 10.

Defines a value used to initialize the work flow

In an iView used to displrows of C

point Defines a final value at the In a popup iView that returns

the field defined in the end point.

Endend of the flow a value to the main iView,

Customer Name might be

Navigate (Web Dynpro runtime only)

Defines the navigation to a different iView (the “target” iView) or view in the same window

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.

Signal In For eventing, a “collection point” that receives parameters from a different iView

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.

Signal Out For eventing, a point that sends parameters to another iView

This signal sends the fields to the In signal of the corresponding iView that receives the data of the event. For example, the Out signal may send Employee Name to the second iView,


December 2007

Connector Name Description Example so that the In signal of the second iView sends the value to its data service, which generates the employee details.

Popup Signal untime only)

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

n,

Train Departure Time field, which lets the user select the

(Flash r

selecting the trip destinatioand a popup menu from a

train time.

Timer A Flash-based mechanism that counts up or down at event initiation

A timer can be added when displaying data in a table, line by line, in conjunction with a Pause button.

User Data An editable othe personal dta

ption that addata of

ken from iView initto the list of available

erm

s the user ialization fields in

You may use the User Data module as input to an Employee GetInfo data service.

the Computed Valubox (for creating fo

dialog ulas)

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.


December 2007

3.1.4.3 Operators

Definition An operator is a me nipulate datadisplay in one of the UI components of the iView.

Use se op d

Structure The following table lists the operators that are availab

Operators

Name

chanism used to ma returned from a data service, prior to

You can u erators to filter or sort the data accor ing to a number of different criteria.

le when building your model.

Operator Description Example

Filter n

yed.

Defines selection criteria for displaying data.

You can filter documents by Creation Date so that only documents created othe specified date are displa

Sort Sorts data up/down in a specified field.

You may want to alphabetically sort a list of documents by Document Name, with a secondary sort according to Document Date, newest to oldest.

Sigma all the

For material orders, you may create an output record that totals the values of all the orders.

Aggregates the values ofrecords of a specified field into asingle record.

Upper Retains only the specified top number of records.

Reviewing top performance scores osales managers, you may choose to retain the top three sales records.

f

Lower ecords.

, you may choose to output the oldest 20 documents, by

Retains only the specified bottomnumber of r

For archiving purposes

Document Date.

Distinct a in the selected

fields. Note that the fewer fields checked as distinct, the fewer records returned. – such as France – in the combination

ntaining 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.

Omits records containing duplicate dat

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

of Bank Country – Bank Key – Bank Name is returned. Any subsequent combination co


December 2007

Operator Name

Description Example

Data returned from a number of data services may include a field, called

t

hese two fields into a single field (table column).

Union Merges into a new dataset the data of two datasets, and removes duplicates. Sales Region, each containing differen

data. Union combines all of the results of t

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

both data services.

capital cities returned from

Subtract Derives a new dataset from two datasets by inc at is only in the firstthe second da

luding data th dataset but not in taset.

m which the ade (the "first"

SubtraCities ofrom th

The dataset frosubtraction is mdataset) is that which is transferred to the topmost input port of the opera

In contrast to the example of Intersect (previous esulting table for

ct displays only those Capital f Europe that are not returned e first data service.

tor.

row), the r

Group by Groups a dataseaccording to theoperation – such– defined for one(columns).

sales figures table, the Sales n) may be grouped

, while the Quantity field may be by Average.

t into groups selected as Min or Count or more fields

For a Orders field (columby Maxgrouped

Combine Combines two dnew dataset, chainput form.

k Details data service contains t ports: Bank Address and Bank

s. Combine can channel the results into a single form, containing

r al he returned fields.

atasets into a nneled into an

The Bantwo ouDetail

fields fo l t

Full descriptions of the operato Model Task Panel [External]rs are provided in the Compose section of the SAP NetWeaver ence Guide.

Visual Composer Refer


December 2007

3.1.4.4 Connection L

Definition These are the lines that connect the model elem anneling data and events between items according to the specific type of model elements.

Use You use the connecting lines to in flow of information or events from one model element to another.

Structure table describes th at can be drawn.

Connecting Lines

Line Type Example

ines

ents, ch

dicate the direction of the

The following e types of connecting lines th

Description

Data binding

output port of one UI component to the input port of the other UI component.

A connection between two UI components (or between a web service and a UI component) that channels identical data from the

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).


December 2007

Line Type Description Example

Data mapping A connection between two model components, describing, for example,

This type of connection requires mapping of the data fields from the input element to the fields of the data

what data is input to an element or what fields are output from another element.

service.

When you drag out from

t element, the

the input port of a data service in order to create the inpufields are mapped automatically.

T

the other. To create a

rag the green dot

into a red arrow.

ransition A connection between two layers, defined according to the event that triggers the transition from one layer to

transition, select the source layer and dat the top to the side of the target layer, releasing the mouse when the line turns


December 2007

3.1.5 Configure Elements

sed part or all of your model, as described in Compose the Model [Page

Use Once you have created your model diagram (using the Compose Model task panel) and youhave connected the elements, you need to configure the attributes of each item. You do thisusing the Configure Element task panel in conjunction with the model diagram on the Design board.

Prerequisites You have compo 65].

Proc... ...

2. olbar. The list of

3.

4.

5. Click on ach model element and connecting line to configure the items, and to map fields bet

Full descripti

edure 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).

Select the iView icon and click the Configure button in the task-panel toattributes for the selected iView are displayed in the Configure Element task panel.

Review the attributes of the component and edit them as necessary.

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 iVieware displayed.

eween model components.

ons of each attribute that can be configured are provided in the Configuring Model Elements [External] section of the SAP NetWeaver Visual Composer Reference Guide.

elements have bee

Result All the model n configured and mapped as needed. You can now continue todifields ]

configure the fields and controls within each UI component, using the Control Properties alog box. Generally, you should do this on the Layout board. For details about configuring

and properties, see Control Properties Dialog Box [External in the SAP NetWeaver Visual Co

See also:

● Ho

mposer Reference Guide.

w to . . . Define a Dynamic Expression [Page 147]

● Ho t [Page w to . . . Create an Entry Lis 142]

● How to . . . Define an Image Control [Page 190]


December 2007

3.1.6

Use When you have configu of the model elements, using the Configure Elements xt step is to lay out the UI components as the user should see them in runti e. You do this on the Layout board. In Layout mode, you can also configure the controls a igure Elements task panel in co

Proc... ...

2.

within a comp nt, select the item itself (not the label) and drag it as needed.

3. Youtoolbarmay wish to y changing the Row colors attribute from Sta rnating. Or you may wish to add the standard portal bar of paging buttons Show from the Paging bar drop-down menu.

Lay out the Model

red the attributes task panel, the ne

mnd fields of each of the UI components, using the Conf

njunction with the Control Properties dialog box.

edure 1. On the Layout board, view the location of each of the UI components and decide in

which order they should be placed.

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

one

can fine-tune the components by clicking the Configure button in the task-panel in order to display the attributes of the selected component. For example, you

change the look of a table bndard to Alte

to the bottom of a form, by choosing

You can aalign components or you can freely a

rrange the components in the Form view in different ways. You can with each other using the Vertical or Horizontal layout options, rrange the components according to your preference using

option. Notice that when using the latter option, long labels may not erent layout options are provided

the Absoluteappear in full. Detailed explanations of the diffin the Form View [External] section of the SAP NetWeaver Visual Composer

uide.

4. At all pocompo ich, among other options, enables you to:

○ omize a toolbar for the component (see How to . . . Create a

Reference G

ints of the layout process, you can access the right-click context menu for each nent, wh

○ Edit the component title

Create and custToolbar [Page 187])

○ mponent

the component

5. To change thus t the bottom of the Configure Element task panel. With forms and tables, the follo ayed (from left to right):

Select all the fields and controls of the co

○ Resize

e type of field or control – and to hide or show it in the component – you e the table a

wing columns are displ

○ (Show/Hide)

○ (Data Type)

○ Field

○ Control


December 2007

You use the Control column to edit the type of control, or to access the Control Proper

With ch

6. To add a s) button at the bottom rig e type of control to add and define its Data type and Field name. To delete a control from the component, select it from the tab

cking on a specific field or control in the component on the Layout board, an access options relevant to configuring that field or control. To define the

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

○ 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]

ties dialog box (using the drop-down menu).

arts, the columns displayed are:

○ # (series ID number)

○ Data Series

○ Formula (for selecting the field of the data series)

control to the selected component, click the Add (pluht, and in the New UI Control dialog box, select th

le and click the Remove (minus) button.

7. By right-cliyou cproperties 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

section of the SAP NetWeaver Visual Composer Reference Guide.


December 2007

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 184]

○ How to . . . Define a Dynamic Expression [Page 147]

○ How to . . . Create an Entry List [Page 142]

. . . Create a Toolbar [Page ○ How to 187]

Result You have laid ols in the elements

out the components of your iView and defined the properties of the contr.


December 2007

3.1.7 Deploy the Model

nguage

pported by the portal. During compilation, warnings and possible errors may be validity. The compiled content is deployed

Prerequisites You are connected to a portal for which you have VC Role permissions.

Use The models that you build in Visual Composer are generated in Generic Modeling La(GML) code. To deploy your application to a portal, the GML code must be compiled into a language sudiscovered, enabling you to check the model directly to the portal.

If you are deploying to a production portal, you must have Administrator

P... ...

igation path above it, navigate up or down to the y. For example, at the top level of your model, you

may have a package containing and iViews, so you may want to drill down to a ploy.

olbar to display the Deploy to Portal task

permissions to deploy the model.

rocedure 1. On the Design board and using the nav

level of the model you want to deplopages

specific iView that you want to de

2. Click the Deploy button in the task-panel topanel.

To deploy the entire model (regardless of the level displayed on the Design

y entire model check box. To deploy only the part of the ed, deselect the check box.

nd upon completion, a Deployed message is displayed. If errors occur or potential problems are

ages and warnings are displayed along with the f messages displayed, see Logging and Tracing [Page

board), select the Deplomodel currently display

3. Click Deploy. The model is compiled aSuccessfullydiscovered, the appropriate messsource code. For the types o214].

RThe code ame>” message displayed in the task panel.

esult ntents of the model are packaged into PAR files, one file per iView. To view the

ployed file in runtime, click the Run “<filen

■ 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.


December 2007

3.2 ow to . . . H

s section (Developing Business Logic [Page

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 previou 59]). The fine details – such as

SAP NetWeaver Visual Composer Reference Guide configuring attributes – are given in the [External].

To

● Create Layered iViews [Page

pics included in this section are:

81]

● Create Interrelated iViews [Page 89]

Eventing between iViews [Page ● Define 97]

● Use the BI Integration Wizard [Page 100]

● Work with SAP BI Systems [Page 107]

● Filter a BI Query [Page 132]

● Add an Alert Data Service [Page 134]

● Create a Toggled View [Page 137]

● Create an Entry List [Page 142]

● Define a Dynamic Expression [Page 147]

● Create Value Help [Page 178]

● Create a Chart [Page 184]

● Create a Toolbar [Page 187]

● Define an Image Control [Page 190]

● Use the Style Editor [Page 191]

● Print the Model [Page 192]

● Manage Your Portal System Aliases [Page 193]

Data in a Data Store for Later Use [Page ● Store 194]

● Display Data on a Calendar [Page 197]


December 2007

3.2.1 Create Layered iViews In order to define which UI components are visible at the same time in the runtime iView,

omposer uses layers to group the components on the Design board. Depending on e of layering, transition lines may be required to define the navigation from layer to

ch layer is represented as a tab that the user can select to display the UI components within the layer.

Visual Cthe modlayer.

Views can be laid out as follows:

● Tabs, in which ea

This tabbed iView was devised from the BanksB model created in Adding a Data Service for Choosing Banks [Page 42]:

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 tothe layers are displayed in a hierarchical structure.

which each layer is represented as a numbered (and labeled) step. In this cedure, the user clicks navigation buttons in the views to move from one to

n lines) ed for each button.

● Wizard, inguided prothe other step. As a result, the layers must be linked by transitions (navigatiothat correspond to the actions defin

This Wizard was devised from the same BanksB model, as described in Creating a Wizard [Page 83]:

● Accordion, in which each layer is displayed as a collapsible panel.


December 2007

● Stcompoimage ith wizards.

andard layers, which may be used to display different overlapping sets of nents. The navigation method may be by means of pushbuttons, links or s, requiring the use of transitions, as w

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 informati

● Creati

on about creating different types of layered views, see:

ng a Tabbed iView [Page 85]

ng a Wizard [Page ● Creati 83]

● Using Standard Layers [Page 87]


December 2007

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 N xt or Back – in the view and jumps to the target view. As the transition occurs, the step for that view is highlighted.

e

Wmove

P c...

1.

2.

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.)

to create.

3. Configure the wizard layers:


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: ...

hen you create your wizard, you can define steps and substeps, and enable the user to backwards and forwards through the full roadmap of steps.

ro edure On the Design board, create and connect all the components of your iView.

To create the layers for the wizard:


c. Repeat the last step for each layer you want


December 2007

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.

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, right-click 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 transition’s 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 187]).

he 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 of the Configure Element task panel, press Ctrl and in the second

column – with the

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 t

(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 [Page 47]


December 2007

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 inthe 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.

yout tab to organize the components in your layers. Click outside all of the s to display the list of tabs at the bottom of the Configure Element task

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 Lacomponentpanel.

9. The second column – with the (Visible) icon – enables you to display some or all of the ). Press Ctrl and check all of the layers, staexamp

layers on the Layout board (it is not a runtime indicationmaking the components appear semi-transparent. This enables you to

ck them one on top of the other, aligning them to their top-left corners. For the le at the top, the Layout might look similar to the following:


December 2007

esign time may look similar to the following:

Result The tabs in d

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.


December 2007

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 vie – but by means of buttons that specify the navigation. Take, for ex

ws – similar to tabsample, the iView displayed in Create Layered iViews [Page 81]:

In this examp le. When the usservice, the d e view at a time

le, the user inputs information in a form and the results are displayed in a taber selects a row in the form and the results are channeled to the second data ata output from two ports of the data service can be layered to display only on. Here is what the model might look like in design time:

f navigation between the two iView are the buttons in the forms – Bank Addressails – that trigger the inter-layer navigation.

The means o and Bank Det

Building standard layers is, like the wizard, a matter of defining layers, creating the transitions and defining the navigation buttons.


1. Create and connect all the components of your iView.


December 2007

2. To create the layers for the views:


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:


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

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 transition’s 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

the transition to give it a logical name that will be used to relate it to a navigation button.

187]).

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 semi-transparent

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.


December 2007

3.2.2 Create Interrelated iViews In the iViews that you create in Visual Composer, you can create links that navigate to other

displayed either within the iView itself, or displayed in a separate window.

This iView, which can be defined directly within the main iView, is displayed in a indow. It receives input from the main iView and channels output back to s well.

iViews,

Within an iView, you can navigate to three different types of related iViews:

● Popup iView

separate wthe iView a

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 92].

● NesteA nestreceiv

d iView ed iView is an actual iView that sits within the iView being modeled. It can e 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 in iView but also

from the mafor user entry within the nested iView. includes an input form


December 2007

For more information about defining a nested iView, see Creating a Nested iView [Page 94].

● NaYou ca igates out of the present iView to another iView.

vigation n insert an operator that nav

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:


December 2007

For more information about defining navigation to an external iView, see Defining Navigation to an External iView [Page 96].


December 2007

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 do this in the Define Action section

Choose the Custom action radio button and enter the event name in the Custom action text box.

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.


December 2007

e. From the out port of the output component, add an end point, selecting the

f. Double-click on the evt1 line to the end point and rename it appropriately, such as Close.

output fields to be returned by the popup.

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

h. yout board and adjust your layout accordingly.

e source iView and double-click the line to the popup. The input and output isplayed in the Configure Element task panel.

1

) to the fields of

fields of

11.

12.

ET e

(adding a control and using the Control Properties dialog box)

Go onto the La

9. Return to thfields are d

0. Map the input and output fields to/from the popup.

○ The top table maps the fields from the Input Form (Assign Fromthe popup (Popup Input).

○ The bottom table maps the fields form the popup (Popup Output) to thethe Input Form (Assign to).

Adjust the layout to compensate for the popup iView, which will be displayed within the source iView.

Save the source iView and deploy it.

xample o cr ate your own popup iView, step-by-step, see the tutorial of Creating a Popup iView

[Page 44].


December 2007

3.2.2.2 Creating a Nested iView

Use You can use a nested iView to create an iView displayed within another – source – iView. Thenested 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.

needed.

pose button in the task-panel toolbar to display the Compose Element

ew icon onto the View dialog box is displayed.

4. Ch e iVie and choo

5. Rig c

6. Crecon cservice an Signal In. The Select Input Fields dialog box is displayed.

7. Che

8. Go

9. Save the iView and the loy Model (

Procedure ... ...

1. Create the source iView, adding one or more data services and input forms as

2. Click the Comtoolbar.

3. From the Components group of icons at the top, drag the Nested iViboard at the relevant location. The Select Nested i

oose Create new iView at the bottom, unless you have already created a separatw that will be embedded in the source iView. In that case, select the iView name

se Select existing iView. Click OK.

ht- lick the nested iView icon and choose Drill Down from the context menu.

ate the iView logic, adding the data service and the UI components you require. To ne t the nested iView to the source iView, drag out from the Input port of the data

d choose

ck the fields that should be input from the source iView and click OK.

onto the Layout board and adjust the layout as needed.

n deploy it by clicking the Dep ) button in the

1.

11. If n he data to ly. (For m Creating a Popup iView [Page

toolbar.

0. 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

eeded, create a button in the UI component and define the action that transfers t the nested iView, renaming the connecting line to the nested iView accordingore information about creating buttons, see 92]

12. Dofields b

13. Adjust

14. Save the source iView and deploy it.

ExampleThe follow

uble-click the connecting line and in the Configure Element task panel, map the etween the UI component and the nested iView.

the layout to compensate for the nested iView.

ing is the design-time layout of the runtime nested iView shown in Create

Interrelated iViews [Page 89].


December 2007


December 2007

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 92].

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.

Example The following is the design-time layout of the runtime source-and-target iViews shown in Create Interrelated iViews [Page 89].


December 2007

3.2.3 Define Eventing between iViews

-g

ortal Client Manager (EPCM), an object

uisites top-level iView icons on the same page in Visual Composer.

PTo def... ...

1. iView and define the logic:

a. From the out port of the last UI component in the flow, drag out and choose

b. t port is

c.

d. ngful action, such as

e of the out port, the EPCM event and the exact names of the fields that are transferred out of the iView.

iew, navigate back and drill down into the second iView

Select Input Fields dialog box is the first

in port and in the Configure Element task panel, rename the

Use 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. Eventinin the portal is based on the use of the Enterprise Pdefined by the portal client framework to handle functions such as client eventing.

PrereqYou have created the

rocedures ine eventing between two iViews created in Visual Composer.

Drill down into the first

Signal Out. The Select Output Fields dialog box is displayed.

Check the fields that should be output by the signal and click OK. An ouadded to the flow.

Double-click the connecting line to the signal, to display the Configure Element task panel.

In the Event name field, rename the evt1 line to a meaniSelect, or Submit.

e. Note the nam

2. Save the iV

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.

a. If you dragged out from a data service, the displayed. Check the fields that correspond to the fields output from iView, although the full names may differ.

b. Double-click on thesignal 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 iVcom.sap.visu

iews are defined in Visual Composer, a default EPCM value – alcomposer:epcm – is assigned automatically.

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

Element task panel, map the new fields of the port to the connected service or element.

c.

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


December 2007

4. Save the second iView.

To define eventing between an iView created and existing in the portal, and an iView ual Composer:

isting 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.

le-click the newly-created port and in the Configure Element task panel, enter the and the EPCM event in the EPCM event

field.

RAt

xample 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:

created in Vis... ... ...

1. Check the properties of the ex

3. Doubportal event name in the Signal name field

esult run-time, client-side eventing can be achieved by using the identically-defined ports.

E

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.


December 2007

At run-time, the two views will be able to communicate through client-side eventing based on p-level page would look the definition of identical properties for the output/input ports. The to

like the following:


December 2007

3.2.4 Use the BI Integrati

izard walks you throu of creating a query using one of a plates. The wizard creates a data service element in the Visual Composer

figured with the query you .

rd can create queries upon any d our portal system configured to Java Connectors, inclu sional) and relational data

rerequisites data source in the portal based on a BI Java Connector , or BI SAP Query Connector). See Defining Portal

on Wizard

Use The BI Integration W gh the processset of query temworkspace con choose

The wiza ata service in yconnect via the BIsources.

ding OLAP (multidimen

P● You have defined at least one

(BI XMLA, BI ODBO, BI JDBCSystems and Aliases [External] in the SAP NetWeaver Visual Composer InstallationConfiguration Guide.

&

You can use the wizard with SAP BW systems 3.1C and higher if they have

s 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

been configured as OLAP systems using the BI XMLA Connector. We recommend, however, that you configure SAP BW system

(see Using a BI System as a Data Service [Page 108]). You cannot use the BI stems configured in this way.

ated an iView in which to plac ch the BI on Wizard.

he wizard’s process flow differs depending on which type of system and which template you ose. The basic process is as follows:

...

1. From the

2. Select

3. Select a query template.

The list of available templates [External]

Integration Wizard with sy

● You have creIntegrati

e your query before you laun

Procedure Tcho

BI menu, choose BI Integration Wizard.

the data service upon which you want to base the query.

varies depending on the type of system (OLAP

query template you have selected.

ResOnce and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query you ha rlying MDX (for OLAP data sources) or SQL (

or relational) you have selected.

4. Configure the query parameters.

These parameters vary depending on the

5. Preview the result.

ult you have completed all required wizard screens

ve configured. This result is supported by an undefor relational data sources) statement.


December 2007

The dThese y for preview and

xample See Creating a BI iView [Page

ata service is configured automatically with a start input and a table view as output. three elements together constitute a complete iView, read

deployment to your portal.

E51].

See also:

● Furthe

r Configuring Queries [Page 102]

uring Queries Directly in Data Services [Page ● Config 105]

ing Queries [Page ● Modify 106]

● BI Integration Wizard [External] in the SAP NetWeaver Visual Composer Reference Guide


December 2007

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 columns.

Create an input form on the data service that lets the user enter a string for a specific country and then re

● Create

Createand ou

PrerequiAs outlined in BI Integration Wizard [Page

Top 5 query in

● Create a different input port:

-submit the query.

advanced BI applications:

an advanced BI application by stringing multiple objects together from the input tput of the data service.

sites Use the 100].

Creating a Different Output Port A automatically configdata se...

1. Select and delete the table view connected to the output port of your data service.

from query's Output port and choose Add Chart View from the context menu (see te a Chart [Page

Procedures

ll of the queries created using the BI Integration Wizard (except for Heatmaps) are ured with a table view on the output port. You may instead configure your

rvice to display a different view such as a chart. To do this:

2. DragCrea 184]). You can also experiment with chart animation and

re suggested in the following table:

Altern

interactivity.

Possible alternate views for each query template a

Output Port Suggestions

Query Template ate View

All Data Table

Count (OLAP) Bar chart

Count (Relational) Table

Cumulative Total Line chart

Freeform (OLAP or Relational) Table

Grand Totals Table

Minimum/Maximum Table

Moving Average Line chart


December 2007

Query Template Alternate View

Percentage Growth Table

Percentage Share Pie chart

Planned vs. Actual Column chart

Rank Change Table

Top N Column chart

Trend over Time Line chart

Zero Activity Table

t Input Port automatically configured with a

start input. You may instead wish to provide a form on the input port so the user can enter n and resubmit the query at runtime. To do this:

ice.

from the context menu (see

Creating a DifferenAll of the queries created via the BI Integration Wizard are

specific informatio

3. Select and delete the start input of your data serv

4. Drag from query's Input port and choose Add Input FormForm View [External] in the Visual Composer Reference Guide).

The ta pe of system:

e Description

ble below lists the default fields on the input ports for each ty

Default Fields on Input Ports

System Typ

Relational systems Every field of the selected table

OLAP systems One field per dimension of the selected cube

In OLAP queries in which variables are stored, you will also see an additional

this port.

Creating AdYou can strincreate advan

● 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

Variables input port. You can attach an input form in the same way to

vanced BI Applications g multiple objects together from the inputs and outputs of the data service to ced BI applications. For example:


December 2007

BI query. For example, get a list of current custothen perform analysis for each customer with a B

mers from an ERP system BAPI and I query.

e of such an advanced scenario might look something like the below on the omposer storyboard:

One examplVisual C

Query results are dynamic. If you are using fields from the result of one query as

e input for another object, your mappings could become invalid when the sults of your query change during runtime. In this case, the input port

threbecomes null and could provide unexpected results.


December 2007

3.2.4.2 Configuring Queries Directly in Data Services

vice manually.

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 ser

Prerequisites As outlined in Use the BI Integration Wizard [Page 100].

Depending on how your systems have been named, it may not always be clear

ith

ity necessary the BI JDBC

cognize a BI edures, it is a portal JDBC

Procedu...

2. In OLAP systems, browse or look for a cube. In relational systems, browse or look for a table.

Result The data service’s metadata is retrieved, and a default query is created based on the templates available in the BI Integration Wizard:

Default Query Templates

System Type Default Query Template

which data services listed in the Find Data task panel have been configured wBI 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 capabilto use the BI query functionality, whereas a system based onConnector does. In the Find Data Services task panel, you can reJDBC system if you see tables. If you see stored procsystem.

re 1. On the Find Data Services task panel, from the System drop-down list, select an OLAP

or relational system.

3. Select the cube or table and drag it onto the workspace.

OLAP system: cubes Grand Totals (OLAP)

Relational system: tables All Data (Relational)

See Modifying Queries [Page 106] to learn about how to modify the default query.

Cdeploy

onfigure the input and output ports of your data service manually in order to create a able model (see Further Configuring Queries [Page 102]).


December 2007

3.2.4.3 Modifying Queries

Use After yo uery, you may modify edit the query statement directly by using the MD (relational queries).

u have created a q it using the BI Integration Wizard, or you may X Editor (OLAP queries) or SQL Editor

MDX and SQL Editor functionality issee Security Risks with the SQL Ed

disabled by default. For more information, itor and MDX Editor [External] in the SAP ity Guide. NetWeaver Visual Composer Secur

PrereAs outlined in Use the BI Integration Wizard [Pag

quisites e 100].

zard:

on.

Procedure To modify a query using the BI Integration Wi...

1. In the workspace, select the data service ic

2. Select BI → BI Integration Wizard.

Alternately, from the context menu, select

The BI splayed on the Sechange ry except for the d your query.

To modif DX or SQL Editor: ...

1. In the workspace, select the data service ic

2. Select BI → MDX Editor (OLAP queries) o

Alternately, from the context menu, select

The MDX or SQL Editor appears with your currently config e.

Configure Query.

Integration Wizard is di any aspect of your que

lect a Query Template screen. You may ata service, cubes, or tables associated with

y a query using the M

on.

r BI → SQL Editor (relational queries).

MDX Editor or SQL Editor.

ured statement activ

If you select a relational ddisregards your selecti

ata servic tor on and assum

query. Similarly, if you select an OLEditor, the editor disregards your se te a new relational query.

e and you evoke the MDX Editor, the edies that you want to create a new OLAP

AP data service and you evoke the SQL lection and assumes that you want to crea


December 2007

3.2.5 Work with SAP BI Systems

Use The BI Extension Kit in Visual Composer allows y ss many features in conjunction with SAP BI systems (BW systems 3.5 and higher).

Prerequisites ● You have access to an SAP BI system (SAP P Stack 14 or greater),

and it is configured to connect via the SAP ee Defining Portal Systems and Aliases [External]

ou to acce

NetWeaver 2004 S BI Connector in the portal landscape. S

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

the BI Integration Wizard [Page OLAP systems. You can access these systems on the Find Data Services task panel or in the BI Integration Wizard (see Use 100]).

main menu, choose Tools → Options. Select the Compiler tab, and from the Runtime lash.

ual

s a D

● 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

dropdown box, select F

Features For information about features you cComposer, refer to the following

●

an access while working with SAP BI systems in Vis:

ata Service [Page Using a BI System a 108]

● Using a Characteristic as a Data Service [Page 112]

● Using Exceptions in Your Model [Page 114]

● Adding Query Information to Your Model [Page 117]

● Using Messages [Page 118]

● Modeling Hierarchies [Page 119]

● Working with Favorites [Page 125]

● Working with Variables [Page 127]


December 2007

3.2.5.1 Using a BI System as a Data Service

UYou can u ics stored in BI systems as data services in e of a query or query view, you can view th Characteristics), and different formats of InfoObjects in se while designing your model.

PAs outlined in

se se queries, query views, and characterist

your Visual Composer models. Inside the structure variables (Variables), characteristics (the query result (Result) available for u

rerequisites Work with SAP BI Systems [Page 107].

edure Proc...

1. On the Find Data Services task panel, select an SAP BI data service (see Find Data [Page 63]). You can also access BI system favorites (see Working with Favorites [Page 125]).

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:


December 2007

5. Expand the

query resuResult folder. Available InfoObjects (characteristics or key figures) in the

lt 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 Details

[InfoObject] The formatted value of the characteristic or key figure – for example, with currency and decimal notation.

[KeyFigure]_value 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.

[Characteristic]_key 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.

[Characteristic]_ext_key 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 The currency attributed to this key figure. This represents the currency symbol itself.

[KeyFigure]_unit The unit of the key figure – for example, piece or pound.


December 2007

[InfoObject] and Label Details

[KeyFigure]_exception If there are exceptions stored in the query, the exception value (or its severity grade)

. 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

associated with the key figure is stored here

114].

[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 119].

[Characteristic]_node_status 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 119].

6. Select a query, query view, or characteristic (see Using a Characteristic as a Data Service [Page 112]) 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 Output

Input – accepts data Output – returns data

Variables – accepts values for variables (if variables are available in query or view)

Info – returns the query information (text elements) associated with the query (see Adding Query Information to Your Model [Page 117])


December 2007

(see Working with Variables [Page 127])

ry-related messages (see Using Messages – returns queMessages [Page 118])

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:

T hen you can deploy to the portal to see the results of the query:

See also:

● Creating an Analytics Application [Page 226], for step-by-step instructions on creatinplete analytics application using BI systems

g a com

● Using Exceptions in Your Model [Page 114]

● Modeling Hierarchies [Page 119]

g with Variables [Page ● Workin 127]

● Fil ater BI Query [Page 132]

● In Data Service [External] (in the SAP NetWeaver Visual Composer Reference Guide), see th Element task panel.

e BI Query reference for properties you can configure using the Configure


December 2007

3.2.5.2 Using a Characteristic as a

se a cha cteristic as a data service in o r to view and access an InfoCube’s aster data. You can apply this functionality in conjunction with value help, or you can create

ustom entry lists of characteristic values that you use in formulas or to populate controls ch as drop-down lists (se

Data Service

Use You can um

ra rde

csu e Create Value Help [Page 178]).

Prerequisites As outlined in Work with SAP BI Systems [Page 107].

Procedure...

1. On the Find D k panel, select an SAP BI data service (see Find Data

ata Services tas

[Page 63]).

2. Expand the S ice until you are navigating in the Characteristics folder (see Us

tructure of the data serving a BI System as a Data Service [Page 108] for more on the structure

vices): of BI data ser

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


December 2007

iView and connect a start point to its Input port and a table view to its Output port, creating a t lomodel tha oks like the below:

When you deploy this iView to the portal, the table displays the characteristic’s master data:

See also:

In Data Service [External] (in the SAP NetWeaver Visual Composer Reference Guide), see e Characteristic reference for properties you can configure using the Configure Element

task panel. th


December 2007

3.2.5.3 Using Exceptions in Your Model

ry

Work with SAP BI Systems [Page

Use If exceptions have been stored in a BI data service, they can be retrieved in Visual Composerand used as the basis on which you build an application. For example, you can display queresults in a table in which certain exceptional conditions are highlighted in color.

Prerequisites ● As outlined in 107].

● Be sure to set your compiler to Adobe Flash format (Tools → Options → Compiler

Procedu...

1. On the

tab) to work with styles and style coloring, which is helpful when displaying exceptional conditions.

re Find Data Services task panel, select an SAP BI data service (see Find Data

[Page 63]).

2. Expand thefigures that

structure of the data service and navigate into the Results folder. Any key represent exceptions are appended with _exception.

5. to the Output port, and select the fields to display in the table.

le-click the table view to access the Configure Element task panel.

I

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.

igure conditions and styles for the virtual field:

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.

Attach a table view

6. Doub

7. Define a virtual field to display the key figure’s exception value with color styling:

a. At the bottom of the panel, click the Add (plus) button to display the New UControl dialog box.

b. Select

8. Conf

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:

The following coloring values are standard for exceptions in BI systems:

BI System Standard Exception Coloring


December 2007

Exception Value Color 0 No color – no exception

1-3 Green

4-6 Yellow

7-9 Red

i. On the Styles tab, click the Add (plus) button to create a new style. Call it Red.

ii. Set its Background value to red.

elect the Condition field, and in the formula drop-down list, select Enter rmula.

OL(IF(@KeyFigure_Exception>=7&&@KeyFigure_Exception<=9,true,false)).

tual

iii. Sfo

iv. In the Style Selector dialog box, enter the following formula in the condition field:

BO

Replace KeyFigure with the name of your key figure. This is your ackey 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

ition Style Cond _Exception>=7&&@KeyFigure_Exception<=9,true,false))Red BOOL(IF(@KeyFigure

Yellow BOOL(IF(@KeyFigure_Exception>=4&&@KeyFigure_Exception<=6,true,false))

Green 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.

Result In runtime on the portal, the table displays the results, in which the virtual field is color-coded according to the exception level:


December 2007


December 2007

3.2.5.4

Use You can inte t is stored in text elements in a BI query into your Visual Comp r model. Query information is generated from an output port on the query, and provides data in the underlying InfoCube, and use

Adding Query Information to Your Model

grate query information thaose information such as query author, last update of the

r 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.

PrerequisitAs outlined in W

es ork with SAP BI Systems [Page 107].

Procedure ...

1. Onand dr Using a BI System as a Data Service [Page

the Find Data Services task panel, select a query or query view from a BI system ag it to the workspace (see 108]).

2. In the workspace, drag from query's Info port and choose Add Form View from the lay Fields dialog box is displayed:

3. Se

Result An info form ion is added to the model. Displayed in runtime on th

context menu. The Select Disp

lect the query information you wish to display, and click OK.

containing the selected query informate portal, the form might look something like this:

See also:

Select Display Fields: Query Information [External] in the SAP NetWeaver Visual Composer Reference Guide.


December 2007

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 107]

● There must be active messages associated with the query in order for them to be layed in Visual Composer disp

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).

1 O panel, select a query or query view from a BI system a e Using a BI System as a Data Service [Page

Procedure ...

. n the Find Data Services task nd drag it to the workspace (se 108]).

2 m query's Messages port and choose Add Table View from th

esult 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:

. In the workspace, drag froe context menu.

R

See also:

Messages Table [External] in the SAP NetWeaver Visual Composer Reference Guide.


December 2007

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.

re information about the BEx Query Designer, see the online documentation at:

y → Information Integration by Key Capability → Business Intelligence → BI Suite: Business

xplorer → Query Design: BEx Query Designer

...

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:

For mo

http://help.sap.com → SAP NetWeaver Library → SAP NetWeaver by Key Capabilit

E

Procedure

CHARACTERISTIC_node_level provides the value for the hierarchy node level of the selected row. The root node is level 1.


December 2007

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 108]).

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.

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.


December 2007

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%26LEVEL%3D2%26IOBJNM%3DCHAR_TECH_NAME%26DATA_PROVIDER%3DDP;'

(Note: There is a space after FILTER_COLLAPSE)

e. r

f. represents the key of the currently selected characteristic member. lace this with your value, prefixed with the ID of the table view, by using

i. 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.

Replace the three instances of CHAR_TECH_NAME with the technical name foyour characteristic.

CHAR_keyYou repthe data fields provided:

ii.

g. Click Check to validate the formula, and if valid, click OK to save the changes

and close the dialog box.

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. Expand the Data Fields node, then expand the Output Table node.

ii. Drag the node level field of your hierarchy-enabled characteristic into thetext editor and place it in the correct location in the formula.


December 2007

Wthe Storyboard looks something like this:

hen your model is complete, with the commands modeled for both drill down and drill up,

Result In runtime in the portal, the application looks something like this:

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 "+"


December 2007

To drill down, select a node that is collapsed (prefaced with "+"), and click the Drill Down button:

The node expands and its subnodes are displayed beneath it:

You can continue drilling down into collapsed subnodes until they are fully expanded:


December 2007

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").


December 2007

3.2.5

Use Favor easy way to access frequently used queries. In Visual Composer, you can br wse and modify the list of favorite queries stored for your user in a BI system.

.7 Working with Favorites

ites provide ano

Note that depending apped in the system, the

tem d portal user.

Prere esAs outl ork Systems [Page

on how users are miffer from the current

current BI sys

quisit

user could

ined in W with SAP BI 107].

Procedure To bro and av...

1. On the Find Data Services task panel, select an SAP BI data servic

wse for select a F orite:

e (see Find Data [Page 63]).

2. In the Look fo ct Display favorites.

Any Favorites stored in this system under your user appear in the list. They may either b t in a

3. Navigate to, select, and wo desired (see Using a BI Sy vice [Page

r drop-down list, sele

e stored a the root or folder hierarchy.

rk with an InfoObject in the Favoritesstem as a Data Ser

and query structure as 108]).

To add a query to Favorites: ...

1. On the Find Data Services ery in a BI syst

2. From the context menu, select e Select Favoappears:

task panel, select a qu em.

Add to Favorites. Th rites Folder dialog box

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.


December 2007

4. Clifolders

5. Click R

6. Click A d location and dismiss the dialog box.

To remo...

1. On the Find ervice.

2. In t

3. Select

Result If you createduser in the B

See also:

Favorites Fol

ck Create New Folder to create a new folder. You can also nest folders into existing .

emove Folder to remove a selected folder.

dd to store the Favorite in the selecte

ve a query from Favorites:

Data Services task panel, select an SAP BI data s

he Look for drop-down list, select Display favorites.

a query, and from the context menu, select Remove from Favorites.

a Favorite or modified the Favorites list, this information is stored under your I system.

ders [External] in the SAP NetWeaver Visual Composer Reference Guide.


December 2007

3.2.5.8 Working with Variables

se characteristic value variables saved in an SAP BI query or query view, they are

av les input form to allow use g the query. If yoexecut

W 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

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

UIf you have

ailable on the Variables input port of the data service. Model a variabrs to enter values for the variables at runtime on the portal before executin

u have a mandatory variable, you must model an input form for it or the query will fail to e properly.

hen using variables in input forms

a

107]

● 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.

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 63]).

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:


December 2007

Note on mandatory variab

With the Variables port on

les:

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

orm.

e. Drag from the data service’s Output port and choose Add Table View, and e fields to display in the table.

riables for which you want to provide input when the query is executed at runtime on the portal, keeping the SUBMIT button

selected:

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 service’s Variables port and choose Add Input F

select th

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 va

also

If you ha les, th

g. Save the model.

q –

our model is functionally complete, and you could de the variable fields, and execute the query. However, you need to know

ection syntax to enter in each of the input fields. We explore that in this , 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).

riable Selection Types In the query’s definition, you can configure SAP BI characteristic value variables that allow you to provide different kinds of selections. For example, you can configure a

.

ve mandatory variab you must keep these on e form.

2. Explore the re

At this point, yenter values inthe proper selsection

uired input syntax

ploy it to the portal,

About SAP BI Va

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


December 2007

Variable Types and Visual Composer Field Syntax The fohelp tyfield by xternal Display) (*_ext_key) value of the characteristic to the field. "Value" in the syntax column refers to this value:

Variable Display Area

Composer Value Help Type

llowing table lists the display areas for variables in BI, the corresponding value pe in Visual Composer, and the syntax required by Visual Composer in the input each. Note that with variables, you must pass the Key (E

Field Syntax

BI Visual Input Field Syntax Examples

Single Value

Single Selection

[Value] 1612

(the single value 1612)

Multiple Single Values

Multiple Selection

[Value1];[Value2];[Value3] ...

1612;1614

(1612 and 1614)

Interval Interval Selection

[Value(Start)]:[Value(End)] 07/2004:12/2004

(the range from 07/2004 to 12/2004)

Selection Option

Selection Options

[Value]:[Value(End - optional)]:Operator:I (Includes) or E (Excludes)

Available Operators:

• EQ – Equal to

• GE – Greater than or equal to

• GT – Greater than

• LE – Less than or equal to

• LT – Less than

• BT – Between

1592::EQ:I;1612:1614:BT:I

(include the single value 1592 and the range from 1612 to 1614)

1614::GE:I;6512::EQ:E

(include all values greater than or equal to 1614 except 6512)

1552::LT:I;4000::GT:I

(all values less than 1552 and greater than 4000)

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.


December 2007

b. ut Field screen, notice that Visual e 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.

untime Parameters screen, you can leave all values as they are by default except Key field.

field is the value that is actually passed on to the input form. The Key xternal Display) values are usually the same in characteristics, but

need Key (External Display) value as input for a variable. Accordingly,

e. Click Finish to exit the wizard and generate the value help.

re you have configured it.

4.

the model to

ew name] to view the iView in runtime on the portal.

RU play) values, but to al

When fer the value to thvaretrieve the result for di

On the Add Value Help for Selected InpComposer recommends the type of valu

c. On the Select Data Service screen, browse to and select the characteristic that will provide the list of valid variable values.

d. On the Specify Data Service R

The keyand Key (Ewhen they differ (such as is usually the case for time characteristics), youto use the select Key (External Display) from this drop-down list. This field is also referred to in Visual Composer as [Characteristic]_ext_key.

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 whe

f. Save the model.

Deploy –

a. Go to the Deploy to Portal task panel and click Deploy to deploy the portal in Adobe Flash format.

b. Click Run [iVi

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 itexecutes.

esult se the value help dialog boxes to not only retrieve valid Key (External Disso create the proper selection syntax.

you are done, click Done in the value help dialog box to exit and transe input field. Note that the field now contains the proper field value and syntax for the riable. Click Submit to execute the query with the variable values you configured and

splay in the table:


December 2007

● If you have mandatory variables, you must configure values for these before you submit the query (unless you have unchecked

ng that value automatically when the query is executed.

● You can leave optional variable fields blank.

● Variables [External]

the field’s Required flag in the model).

● Variables that are configured with default values in the query definition pass alo

See also:

, in the BEx Query Designer documentation

● Value Help Configuration Wizard [External], in the SAP NetWeaver Visual Composer Reference Guide

● Filter a BI Query [Page 132]


December 2007

3.2.6 Filter a BI Query

Use A filter is a set of criteria that restricts the set of records returned as the result of a qufilters, you define which subset of data appears in the result set.

You can

ery. With

filter your query's result set by providing a value in a field in an input form during can also enter special selection syntax into the field.

P rYou hConne

runtime on the portal. You

re equisites ave configured a BI system on the portal using the SAP BI Connector or a BI Java ctor. See Defining Portal Systems and Aliases [External] in the SAP NetWeaver Visual

C

Proc...

e

omposer Installation & Configuration Guide.

edure 1. On the Find Data Services task panel, select the BI data service (see Find Data [Pag

63]).

Select a 2. query or query view (SAP BI systems), or cube (OLAP systems) and drag it to

4. tput port and choose Add Table View, and select the

5.

it.

Input Field Values Data Service

Selection Syntax

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.

Drag from the data service's Oufields to display in the table.

Deploy the model to the portal.

6. In runtime on the portal, enter appropriate values in the input fields and click Subm

Input Field Value Variable Field Value Supported

OLAP qudata servcreated with t

MLA or BI ODBO Connectors)

eries (from ices

he BI

[Member]_key [Member]_key Selection options type not supported

X

BI queries (from data services created with the

[Characteristic]_key [Characteristic]_ext_key All selection optionstypes suppo

SAP BI Connector)

rted

For th in Worki

e available selection options types and their exact syntax, see the Field Syntax table ng with Variables [Page 127].


December 2007

Tip: Add value help to an input field to help you determine the proper value, its

Help Configuration Wizard [External]format, and selection syntax. See Value in

ResultAfter youexecuted with lay in the table:

the SAP NetWeaver Visual Composer Reference Guide.

have configured values in the input fields and clicked Submit, your query is

the filter value you configured and the results are retrieved for disp

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 C

omposer Reference Guide.


December 2007

3.2.7 e

Use You can build l to display SAP alerts in an analytical ap the po he 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 C uration [External]

Add an Alert Data Servic

an alert data service into your modeplication. An alert data service displays all SAP alerts available in the Universal Worklist on

rtal. You display t

onfig 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 service’s 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:


December 2007

In the portal. It look

your workspace, your model is now complete and ready to be deployed tos something like this:

eploy, make sure your runtime is set to Adobe Flash format: 5. Before you d

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:


December 2007

Th alerts in your Universal Worklist on the portal, including all attributes you configured for display.

e table lists all active

Tip: You can model your applications to display ACTIVITYLINK fields in HTML

See also:

[External]

views. Drag an HTML view to the workspace, connect it to the alert table’s out port, double-click the connecting select line and map the url input field to the desired ACTIVITYLINK value.

Alert Data Service in the SAP NetWeaver Visual Composer Reference Guide.


December 2007

3.2.8 Create a Toggled View

Use ou can use a toggle button to enable the user to switch between views within a UI omponent. The toggle button label changes in order to display the component not currently

Proc... ...

1. sign board, switch to the Layout board and select the UI component (form, table or chart) that will contain the toggle button. You can create

2. Right-c

3. At the bottom of the task panel, click the Add (plus) button. The New UI Control dialog

4. Froenter acases.

5. Cli

6. Right-cli Properties from the context menu. The Control Pro f the

7. a conditional formula describing when

each label should be applied. (See Define a Dynamic Expression [Page

Ycvisible.

edure After creating your model on the De

a separate form just for this purpose (see the “Example” following).

lick the component and click the Configure button from the task-panel toolbar.

box is displayed.

m the Select control type list, choose Toggle Button and in the Field name field, n appropriate name for the button. (The Data type should be Text in most )

ck OK. The button is displayed in the layout.

ck the new button and choose perties dialog box is displayed. Note that in the General tab, the Default value o

button is true. You can change this, and also use this Boolean value to define theformula for hiding other fields.

To give the toggle button two names, according to the visibility of other components, click the Display tab and in the Label field, create

147]).

8. Click thbutton:

operties dialog box.

○ view, enter the formula in the Visibility condition field of the Configure Element task panel.

Example This example

e other fields or views that are to be toggled in conjunction with the toggle

○ 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 Pr

If you are toggling a

is based on the BanksB model created in Adding a Data Service for Choosing Banks [Page 42]. It adds a toggle button in order to enable the runtime user to switch be...

1.

2. nel to nding form called Bank Information. Place it between the Bank

tween different views of bank information.

Import the BanksB model or create it from scratch.

On the Design board, drag a Form View icon from the Compose Model task pacreate a free-staAddress and Bank Details forms, as follows:


December 2007

3. Click the Layout tab and double-click the Bank Information form to open the Configure

ent task panel.

s “Procedure”.

b. Right-click the new button and open the Control Properties dialog box.

the Default value field of the General tab, enter true.

y If formula in the text box.

ormula in conjunction with the Data Fields node to enter the following formula:

==true,'Bank Details','Bank Address')

is Bank Address.

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:

Elem

4. Create and define the toggle button as follows:

a. Create the button as described in steps 3 to 5 of the previou

c. In

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 displaan

f. Use the f

IF(@@

This formula indicates that when the toggle button (@@) is true, the button label Bank Details; when it is false, the label is

g. Click Check to ensure that the formula is valid and then click OK.


December 2007

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 double-click 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:


December 2007


December 2007

3.2.8.1 Create a Dynamic Entry List with a JDBC-Based Stored Procedure

the Entry List tab in the Control Properties dialog box, choose Dynamic from the

edure (without the

cedure from the Select data service list.

channeled

ates that no input values are required by the stored procedure.

10. rocedure are returned dynamically, you need to first

c. Click Execute. The returned results are displayed in the main pane.

d.

11. In the Ayou en under urce field from which the VALUE should be taken and the

dialog box.

12. Click Close.

7. InEntry list set of radio buttons. The Find Data Service dialog box is displayed.

8. 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 procprefix) or enter an asterisk (*).

c. Click Search and select your stored pro

9. Using the Input and Output drop-down lists, choose the ports of the data service through which the data should be

a. Input port will always be displayed as INPUT. If displayed as disabled (gray), this indic

b. Output port can be OUTPUT (usually a single record value) or RESULT (a record set, or table). Usually, you will select RESULT.

Because the fields of the stored pdisplay 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).

Click Finish. Visual Composer saves the fields of type Text string.

ssigned Value column of the Input port table, you can see the input value that tered previously in the Test Data Service dialog box. In the Output port tableit, select the so

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

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 182].


December 2007


3.2.9 Create an Entry List

Use 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 Display Text

US United States

DE Germany

GB Great Britain

NL 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.

December 2007


When creating a combo box control, if a user enters text, that text will be taken as the value.

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 146] 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

December 2007


○ 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.

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:

December 2007


The result would be a list of customers, similar to the following:

December 2007

3.2.9.1 Create a List sedProcedur

6. In the Entry List ta ies dialog box, choose DynEntry list set of rad ta Service dialog box is dis

7. Locate the stored procedure:

a. From the System drop-down list, choose the JDBC-based datthe stored procedure that you require.

b. In the Look for combo box, enter the name of the stored proceprefix) or en

c. Click Searc ed m the Selec

8. Using the Input an s, dthrough which the le

a. Input port w yed a played as dthis indicates that no input values are required by the stored p

b. Output port can be OUTPUT (usually a single record value) orecord set, or table). Usually, you will select RESULT.

9. Because the fields of the stored procedure are returned dynamically, you need to first ay the fields so that Visual oser c so:

a. Click Add F er laye

b. In the Input r va sasterisks).

c. Click Execu lts a main

d. Click Finish. Visual Composer saves the fields of type Text st

10. In the Assigned Value column of the Input port table, you can see theyou entered previously in the Test Data Service dialog box. In the Ouunder it, select the source field from which the VALUE should be takcorresponding field from which the display TEXT should be taken. Th st are the text fields t e e Test dialog box.

11. Click Close.

Dynamic Entrye

b in the Control Propertio buttons. The Find Da

with a JDBC-Ba Stored

amic from the played.

abase containing

dure (without the ter an asterisk (*).

h and select your stor

d Output drop-down list data should be channe

ill always be displa

procedure fro

choose the ports of the d

s INPUT. If dis

t data service list.

ata service

isabled (gray), rocedure.

r RESULT (a

displ Comp

ields. The Test Data S

pane at the left, ente

te. The returned resu

an store them. To do

vice dialog box is disp

lues for all required field

re displayed in the

d.

(those with

pane.

ring.

input value that tput port table

en and the s in the lie field

Data Service hat were displayed in th results pane of th

You can use JDBC-based stored pro anHelp in your model. See Adding Valu [Pa

cedures in a similar me Help to Your Model

ner to create Value ge 182].


December 2007

3.2.10 Define a s

Use A dynamic expression is e in order to generate a dy value in a property of a model ns can define conditioinitialization, calculation, validation and text manipulation. They can also beelement 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 field) that indicates how many seats remain in economy class on a flight:

“Book your flight soon! There are only "&NSTR(@Econofreeleft in economy class on this flight."

The Dynamic Expression Editor assists you in writing and validating the synexpressions. You access the editor by:

● Clicking the function (fx) icon that appears to the right of an attribute d selecting Enter formula.

● Clicking a Formul t of a field in the Control Proper ox. This enables you to define a formula that computes a new value for results returned in the function.

● Clicking a Condition button to the right of a field in the Control PropeThis is used to de l is Hid uireinformation, see C og

Dynamic Expre

a formula that you definelement. Dynamic expressio

sion

namic fieldns for field used to define

static text-display

,"")&" seats

tax of dynamic

field an

a button to the righ ties dialog bthe field based on

rties dialog box. fine when a controontrol Properties Dial

den, Disabled or ReqBox [External]

d. For more in the SAP

Composer Refere NetWeaver Visual

nce Guide.

Note that w amic e Hiddenparameter n colum an on singlecan be specified as either the Boolean true/fals r else activated by a control external to the table (rather than according to a value in anothsame table).

For examples of many commonly-used dynamic expressions, see Tables o

hen creating a dyncan operate only o

xpression for the ns, rather th

e o

option, this cells. The value

er field of the

f Functions [Page 150].

Procedure ...

1. Click one of the button s the Dynamic Expression Editorfunction (fx) icon and choose Enter formula, as appropriate. The DynEditor dialog box, named according to the property that you are defin d as follows:

s that display or click the amic Expression ing, is displaye


December 2007

t contains the

o categories

data services in r action type,

2. In the Function pane at the right, expand the node of the category thafunction that you want to use. The different functions are grouped int(nodes), including:

○ Data Fields, which contains all of the fields available from theyour model. This can be useful if, for ex nt a particulsuch as a h sent a s ry.

○ Entry Lists es le glolists.

○ All availabl ded into t TNumeric F ons, onditioScientific F

○ Operators, ll the mathem mpavailable for use in the expression.

Each function has oltip. In addition, the icon to the left of each function represents the dat n the function is evaluated, as follows:

Icon Data Type

ample, you wapecific output in a que

listed in all availab

he following categories: Time Functions, C

atical, logical, and co

a

bal static entry

ext Functions, nal Functions and

arison operators

yperlink, to repre

, which display the valu

e functions, diviunctions, Date Functiunctions.

which lists a

an explanatory toa type returned whe

Boolean Date Number Text

Time

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.


December 2007

For efunction. In this

xample, you xpand the C od ca ress the Exp

IF(test,expr1,where test is any v at c Eis the value that is RUE luetest is FALSE.

4. Use the displayed our custom expression. You caexpression by ente xt in the Expression pane, by draggingfunctions from the Function pane to the Expression pane, or by usingthe two methods.

You can use the Data Fields node to locate another field whose valuinclude in your expression. To do this, expand the node and drag therequired 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

may want to ese, the following exp

expr2) alue or expression th

returned if test is T

formula to create yring free te

onditional Functions nion is displayed in

an be evaluated to TRU, and expr2 is the va

e and use the IF ression pane:

or FALSE, expr1 that is returned if

n write the additional a combination of

e you want to field to the

Editor [Page 177].

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 [Page 32].

For examples of common expressions, see Tables of Functions [Page 150].


December 2007

3.2.10.1 Tables oThe tables in the followin t the functio reexpressions. They are arranged by type, in the ord h ssion Editor.

● Text Functions [Page

f Functions g sections lis ns that you can use in c

er that they appear in tating dynamic

e Expre

151]

● Numeric Functions [Page 160]

● Date and Time Functions [Page 166]

● Conditional Functions [Page 173]

● Scientific Functions [Page 175]

● Dynamic Expression Operators [Page 176]


December 2007

3.2.10.1

.1 Tex

Function Syntax

t Functions

Description Examples

ASC acter o

Unicode encoding.

ASC(char)

his

Returns the numericcode for the charchar, according t

ASC(‘A’) Returns the Unicode equivalent of the character; in tcase: 65

AT Returns the character at the position indicated by the number n. If n is out of range, an empty string is returned.

AT(text,pos) where pos is a numeral indicating the character position from the start of the string

6)

ter of the text

AT(Middletown,Returns the sixth characstring: e

BEGINS Checks (true or false) whether the string begins with the designated text string (pattern). The test is case-insensitive.

(text,pattern) where pattern is the text to be matched against the text of the same length at the beginning of the string

rld’)e e

r

BEGINS(‘hello world’, ‘woIndicates whether thstring begins with thstring “wo ld”; in this case, returns false

BEGINS(‘hello world’, ‘hello) This expression wouldreturn true

CAPITAL

).

CAPITAL(text)

Converts the string to sentence case (first word capitalized

CAPITAL(@COMP_NAME) Displays the string insentence case; for example: Atlas city.

CAPITALW Converts the string to title case (each main word capitalized and separated by underscores or white spaces).

CAPITALW(text) P_N

Displays the string in title case; for example: Atlas City

CAPITALW(@COMAME)

CHR Returns the character represented by the given Unicode code.

CHR(code) CHR(‘65’) Returns the character represented by the Unicode number (code), in this case: A


December 2007

COMPACT Compacts the given text by replacing

COMP

consecutive spaces with a single space, and removing leading or trailing spaces

'hello world' Removes spaces athe beginning and

.

ACT(text) COMPACT(' hello world ') ==

t

ends of the string, and replaces all groups of spaces with a single spaces; in this case, the result would be: ‘hello world’

CONTAINS Checks (true or false) whether the string contains the designated text string (pattern). The test is case-insensitive.

,

ern is to be matched the contents ing

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

CONTAINS(textpattern) where pattthe textagainst of the str

ENDS Checks (true or false) whether the string ends with the designated text string (pattern). The test is case-insensitive.

)

matched t the text of the ngth at the

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

(text,patternwhere pattern isthe text to be againssame leend of

FILL Fills a string of a given length with the specified (“pad”) characters.

pad) the

umber of rs in the

nd pad is the ter or

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****

FILL(len,where len isdesired ncharactestring acharaccharacters for filling


December 2007

LEFT/ RIGHT

Returns a substring of a specified number of characters, starting from the end of the string (RIGHT) or beginning of the string (LEFT).

t,len) t,len)

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

LEFT(texRIGHT(tex

LEN Returns the number of characters in the string.

LEN(‘hello world’) Returns the number of characters in the text string; in this case, 11

LEN(text)

LIKE Checks (true or false) whether the designated search string (pattern) matches the text string. The test is case-insensitive.

is be he

string; it may

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

(text,pattern) where pattern the search text, tomatched against ttext of 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 lower-case letters; for example: usa

UPPER(@@) Displays the string in all capital letters; for example: ATLAS


December 2007

LPAD/ RPAD/

Pads a string on the left/right (respectively)

LPAD(text,pa

ZPAD until the specified length of characters is

rings on

t only if text

is an integer.

len, d)

where len is the desired number of

rs in the d pad is the

g

LPAD(‘hello’,8,‘*’) Adds the number of specified characters

an eded to

s

uld be o

‘*

reached. ZPAD pads stthe left with zeroes to reach a specifiedlength, bu

charactestring ancharacter orcharacters for paddin

(in this caseasterisk) nereach the specified number of character(8 in this example). In this case, the following wodisplayed: ***hell

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

rs

number of characters.

number of charactefrom the beginning of the string and containing the next specified

The counting of characters begins from 0.

MID(text,start,len)

ber indicating the position at which to begin returning the characters, and len is the number of

display d string

,

ing ,

.

ION ed as

where start is the character num

characters toin the returne

MID(@SHORT_TEXT5,3) Displays a substrconsisting of the sixthseventh and eighth character of the stringFor example, DOCUMENTATwould be displayENT

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

) ated

r case. In this example, the following would be displayed: HELLO

PREF(‘hello world’,5Counts the indicnumber of characters from the start of the string and converts them to uppe


December 2007

REPLACE

ted replacement string. The Replace operation is case-sensitive.

t,patte

where pattern is the search text and repstr is the text to replace each occurrence of the pattern

abc’

and replaces

’

Replaces all occurrences of the given string (pattern) with the designa

REPLACE(texrn,repstr)

REPLACE(‘abc,’b’,’***’) Searches for each occurrence of thesearch pattern (in this case b) it with the search string (in this case ***). In this example, the following string would be returned: a***ca***c

REPLACE(‘abcabc,’bc’,’’) Would return: aa


December 2007

TRANSLATE ,

the

string. See the Text

Indicates the string parts that require translation.

TRANSLATE(text[tType]) where text is the string to be translatedand tType is(optional) type classification of the

Type Classifications [Page 158] table for the available classifications.

1"

at the

value

a

of a

e Title string

=IF(@Status==", TRANSLATE("green"), TRANSLATE("red")) Specifies thvalues 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 theof the Status field.

=(TRANSLATE("Football", "XTIT")=="Footbll") When used in the Hidden propertycontrol, hides the control for languages that translate the term

mething 'football' as soother than 'football'. XTIT is thclassification.

Do not use TRANSLATE for staticvalues (use it only fdynamic expressions) because interpretationof the TRANSLfunction ma

or

ATE

y affect runtime performance.


December 2007

TRIM/ LTRIM/ RTRIM

s

LTRIM removes the white space only from the left and RTRIM removes all the trailing spaces.

RTRIM(text)

EN

rned

VER layed

e

lo

Removes the white space from both endof the string.

TRIM(text) LTRIM(text)

TRIM(@YEAR_TO_D) Removes the white space in the retuvalue. For example, the value “ ANNUAL TURNO“ would be dispas ANNUAL TURNOVER (without the spaces at the beginning and the end).

LTRIM(‘ hello world ‘) Removes white spaconly from the left; in this case, the following would be displayed: helworld

& (Concatenate using Logical AND)

Connects two returned values in

(string)&(string)

returned

wo value

uld

order to produce a single, continuous value. NOTE that onlytwo arguments can be concatenated.

(@CITY_NAME)&(STATE_NAME) Displays thevalues of the two fields as a single value. For example, if the values DAYTON and OHIO are returned for the tfields, theDAYTON OHIO wobe displayed.


December 2007

3.2.10.1.1.1 Te atio

Following is a list of type classifications used in the TRANSLATE function. s are possible values for the tType parameter, and the display names are thappear in the translation information file. Code Display Name

xt Type Classific ns

The classificatione strings that

XACT accessibility

XALT alternativetext

XBCB breadcrumbstep

XBLI listitem

XBUT button

XCAP caption

XCEL cell

XCKL checkbox

XCOL tableColumnHeading

XCRD tabStrip

XDAT datanavigationtext

XFLD label

XFRM frame

XGLS term

XGRP grouptitle

XHED heading

XLGD legendtext

XLNK hyperlink

XLOG logentry

XLST listbox

XMEN menu

XMIT menuitem

XMSG messagetext

XRBL radio

XRMP roadMapStep

XROW tableRowHeading

XSEL selectiontext

XTBS tab

XTIT tableTitle

XTND treeNode


December 2007

XTOL quickInfo

XTXT generaltext

YACT accessibilitylong

YBLI list

YDEF definition

YDES description

YEXP explanation

YFAA faqa

YFAQ faq

YGLS glossarydefinition

YINF informationtextlong

YINS instruction

YLOG logEntrylong

YMSE errorMessage

YMSG messagetextlong

YMSI informationMessage

YMSW warningMessage

YTEC technicaltextlong

YTIC ticker

YTXT generaltextlong

ZFTX formattedtext


December 2007

3.2.10.1.2 Numeric Functions

Function Description Syntax Examples

ABS Returns the absolute value of a given number.

ABS(n) ABS(-3) Returns the value of the number without the sign. In this case, the returned valuwould be 3

e

CEIL Rounds a number rest

CEIL(n,factor)

for rounding off the number

upward to the neainteger or multiple of a defined factor.

where factor is thebasis

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

FLOAT Converts a text string to a floating-point number.

FLOAT(str)

n of the

FLOAT(‘-3.14’) Returns the digital representatiofloating-point number in the string. In this case, the returned value would be -3.14

FLOOR Rounds the given number to the highest integer that is equal to or smaller than the number.

FLOOR(n) FLOOR(3.14) Rounds the number down to the highest integer. In this case, the returned value would be 3

HEX mal number

in a text string to a decimal number.

HEX(‘100’) This expression would return would return 256

Converts a hexadeci

HEX(str) HEX(‘6EA5’) Parses a text string containing a hexadecimal number.In this case, the returned value would be 28325


December 2007

INT Converts a text strinto a integer, rounding it down to the neare

g

st whole number.

r.

ion would

INT(str) INT(‘100’) Parses a text string containing an integeIn this case, the returned value would be 100

INT(‘-3.14’) This expressreturn would return -3

LIMIT 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

value,

e,

0)

10

LIMIT(0,3,10) If n is less than thelower (first) value, returns the lower value. If n is greater than the upperreturns the upper value. Otherwise, returns n. In this casthe returned value would be 3

LIMIT(0,13,1This expression wouldreturn would return

MAX t g a

specified set of values. this case,

Returns the largesvalue amon

MAX(n1,n2) MAX(0,2,3) Displays the largest value in the set of values. In the returned value would be 3

MIN Returns the smallest MIN(n1,n2) )

ed

value in a set of values.

MIN(0,3,6Displays the smallest of the set of values. In this case, the returnvalue would be 0


December 2007

NSTR Returns a formatted string representing the defined number.

mask) is a

formatted sequence defined according to the Number

NSTR(n,where mask

Formatting Mask [Page 165] table

,’B’)

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(@@Displays or hides zero/blank values. In this case, an emptyspace or a value of 0 would not be displayed.


To concatenate two numbers, use the NSTR function with Logical AND , as in this example: NSTR(@FIRST,NORMAL)&NSTR(@SECOND,NORMAL). In this example, returned values of ‘2’ and ‘4’ would result in a value of 24 being displayed.

December 2007

NVAL Converts a text string to a numeric value where possible.

NVAL(str) NVAL(‘0xFF’) Parses a text string and returns a decimal

r, where le. In this case,

the returned value would be 255.

ression would n would return 83

‘holiday’) ession would

would return 0

numbepossib

NVAL(‘83’) This expretur

NVAL(This exprreturn

POS Convert string to a positive integer number

POS(str) ’)

integer. In this case, the returned value would be 100

POS(‘-3.14’) This expression would return would return 0

s a text

.

POS(‘100Parses a text string and returns a positive

RND Returns a random number that is greater than or equal to zero and less than or equal to the given maximum value.

RND(max) where max is the top value in the range

RND(68) Returns a random integer between 0 and the given number. In this case, a returned value might be: 7 or 34

ROUND Returns the integer value closest to the given number.

ROUND(n) 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


December 2007

SIGN Returns the sign of the given number.

SIGN(n) 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 -


December 2007

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 Description

+ Displays + for positive values and - for negative values.

- Displays a space for positive values and - for negative values.

Z s. Displays insignificant digits as zero

P Displays insignificant digits as spaces.

B value is zero, regardless of other codes. Displays a space when the

C Inserts a thousands separator into the number.

N point. If omitted, only the significant

digits are displayed.

Number of digits to display to the left of thedecimal

.m Number of digits to display to the right of the decimal point. If omitted, only the significant digits are displayed.

@r Displays numbers using radix r (2 - 36).

% Displays numbers as a percentage of 100.

$ Inserts the locale-specific currency code.

[CUR] Inserts the given currency code. The currency code must be enclosed in brackets (such as [USD] or [EUR]).

NORMAL Displays the number in standard format


December 2007

3.2.10.1.3 Date and Time Functions

Function Description Syntax s ExampleDATE Returns

specified by the given year, mvalues iformat.

DATE(year,moday)

005,4,23) ompiles the year,

y values d date.

ase, the might be

4/2005

the date

onth, and day n the default

nth, DATE(2Cmonth and dainto a formatteIn this cfollowing returned: 23/

TIME Returnsspecified by the given hour, mi sec values iformat.

TIME(hour,mic)

(14,30,45) == 14:30:45 Compiles the current

the

nd values into a atted time. In this

e, the following

5

the time

n, and n the default

n,se TIME

time according tohour, minute andsecoformcasmight be returned: 14:30:4

DADD/ TADD

Increasea date/tthe specified number of date (

dt,n,un(t,n,un

where unit is listed Tim

s/decreases ime value by

DADD(TADD

dt) units. of the items

it) it) one d in

the Date an e Units [Page 169] table

case, 10:17:22 would be converted to

TADD(@CREATE,13,’H’) Adds 13 hours to

E_TIM

the is

23:17:22 (default HH:NN:SS format).

value returned. In th

DGET TGET

time (t). of the items listed in the Date and Time

Returns the numeric value of the selected part of a date (dt) or

DGET(dt,part) TGET(t,part) where part is one

Parts [Page 170] table

(@CREATE_DAT) s 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

DGETE,’M’Return


December 2007

DSTR/ TSTR

Converts a date or time object format to a

DSTR (dt,DSTR

defined text string.

mask) (t,mask)

where mask is devised from the set f special ch

sks

DSTR(@DATE_FIELD,’MON DD, YYYY’)Converts the date value returned to a string date format. In this case, .05.2002 would

0, 2002

EATE_DATE,13,’D’),’XML_DATE’)

uld

2002-06-12

olisted in the

aracters Date and

Time Ma table 30be converted to May 3

DSTR(DADD(@CR

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 wobe converted to:

DSUB/ TSUB

Returns the difference between two dates, in the specified date unit.

DSUB(dt1,unit) TSUB (t1,where unithe items lisDate and Ti

dt2,

t2,unit)t is one of ted in the me Units

[Page 169]

o here,

values of table

DSUB(NOW(),@CREATE_DATE,’D’) Calculates the difference in the twdates, specified in days. In this case,

16.09.2007 (today) and 05.8.2007 for these two fields would return 39

DVAL/ TVAL

Converts a date or time string representation to a standard date/time object format.

DVAL(str,TVAL(str,where seq

● EUR (DD/HH:N

●

● XML MM-DDTH

● FREE (free format)

converted to the USA at:

seq) seq) is:

MM/YYYY N:SS)

DVAL(@TIME_FIELD,USA) Converts the datestring returned to a standard format. In this case, May 30, 2002 would be

USA(MM/HH:N

DD/YYYY N:SS)

(YYYY-

H:NN:SS)

standard date form05/30/2002


December 2007

NOW/ TNOW

urr time.

)

W() nt

Returns the cdate or

ent NOW() NOW(Returns the current calendar date, such as: 27/06/2006 TNOReturns the curretime, such as: 08:40:10


December 2007

3.2.10.1.3.1 Date and Time Units

Code Date/Time Unit onds Millisec

Z Milliseconds 1ms

S Seconds 1,000 ms

N Minutes ms60,000

H Hours 000 ms3,600,

D s Day 86,400,000 ms

M Months 2,592,000,000 ms

Q 7,776,000,000 msQuarters

Y Years 31,536,000,000 ms

C Centuries 0,000 ms3,153,600,.00


December 2007

3.2.10.1.3.2 Date and Time Parts

Part

Code Date/Time

D Da as 1-31 ys

DD ysDa as 01-31

DAY aysD as Sun-Sat

M Months as 1-12

MM Months as 01-12

MON Months as Jan-Dec

Y Years as 0-99

YY Years as 00-99

YYYY Years as 1900-9999

MS Milliseconds as 000-999

SS Seconds as 00-59

NN Minutes as 00-59

H rHou s as 0-23

HH Hours as 00-23

H12 Hours as 0-12

HH12 Hours as 00-12

AM|PM 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).


December 2007

3.2.10.1.3.3 Date and Time Masks The date/time formatting mask uses the following syntax:

[date-part | embedded-chars]* | special-format

Mask Description

da e te-part Listed in the Date and Time Units [Pag 169] table

embedded-chars Character codes other than those listed in the Date and Time Units [Page 169] and the Date and Time Parts [Page 170] tables

special g -format Listed in the Special Date and Time FormattinCodes [Page 172] table

To insert codes that are reserved as date-part codes, you can use HTML code (for example, you might use D for ‘D’).


December 2007

3.2.10.1.3.4 Special Date and Time Formatting Codes

Sample Result

Code Format

DA 31/01/2001 TE DD/MM/YYYY

SHORT_DATE D/M/Y 31/1/1

LONG_DATE Long date format Wed Jan 31 2001

XML_DATE YYYY-MM-DD 2001-01-31

LOCA Jan 31, 2001 LE_DATE Local date format

TI 02:39:40 ME HH:NN:SS

SHORT_TIME H:NN 2:39

LONG 0 _TIME Long time format 02:39:40 UTC+020

XML_TIME THH:NN:SS 02:39:40

LOCAL_TIME Local time format 2:39:40

DATE S 31/01/2001 02:39:40 TIME DD/MM/YYYY HH:NN:S

SHORT_DATETIME D/M/Y H:NN 31/1/1 2:39

LONG_DATETIME Long date/time format Wed Jan 31 2001 02:39:40 UTC+0200

XML_DATETIME YYYY-MM-DDTHH:NN:SS 2001-01-31T02:39:40

LOCALE_DATETIME Local date/time format 2:39:40, Jan 31, 2001

Any arbitrary date/time format can be defined using sequences of DATE_PARTS, listed in the Date and Time Parts [Page 170] table.


December 2007

3.2.10.1.4 Conditional Functions

Function Description Syntax Examples BOOL Evaluates a string with a

logical value (ignoring cas

BOOL(value) BOOL('YES') This expression would return

e) and returns true when the string equals

”, “T”, “yes” or “Y”, or ontains a non-zero

true BOOL('NO') This expression would return false

rue

“trueif it cnumber. Otherwise, it returns

BOOL(1) This expression would return tfalse

IF IF(text,expr1 IF(@NET_PRICE>1000,’Expens

TRUE

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

Checks whether a specified condition is met. If it is, returns the first specified value; otherwise, returns the

, expr2)

ive’,’Cheap’) If the expression in the field is

(the value is greater than

second specified value. 1000), the value Expensive is returned. If the expression is

_CTRY==’US’,United States’, IF(BANK_CTRY==’GB’,’England’,IF(@BANK_ 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

ISNULL Returns TRUE if a reference is to an empty, undefined or null cell,

wise, returns FALSE

ISNULL(value) IF(ISNULL(@@),’NO FAX NUMBER’, @@) If the value of the current cell is empty, the value returned is NO FAX NUMBER; otherwise, the

ned.

other

value of the current cell is retur


December 2007

N

given set of values. If all

n-empty string in the set of values; in this case: a

In this case, the first string is empty, so that the value of the second item is returned: b

VL Returns the value of the first non-empty or undefined string in a

NVL(v1,v2) NVL('a', 'b')

Returns the value of the first no

argument items are empty, returns an empty string.

NVL('', 'b')


December 2007

3.2.10.1.5 Scientific Functions

Function Description Syntax Examples

ACOS Returns the arccosine of n. The arccosine is the angle, in radians, in the range [0...π], whose cosine is n.

ACOS(n) ACOS(0.540302306) This expression would return would return: 1

ASIN Returns the arcsine, or inverse sine, of n.. The arcsine is the angle, in radians, in the range - [-π/2...π/2], whose sine is n.

ASIN(n) COS(1) This expression would return would return: 0.540302306

ATAN Returns the arctangent of n. The arctangent is the angle, in radians, in the range [-π/2...π/2], whose tangent is n.

ATAN(n) ATAN(1.557407725) This expression would return would return: 1

ATAN2 Returns the arctangent of the specified (x, y) coordinates, in radians, in the range (-π/2...π/2].

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

COS Returns the cosine of n, where n is an angle in radians.

COS(angle) COS(1) This expression would return would return: 0.540302306

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

EXP(n) EXP(2.5) This expression would return would return: 12.18249396

LOGN Returns the natural logarithm n.

LOGN(n) LOGN(12.18249396) This expression would return would return: 2.5

POW Returns the result of a number n raised to the power of p.

POW(n,p) Where n is the base number and p is the power

POW(2,10) == 1024 This expression would return would return: 1024

SIN Returns the sine of an angle, in radians.

SIN(angle) SIN(1) This expression would return would return: 0.841470985

SQ Returns the square value of n.

SQ(n) SQ(6) This expression would return would return: 36

SQRT Returns the square root of n. SQRT(n) SQRT(256) This expression would return would return: 16

TAN Returns the tangent of an angle, in radians.

TAN(angle) TAN(1) This expression would return would return: 1.557407725


December 2007

3.2.10.1.6 Dynamic Expression Operato rs

Type Function

Mathematical operators + Addition of two numeric values - Subtraction of a numeric value * Multiplication of two numeric values / Division of two numeric values

Lo es && Logical AND of two Boolean values

gical operators AND Logical AND of two Boolean valu

││ Logical OR of two Boolean values OR Logical OR of two Boolean values NOT Logical NOT of a Boolean value ! Logical NOT of a Boolean value

Other<= Less than or equal to (any value)

o (any value)

% Modulus arithmetic of two numeric values

operators < Less than (any value)

> Greater than (any value) >= Greater than or equal to (any value) == Equal to (any value) != Not equal t

<> Not equal to (any value)


December 2007

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 s

ere are data type mismatches, the Dynamic Expression Editor implicitly s where possible. For example, when it expects data of type String, but

the expression and generates a tion (or else accept the implicit

conversion). You can choose to proceed with the defined expression or you can modify

e Date ean – the editor generates an error message. You can choose to proceed

ed expression, or you can modify it.

yntax.

● When thconverts typethe validation result is Boolean, the editor confirmswarning that suggests that you use a different func

it.

● If the type conversion is problematic – such as attempting to convert data of typto type Boolwith the defin


December 2007

3.2.11 Create Value Help Value help, also known as input help, selection help, or F4 help, is the offering, typically in a

dialog box, of possible valid values for an input field. Visual Composer includes

signing your model to, for example, supply valid values conjunction with the Entry List function described in

Cre

pop-upfunctionality 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 deto a formula. This is provided in

ate an Entry List [Page 142].

See Creating a Value Help Entry List [Page 179]

● 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

the

See

Value Help in Your Model (Run-time Value Help)

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 createsbutton and an embedded iView that models the value help functionality.

Adding Value Help to Your Model [Page 182]


December 2007

3.2.11.1

UYou c ple, to supply design these h the Entry List function, described in Create an Entry

Creating a Value Help Entry List

se an create value help entry lists to help you while designing your model – for exam valid values to a formula – or to populate controls such as drop-down lists. You types of lists in conjunction wit

List [Page 142].

edure Proc...

1. Choose ols → Entry List Manager. The Entry List Manager dialog box is displayed.

2. At the Value

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

To

bottom left, click Add and choose Value Help List from the drop-down list. The Help wizard is displayed.

63],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):

5.

eview Value Help List screen, click Browse to retrieve available values. Up to 1000 records are returned. You can use the Look for dropdown list to search

rict your search.

Click Next.

6. On the Rthe first 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 rest


December 2007

7. From the Available Values list, chose the values you want to appear in the entryclick (right arrow) to transfer them to the Selected Values list

list and in the right pane. Click

(left arrow) to remove selected values from the list:

8. When your list is complete, click Finish. The values are transferred to the Entry List

Manager, as in the following example:


December 2007

Result The entry list that you created is now available as a global entry list, accessible from the Entry

in the Control Properties dialog box when defining various types of lists (see Create List taban Entry List [Page 142]). 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 boxes, w

also use a value help entry list to populate controls such as drop-down lists or list hich might look something like this in runtime:

See also:

List [External]Value Help in the SAP NetWeaver Visual Composer Reference Guide.


December 2007

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 63], which d scribes the similar Find Data task panel). In typical cases, this will be the data service of the input

ervice.

e

field itself, but you could use values from any data s

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 Cr mic Entry List with a JDBC-based Stored Procedure [Page eate a Dyna 146].

4. In the PDimenNext.

ort for the output value, configure which type

Result A Valu the bu n

roperties section, select whether to retrieve values for the list from the sion Table or Master Data Table from the Get data from drop-down list. Click

5. Configure value help parameters on the Specify Data Service Runtime Parametersscreen:

a. In the Input section, select the port for the input value, pre-configure values forthe list if desired, and configure search functionality if desired.

b. In the Output section, select the por types of fields to display, and select the key field to deliver to the query.

6. Click Finish.

e Help button is created next to the input field on the form. When the user presses tto , a dialog box appears that lists valid values for the field:


December 2007

Example See Integrating Value Help into Your Model [Page 216].

See also:

Value Help Configuration Wizard [External] in the SAP NetWeaver Visual Composer Reference Guide.


December 2007

3.2.12 Create a Chart

Use 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

e charts are linked to the data generated from the data service and are self is modified.

one e so

trends in the data. Thupdated as the data it

There are two kinds of chart modes:

● A linked chart receives data directly from the data service, displaying the data inof the chart forms. The output can be subsequently linked to another data servicthat 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:

Procedure ... ...

1. Prepare and connect the main components of your iViews: the data service(s), the input components and the output views as needed.


December 2007

2. Drag ut from the output port of the daCha View. The chart icon is displaye

o ta service or output component and choose Add rt d.

chart as follows:

cking the line and mapping the s in the Configure Element task panel.

reate a Select event on this link in order to activate the data service n is made in the chart.

If the chart data is to flow into another UI component, drag out from the out port hart and create the link to the other component.

chart icon to configure it in the Configure Element task panel.

type, along with type-specific details for specifying the graphical look of the data art. See Chart View [External]

3. Link the

○ 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. Map the fields of the link by double-clifield

ii. Ceach time a selectio

○ of the c

4. Double-click the

5. In the Chart view group of attributes, you can rename the chart and select the chart

presented in the ch in the SAP NetWeaver Visual ce Guide.

ter the display

Composer Referen

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, enname 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 thetable:

7. If you want 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.

8. Fill in the other attributes as needed. Full explanations of all of the attributes are Chart View [External]provided in the section of the SAP NetWeaver Visual Composer

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

Reference Guide.


December 2007

can see thaPrice and Dl

t there are two data series – Net Price and Quantity – taken from the Net v Qty columns in the table, respectively.

rt placeholder to indicate the location and size

EThe e d chart at the beginning of this section is displayed in runtime as fo

10. Click the Layout tab and lay out the chaof the tab. Charts are displayed only in runtime.

xample xample of the linke

llows:

egory and the data series data – isIn this case, the data from the chart – Material cat

hanneled into a and the results are

c data service displayed in a form.


December 2007

3.2.13 Create a Toolbar

Use 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.

Procedu... ...

1. In the Layout board (recommended), right-click the edge of the UI component for which create the toolbar and choose Create Toolbar from the context menu. The lbar Buttons dialog box is displayed.

er

3. In su

rom the System action drop-down menu.

ecifying the name of

No action indicates that nothing happens when the user presses the button.

4. From button res nent in which the event should be activated (if any).

5. If n uttons by repeating steps 2 through 4.

7. lbar.

8. 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.

Result At runtime, a toolbar of buttons is displayed at the top of the UI component. Each button initiates a different action.

Example This toolbar was created for an output grid, enabling the user to add and delete lines, and scroll through the list of records:

re

you want toCreate Too

2. At the bottom left, click the Add (plus) button and in the Button text field at the top, enta name for the button.

the Define Action section, define the type of action and a name for the event (the bsequent controls change accordingly):

○ A System action is a predefined event, such as closing a window or inserting a row. You select the specific action f

○ A Custom action is a specialized action that you define, spthe event in the Custom action field.

○ the Apply to drop-down list, select either Self (the component in which the

ides) another UI compo

eeded, add other b

6. Click OK.

You may wish to change the order of the buttons in the layout once you have finished defining the too


December 2007

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

...

1. Cre

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.

ate the BanksA iView described in Adding a Data Service for Choosing Banks [Page 42].


December 2007

2. On ar from th

3. Add a

4. Define link from the System action drop-down list.

yperlink address field. The Hyperlink ression Editor) dialog box is displayed.

e the URL for a browser search – such as in Google – first run the search in a

ession types and double-

the Layout board, right-click the Bank Address Form and choose Create Toolbe context menu. The Create Toolbar Buttons dialog box is displayed.

button and name it Bank Info.

a System action, choosing Hyper

5. Click the Formula button to the right of the Haddress (Exp

6. To creatseparate 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 exprclick 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:

K and click OK in the Create Toolbar Buttons dialog box. 9. Click O

10. Your toolbar should look similar to the following:


December 2007

3.2.14

UYou c

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 isplayed.

2. Click the Add (plus) button at the bottom right and from the list in the New UI Control choose Image. In the Field name field, enter a name for the image and click OK.

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 define how the image is displayed in the defined area: Original size or Fit size.

9. Click Close and adjust the image in the layout as necessary.

Define an Image Control

se an use an Image control to display an image in a UI component.

d

box,

3. Right-click the border of the new image and choose Properties from the context menu. The Control Properties dialog box is displayed.

4.


December 2007

3.2.15 Use the Style Editor

Use You can use the Style Editor – accessed through the Control Properties dialog box – to define

tyles tab.

the Condition cell, define the condition for when the style is used, by entering true or gle style.

6. Repeat steps 3 to 5 to define the other styles.

Example The following example is taken from the SalesordersB example in Adding a Second Data

the look and size of the text in the following controls:

● Expression box

● Progress bar

● Ticker

Prerequisites The Adobe Flex technology environment 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 S

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 asneeded. The results are displayed on the text in the Style cell.

5. Infalse (for Boolean values), defining a formula, or leaving it as the sin

7. Click Close.

Service [Page 32]. It defines a font and color of the cells according to the dynamic expression defined for the field.


December 2007

3.2.16

Use Y u can print a document containin

PrerequiYour model is displaye gn board.

ProceduTo print the diagram currently displayed: ...

1. n of the diagram is generated and

2. From the dialog-box menu, choose File → Print. The standard Windows Print dialog box is displayed.

o print the model documentation and diagrams:

1. Choose Tools → Documentation Wizard. The Documentation Wizard is displayed.

2. In the Source Diagram field, choose the model level or iView whose documentation you want to print.

3. From the Print Options list, choose which items to print:

Option Description

Print the Model

ou can print the diagram of the model level currently displayed or yog selected levels, together with notes, subdiagrams and other documentation.

sites d on the Desi

re

Choose Model → Print. A “printer-friendly” versiodisplayed.

3. Click Print.

T... ...

Print drawings Prints the diagram displayed on the Design board.

Print definitions 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.

Print statistics 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.

Print index Adds an alphabetized index of model elements to the document.

Print sub-diagrams Prints all diagrams of component levels below that displayed on the Design board.


December 2007

If none of these options are selected, the printed documentation includes a heading per mo a table of contents, and a des tions in the Configure

e Comments field.)

save a permanent copy of the document, choose File → Save As in the new

print the document, choose File → Print in the new browser window.

data

del, module, page, and iView node in the model hierarchy,cription under each heading. (You write the object descrip

Element task panel, in th

4. Click Print. The document is displayed in a new browser window.

○ Tobrowser window. The file is saved in HTML format.

○ To

3.2.17 Manage Your Portal System Aliases

Use In large models, you may want to review the systems from which you have chosen your 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

he same

Alias: alias defined for the system in the System Landscape editor of the portal

d in: name of the iView containing a data service within the named system

d by: name of the data service

tem Type: type of system containing the data service

boxes of the aliases you want to change, or use the Select button to:

click Replace. The Choose Alias dialog box ld, enter the alias of a different system defined in the portal

when a model is ported between servers that have different aliases for tback-end systems.


1. Choose Tools → Alias Manager. The System Alias Manager dialog box is displayed, listing the following information:

○

○ Use

○ Use

○ Sys

2. Select the check

○ 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, is displayed. In the empty fieand click OK.


December 2007

3.2.18 Stor a Da for

Use Data store is a cen ntainer in por r use.

You create one data store per iView. To do so, you can place a sin re instance in the model, or, for c purpose place multiple data store elements, all pointing to the sam

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 mponent whose data is to be

n or 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 in the first row of the Assigned Value column and 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.

e Data in ta Store Later Use

tral data co which you tem arily store data for late

gle data stoonvenience s, you cane data store.

...

1. In your model, drag out from the out port of the UI costored, 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.

5. Click the connecting line to the data store, and name the event according to the actiothat should be performed f


December 2007

e. In the list of functions in the right pane, expand the Data Store group, and field whose

lick OK to close the dialog box.

n the Control Properties dialog box.

del and add to it a data store. We will then s table.

aterials transferred to the cart will be concatenated into one string divided by semicolons.

odel or create it from scratch.

t of Sales Orders Grid and choose Data

virtual field for the data store, named

4. necting line to the data store, and name the event Add_to_Cart.

5. create an expression that 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.

double-click the name of the field in the data store. This is thevalues will be transferred to the form.

f. C

11. Click OK i

Example In this example we will use the Salesorders A mocreate a form called “Cart” into which users can transfer materials from the SalesorderM...

1. Import the Salesorders A m

2. On the Design board, drag out from the out porStore from the context menu.

3. In the Configure Element task panel, create a Items.

Click the con

In the first row of the Assigned Value column of the table, maps values from the table to the data store.


December 2007

Your model should look similar to the following:

Rearrange the layout, placing the cart along the top of the iView (you can use 11. the

h of the

1 ime results should be similar to the following:

Resize to Fit Window option in the context menu to stretch it along the widtiView). Place the Sales Orders Grid to the right of the Input Form.

2. Deploy. The runt

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.


December 2007

3.2.19 Display Data on a Calendar

endar called a time period. Each time period can be highlighted on rding to a defined legend. The legend can come from the back-end system,

view displaying time periods:

Use The Calendar view represents date data by mapping it onto a calendar display.

Each record coming from the back-end system has a start and end date, and is mapped onto a series of dates in the calthe calendar accoor can be defined locally in Storyboard.

The following is an example of the Calendar

A qview d d for the months of F arch to May.

Hde fore mthe pa

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:

ll re uired data can be retrieved from the back-end system in one operation. The Calendar isplay subsets of this data. In the previous example, data is displaye

ebruary to April. The user can page to the next subset to display data for M

owever, in many cases the back-end system contains a large number of records for the fined time range, the retrieval of which may slow down performance. You can there

odel your iView so that only subsets of data are retrieved at a time, and with each click of ging ( ) button, the system is re-accessed and a new subset is retrieved.


December 2007

2. On the Design board, double-click the capanel is displayed, showing the properties of the cal

lendar control. The Configure Element task endar. In the No. of months field,

enter 3.

port of the data service, map a start date that defines the first record to be

rt drop-down list, choose the field that was mapped to the .

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

task panel.

rvice to the fields that are output from the form to the Start field and

DD(#ID[ACA1SN]@StartFrom,3,’M’) to the End field.

3. On the input 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. Double-click the calendar control, and in the Configure Element task panel, configure the calendar as follows:

a. From the Calendar range drop-down list, choose Bound.

b. From the Calendar staAbsence 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

Element

c. Map the input fields of the data seas follows: assign @ID[ACA1SN]@StartFrom@DA


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.


December 2007

3.3 Connectivity and Interoperability ction briefly describes:

nd

Connectivity with Back-End Systems Visual Comp defined in the system landscape. This connection enables you to import into your

odel the relevant function modules on which you want to base your iViews. The imported

nd application. However, if the customer installation of the back-end application ed function modules, you will need to import the data services in the ment, in order to retrieve the customized functions.

Mconne ically as part of the connector framework installed with the portal. The Sco le, D

BI con parately in the portal, can be used to access a range of different da ity is based on defininco

● 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.

Visual Composer Connectivity

Connector Back End Data Service Comments

This se

● The means of connecting Visual Composer Storyboard to the required back-esystems

● The technology environments to which models composed in Storyboard can be deployed

oser provides tools that let you connect via the portal to back-end applications portal

mfunction 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-eincludes customizcustomer environ

ost connections to back-end systems are accomplished using the SAP and JDBC ctors deployed automat

AP connector provides access to R/3 and BW systems, while the JDBC nnector provides access to a wide range of databases, including Microsoft SQL, Orac

B2 and others.

nectors, installed seta, including multidimensional cubes, relational tables and queries. Connectiv

g a system in the portal landscape. You may define systems for the following nnections:

● BI XMLA

SAP_Connector R/3 (BW)

BAPIs Standard SAP

SAP_JDBC SQL, Oracle, DB2

Stored procedures

Part of connector framework

BI BI_XMLA MS Analysis Cubes (multi-


December 2007

Connector Back End Data Service Comments BW dimensional)

BI_ODBO Local cube file

BI_JDBC SQL, Oracle, DB2

Tables (relational)

BI_SAPQ R/3, BW

SAP_Connector BW Queries Part of portal connector framework

Deployment to Runtime Environments Yincluddeploye t all components and controls are fully su

Visual Comp ts a proprietary XML-based Visual Composer Language (VCL) as its sou ompiled inca

ou can deploy the models you create in Visual Composer to different technology engines, ing Web Dynpro and Adobe Flex (Flash environment). The same model can be

d to more than one environment, although nopported in each.

oser implemenrce code for creating the models. Only at deployment is the model actually c

to the executable code required by the select UI technology. The result is the one model n essentially “run anywhere.”


December 2007

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 202]

● Working with Stored Procedures [Page 203]

● Unlocking Models [Page 204]

● Creating a Web Service System [Page 205]

● Creating a Multi-Selection Table [Page 206]


December 2007

3.4.1 Defining Model-Profile Properties

Use You can define properties that properties may include attribute

provide information about your model file. These user-defined s such as Created by, Group, Language, Domain and others.

In ed.

P... ...

model, click the Configure button in the anel is displayed, with a table of of the properties – such as

Language, for example – may already have default values assigned to them.

ange existing ones as needed.

3. To add a value:

(plus) button at the bottom right. The Model Properties dialog box

c. In the Value field, enter the value of the property.

. The newly-defined property is displayed in the task-panel table.

addition, you can add properties as need

rocedure 1. On the Design board, at the top level of your

task-panel toolbar. The Configure Element task pproperties and their values at the bottom. Certain

2. View the properties and enter values, or ch

a. Click the Addis displayed.

b. From the drop-down list in the Name field, choose the property that you want to add to the profile.

d. Click OK


December 2007

3.4.2 Working with Stored Procedures

Use 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 63].

When you browse to the location of your stored procedures in the Find Data

n ed

ck-end system. To correct this, access the source system,

Note the names of the fields (columns) and close the Test Data Service dialog box.

4. On either the connec click th u require

Services task panel, certain items in the list may be displayed in red. This is aindication that the names of those procedures include characters not supportby the connected bacopy the procedure and rename it with standard characters.

Be aware that because the output of stored procedures is dynamic, the output table fields arenot 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.

Design board or the Layout board, double-click the form or table ted to the output of the stored procedure. In the Configure Element task panel,e Add (plus) button at the bottom right and manually add the fields that yo.


December 2007

3.4.3 Unlocking Models

UModelsimultop s del to open it in read-only mode for viean it be modifi k only those models in his/her own workspace, us

The V inistrator manages the network of public and private files on the Visual Compose server, unlocking model files that may become locked (files left open but not updated). For more informUnlocking Mo

se s created in Visual Composer can be modified by more than one user, although not aneously. Models in client-workspace (MyModels) folders are locked when the user

en it for editing, allowing other users who have access to the mowing only. A model currently being modified by one user can be viewed by

other user in read-only mode. Only after the first user saves and closes the model caned by another user. Each user can unloc

ing the Unlock Models function.

isual Composer admr

ation about unlocking models on the Visual Composer server, see dels on the Server [External] in the Administration of SAP NetWeaver Visual ide. Composer gu

re

3. Click Unlock. The model can now be opened in Edit mode.

Prerequisites All models must be closed in your Storyboard.

Procedu... ...

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.

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.


December 2007

3.4.4 Creating a Web Service System

Use 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.


December 2007

3.4.5 Creating a Multi-Selection Table

Use 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

PrerequiThe data ser

election mode drop-down list, choose Multiple. This will enable users to iple rows.

e line connecting the output port of the table and the data service.

panel, choose

lected data rows transfers only the table rows that have been selected

x is displayed.

nd define should be

as the event defined for the connecting line. (For more information

multi-selection table.

sites vice 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 Sselect mult

3. Select th

4. From the Mapping scope drop-down list in the Configure Element taskone of the following:

○ Se

○ 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 bo

b. Create a button named logically – such as Submit Selected Rows – athe action that transfers the table rows to the data service. The actionthe same about creating buttons, see Create a Toolbar [Page 187]). 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.

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:

However, for multi-selection tables it is recommended to create a button.

c. Click OK.


December 2007


December 2007

3.5 Application Adaptation and Distribution

his section include:

● Deploying to the Portal [Page

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 t

208]

Pr

● Preparing Portal Themes for Flex Controls

tion Life Cycle Management [Page

● eparing iViews for Portal Translation

● Applica 209]

3.5.1 Deploying to the Portal

Y ich you are connected. Model ges, and are stored in the Visual Composer folder in the P

Prereq● To dep C role.

● To deploy to a production portal, you have been assigned an Administrator role.

● You ha he Visual Composer files. To do

...

b. l Composer files, such

ProceT mpiling required.

Purpose ou can deploy models created in Visual Composer to the portal to wh

s are deployed as PAR packaortal Content Directory (PCD).

uisites loy to a development or test portal, you have been assigned a V

ve defined the target location in the PCD for storing tthis:

a. In Storyboard, choose Tools → Options.

In the Options dialog box, click the Compiler tab and in the Portal deployment folder field, enter the name of the PCD location for Visuaas: pcd:portal_content/com.sap.gm.cnt/vcmodels

ss Flow he process of deploying to the portal is very direct, with no manual coding or co

Follow the procedure outlined in Deploy the Model [Page 79]. The model is cally compiled and packaged into a standard PAR file in the portal, where it is storeautomati d

in the PCD.

ResulYou can access the deployed files in the portal by choosing Content Administration → Portal

d in the PCD hierarchy, locating the Visual Composer folder.

t

Content an


December 2007

3.5.2 Preparing iViews for Portal Translation

Yoportal are bundled as Portal Archive (PAR) packages and stored in the portal in the Visual Composer folder of the Portal CoPrereq

Use u can translate the text strings of a deployed Visual Composer model using the standard

translation worklist mechanism. When models are deployed, they

ntent Directory (PCD). By setting the proper translation options in Visual Composer (see uisites following), two translation files are created when you deploy (and automatically

compile) the

● ion.properties: a Visual Composer translation file that contains all the string identifiers (see Text Type Classifications [Page

model:

localizat158]) and raw text strings

from the model

lation worklist file, including the portal UI-● package_lang.info: a portal-like transstring 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.

) in the model – such as field labels, button labels and to . However, dynamic text – such as field values – cannot be entered. Dynamic expressions and formulas containing strings can be de a special TRANSLATE function cod

All standard plain texts (“static” valuesoltips – are entered automatically into the translation lists

entered in the translation lists as long as they inclue.

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 151].

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


December 2007

Procedure To prepare text within a formula (dynamic expression) for translation:

ight of the field (in the Configure Element task panel or in the Control Properties

TE (at the bottom of the list).

ses after TRANSLATE, enter the text and the type of UI-string de.

...

...

1. To the rdialog 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 TRANSLA

4. In the parentheclassification co

The following is an example of defining a formula that includes a dynamic fi(BANK_CTRY) and static text for translation.

eld

For mo nction and the possible values for the UI-string classification code, see Text Functions [Page

re information about the TRANSLATE fu151] and Text Type Classifications [Page

158].

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 pr s: evious example would be listed in the package_lang.info file as follow


December 2007

For detailComposer, s poser Model - Part 1

ed information about translating primary and nested iViews modeled in Visual ee How to Translate a Visual Com (a

Visual Composeccessed through the

r page of SDN).


December 2007

3.5.3

Use omposer applications that are deployed to Adobe Flex runtime, you can define

Preparing Portal Themes for Flex Controls

For Visual Cthe 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: ... ...

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]

1. Choose System Administration → Portal Display → Theme Editor.

● 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.


December 2007

3.5.4 Application Life Cycle Management In this version of Visual Composer, there is no NetWeaver Development Infrastructure

integration, and therefore standard versioning and other life-cycle management isms are not yet available. However, the following functionality can assist you in

g a Model [Page

(NWDI)mechanbacking up, adapting and redeploying your models and the generated content:

● Model export and import (see Importin 22] and Exporting a Model [Page 21]).

● Save as (see Saving a Model [Page 20]).

● Redeploy translation (see Redeploying Translations [External] in the Administration of SAP NetWeaver Visual Composer Guide). To use this option, you must first open

in the Portal Content Catalog using the Open in Storyboard option.

ntent and models from a development portal to a production

w the standard portal procedures outlined in

the model

● Generated content transport:

To transfer generated coportal, or from one production portal to another, use the standard portal transport methods.

To create the transport package, folloPackaging Portal Transport Archives [External] in the Portal Administration Guide.


December 2007

4When you deOnce youchanges.

4.1 Logging and Tracing

Purpose You can use the Co Storyboard de ay error and trace logs.

Process Select the lev...

1. Ch

2. Click th

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 re d this se tuation has caused fatal termination.

This level displays

○ E a n error that has occurred, b t fulfill ue to the error. This level displays nd fatal messages.

○ rator.

text describing that actions that have been performed.

○ 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 A r 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.

Ensuring Quality ploy your model, you can run it in the portal directly from the Deploy task panel.

test its performance, you can return to the Storyboard and make any required

nsole at the bottom of the sktop to displ

Flow el of the logs as follows:

oose Tools → Options. The Options dialog box is displayed.

e Administration tab.

cover an vere si

only fatal errors.

rror indicates th t the application can recover from aut it canno the required task d

errors, warnings a

Warning indicates that an anomaly has occurred. The application can recover and fulfill the required task but it requires attention from a developer or opeThis level displays warnings and fatal error messages.

○ Info isThis level includes all levels of log messages.

cco ding to the selections


December 2007

5 Reference This section contains the following:

● A link to the Visual Composer Reference Guide [External], where you can find detailed

Step-by-step Advanced Tutorials [Page

descriptions of all components of Visual Composer Storyboard.

● 215] that will help you exercise and improve

● A Checklist [Page

your knowledge of Visual Composer.

238]to ensure that you are ready to begin working with Visual Composer.

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 [Page 216]

● Creating an Analytics Application [Page 226]

● Integrating Web Services in your Model [Page 233]


December 2007

5.1.1 Integrating Value Help into Your Model

ose

vides value help by displaying an additional dialog box that lists all rganization field. This helps the user select the right value to

access to an SAP BI system (NetWeaver 2004 SP Stack 14 or greater), and red to connect via the SAP BI Connector in the portal landscape. See

PurpIn 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 provalid values for the sales osubmit.

Prerequisites ● You have

it is configuDefining Portal Systems and Aliases [External] in the SComposer Installation & Configuration Guide.

AP NetWeaver Visual

● ssary 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_Q009).

●

Process Flow You build the

● Bu

The nece

You have been mapped to a user of this BI system.

iView in three stages:

ild the query, table, and input form: Configuring the Main Model Elements [Page 217]

● Cr r the input form and configure the value help it will evoke: Adding eate the button foand Configuring Value Help [Page 219]

● Fine-tune the layout of the input form and the value hthe model:

elp dialog box itself, and deploy Fine-Tuning and Deployment [Page 222]

ResultIn this examp ncluding:

● Integrate a query bas

● Ad

● Config

● Config ox

● Deplo

See also:

Value Help Configuration Wizard [External]

le, you learn to perform a number of basic tasks of Visual Composer, i

ed on an SAP BI data service into your model

d an input form to the query, and output the results into a table

● Add a button to the input form that provides value help

ure the type of value help and the values that will appear

ure the layout of the value help dialog b

y to Adobe Flash format

in the SAP NetWeaver Visual Composer Reference Guide.


December 2007

5.1.1.1 Configuring the Main Model Elements

Use 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 [Page 216]

Procedure ...

1. Create

2. Create el task panel) and call it O

3. Integra

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.

c. In t Q 0D_SD_C03_Q009, and clic

d. Sethe workspa

The metad ta

the model and name it appropriately, such as ValueHelp.

an iView (dragging the iView icon from the Compose Modrder and Sales Values: Select Sales Organization. Drill down into the iView.

te the query into your model:

From the Look for drop-down list, select Look for a query.

he uery field, enter the technical name of the query: k Search.

lect the query Order and sales values (0D_SD_C03_Q009) and drag it onto ce.

a 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:

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,

a. Drag from query's Input

so double-click the input form to display the Configure Element task panel. Inthe first column of the table at the bottom, click the checkmarks to deselect allfields except Sales_organization and SUBMIT:


December 2007

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.

You have created an iView that outputs the results of a BI query into a table, and you have ttached an input form in which the user can specify the sales organization. The model should ok similar to the following:

6. Save the model.

Result

alo

You are now ready to proceed to Adding and Configuring Value Help [Page 219].


December 2007

5.1.1.2 Adding and Configuring Value Help

el in Configuring the Main Model Elements [Page

Use 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 mod 217] and it is

Pr...

1. r the

rm, and choose Add Value Help rd is displayed.

2. Select the type of value help to add:

In e drop-down list, se is setting means that the user will only be able to select one value to sub Notice that information about the selected field, Sa ars in the Selected Field Properties section.

Un guration options (BI systems only) checkbox, so that you will be able to see the Runtime Parameters screen

ll provide the values for the value help list:

e screen, identify the Sales Organization characteristic as the the typical ld use

a. From the System drop-down list, select the data service that contains the BI system in which the demo InfoCube is activated.

,

es 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:

open in Storyboard.

ocedure On the Layout board, start the value help wizard to begin creating value help fosales organization field:

Right-click the Sales Organization field in the input fofrom the context menu. The Value Help Configuration Wiza

the Add Value Help for Selected Input Field screen, from the Typlect Single selection. Th

mit at a time. les_organization, appe

check the Hide advanced confiadvanced Specify Data Service

(step 4, below).

Click Next.

3. Select the data service that wi

In the Select Data Servicdata service that will provide the actual values for the value help list. This iscase, in which the characteristic itself provides its list of values, but you couvalues from any data service.

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_Q009and click Search. All queries matching the name are displayed in the pane below.

d. Expand the query Order and sal


December 2007

f. Click Next.

ure value help parameters on the Specify Data Service Runtime Parameters :

4. Configscreen

a. In the Input section, leave the values as they appear by default, as indicated in the following table:

Input Section

Setting Value

Port INPUT (the default)

Input Fields: Assigned Value (blank)

Search field ID (no selection)

Search field name (blank)

These settings indicate that behind the scenes, the sales organization value is del rass ill not be earch functionality to search for values.

b. In Ocheckm t column of the Output Fields table in the TEXT (in addition to the K

Outpu

Value

ive ed to the Input port, the list of valid sales organizations has no pre-igned values since you want the user to see all valid values, and the user w

offered s

the utput section, leave the values as they appear by default, but place a ark in the firsEY) row, as indicated in the following table:

t Section

Setting

Port OUTPUT (the default)

Output Fields Both KEY and TEXT are checked

Key field Key (the default)

These settings indicate that behind the scenes, the list of values are delivered to the ng names (TEXT) as well as n the value help list, and the Key field is delivered to the input field for the query.

Output port (actually returned to the input field), lokey values (KEY) will be listed i


December 2007

5. Click Finis

An additio n your input form:

h.

nal button now appears o

6. Save your model.

Result In addition to genera ed iView that represents the v s 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

ting the Value Help button, the wizard has created an embeddalue help dialog box and it

your model should now look similar to the following:

You’re now read y to proceed to Fine-Tuning and Deployment [Page 222].


December 2007

5.1.1.3 Fine-Tuning and Deployment

Use In this example, d the value help dialog box itself, and deploy the model.

Prerequisites You have configured the

you fine-tune the layout of the input form an

main model elements [Page 217], added and configured value help [Page 219], and the model

Procedure ...

1. On the La t

Clic hbelow

is open in Storyboard.

you board, adjust the size of the input form:

k t e right edge of the form and drag to the right, so that it is as wide as the table it.

Tip: You can select the form and click the Fit to Window ( ) button in the Layout the bottom. toolbox at

2. Adjust th

a. RProper

b. Click lab

c. Clic

d. Move the field to the right, towards the

3. Edi e

a. Rig c

b. Enter V elp for Sales Organization... to indicate that this button displays a dia

c. C the right to resize it to accommodate the longe

d. Mo priate so that it doesn’t overlap the Sales Organization fie

4. Fine-tune the :

a. Go to the Design board, right-click Valu es_organization, and from the

H y iView that represents the value help, whi ated in the previous example using the value help wizard:

e layout of the Sales Organization field:

ight-click the Sales Organization field and from the context menu, choose ties, to display the Control Properties dialog box.

the Display tab and from the Label position drop-down list, choose Long el. The label is adjusted accordingly.

k Close.

center of the form, so that the label isfully visible.

t th text and size of the value help button:

ht- lick the Value Help button and from the context menu, choose Edit Label.

alue Hlog box in which you can select a value for the sales organization.

lick the edge of the button and drag tor text.

ve the button as approld.

layout of the value help dialog box itself

e Help for Sal context menu, choose Drill Down.

ere, ou see the layout of the embedded ch you cre


December 2007

Th ce, together with its start point an . The Select form represents the dia

b. Go to the the dialog box. Resize it, an sired, for example:

e Characteristic: 0D_SALE_ORG data servid search results, supplies the list of valueslog box in which the list of values appears.

Layout board to see and adjust the layout of d enter new labels for the table and buttons as de

Tip: To change the window title of this dialog box, change the window title of the

panel for the popup signal.

lect

5. GoAdobe

a.

b. Click Deploy.

popup signal that represents the embedded iView:

i. Go back to the Design tab for the main model.

ii. Select (single-click) Value Help for Sales_organization to display the Configure Element task

iii. Enter new text in the Window title field as desired, for example: SeSales Organization.

to the top level of your model and deploy (if necessary, first set your compiler to Flash format, on the Visual Composer Tools → Options → Compiler tab):

Click the Deploy button in the task-panel toolbar.


December 2007

The runtime licking Run "Order_and_sales_values_select_", un task panel.

Result T V

model is compiled and deployed to the portal to which you are connected. View the version of your model by c

der the Deployed successfully message in the Deploy to Portal

he i iew 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:


December 2007

When you select a value and click Select, the Sales Organization field is fikey for the field as required by the query. When you then click Submit, the

lled with the proper values in the

Output Table update with the results of the query:


December 2007

5.1.2

PurposeIn this ex the key performan , together wpromotional apromotions b lan versus actual comparison regarding volume and revenue.

Prerequis● You hav ss to an SAP BI system aver 2004 SP Stack 14 and greater),

and it is ured to connect via the S rtal landscape. See Defining l Systems and Aliases [E

Creating an Analytics Application

ample, you create a basic analytical application, or dashboard, that displays ce indicators in the major retail channels of a consumer-products manufacturerith details about revenue. It can be used to monitor and track the budgets for

ctivities. The Trade Marketing Manager can evaluate the effectiveness of ased on a p

ites e acce (NetWe config Porta

AP BI Connector in the poxternal] in the SAP NetWeaver Visual

Co n & Configuration Guide.

● Yo

○

ProcesY

● Ad o

● Define ts and tables, and connect them with the data sources.

● Fin tu

Result You creachannel, view hat indicate which promotion tactics have the et availability. This gi ommended to use the available

mposer Installatio

● You have been mapped to a user of this BI system.

u have the following systems installed as data sources:

○ 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

s Flow ou build the iView in three stages:

d y ur data sources.

output char

e- ne the iView layout and deploy the model.

te an analytical application through which the user can select a trade-promotion the brands in that channel and as a result, view charts t

highest return on investment according to budgves the user quick insight into where the money is, and where it is rec

trade dollars to drive volume.


December 2007

5.1.2.1

Use The SAP Anathe major ret sumer-products manufacturer, and thereby determine the cost-effec

PrerequiAs outline

Creating a Trade Marketing Analytics iView

lytics expert can use this dashboard to view the key performance indicators in ail channels of a con

tiveness of different promotional tactics and channels.

sites d in Creating an Analytics Application [Page 226].

Proced... ...

1. Create keting Applicat

2. Add the d

a. Dcontex e Find Data button in the task-panel toolbar. The Find Data Services task panel is displayed.

b. From t e SAP_BW system alias, or the approp

c. From the field, ePromo erview (0CP_SLSCA_Q0015) query is displayed.

d. D

e. To a services, from the Look for drop-down list in the task backspace (delete) in

0CP_SLSCA_ 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:

i. Tactic Analysis (0CP_SLSCA_Q0015_V01) to the right of the first data service

ii. Period Overview (0CP_SLSCA_Q0015_V02) to the left, under the first data service

iii. Budget for Channel and Customer (0CP_SLSCA_Q0005_V01) towards the bottom center of the workspace.

3. Bu

b. vice and choose Add Table View.

ure a new model and create an iView, naming it Trade Mar

ion.

ata services:

rill down into the iView (double-clicking it or choosing Drill Down from the t menu) and click th

he System drop-down list, choose thriate alias of the BW system that includes the demo content.

Look for drop-down list, choose Look for a query and in the Query nter the following: 0CP_SLSCA_Q0015. Then click Search. The Trade tions Channel Ov

rag the query to the top left of your workspace.

add the other datpanel, choose Look for a view and in the Query field,order to enter only and click

g. Reduce the width of the task panel and save your model.

ild 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.

Drag out from the Output port of the data serThe Select Display Fields dialog box is displayed.

i. Select the following fields:


December 2007

■ Actual_Promotion_Volume_YTD_value

■ BP_Group_Level_5

■ Budget_Spent_YTD_value

■ Promotion_Volume_Versus_Plan_value

iii. 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 ser can select a channel in the table and see how the

. Therefore:

l, and

■ Budget_Spent_versus_Plan_value

ii. Click OK.

services, so that the ue accordinglyresults chang

i. Drag out from the out port of the table three times, once to each Input port of the other three data services.

ii. Double-click each line to display the Configure Element task panemap 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).


d. Create a chart to receive the output from Tactic Analysis (at the top right):

i. Drag out from the Output port of the data service and choose Add Chart View.

ii. Rename the chart: Tactic Analysis Volume YTD.

iii. 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:


December 2007

■ Chart type:

■ Category A

Pie

xis – Field: Tactic (Axis label is changed accordingly)

ght

m.

e. Create a chart to receive the output from Period Overview (at the left):

ii. Rename the chart: Promo Volume YTD Plan vs. Actual

iii. Configure the chart as follows:

■ Chart type: Line

■ Category Axis – Field: Posting_period:

■ Category Axis – Axis label: Month

■ Data Animation - Effect: Slide in / out

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. Display the Find Data Services task panel and select the same System that you selected previously.

ii. From the Look for drop-down list, choose Look for a view.

iii. In the Query field, enter 0CP_SLSCA_Q0015_V02 and click Search.

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.

v. Connect the out port of the Trade Promo YTD by Channel table to the Input port of this data service.

vi. Double-click the select line and map the BP_Group_Level_5 field to @BP_Group_Level_5_key

g. Create a chart to receive the output from Period Overview, which you just added:

■ Chart Formatting – Legend Placement: Ri

iv. Define the data series by clicking the Add (plus) button at the bottoFrom the drop-down list in the Formula column, choose: @Actual_Promotion_Volume_YTD_value.

v. In the Data Series column to the left, enter a meaningful name for the series.



December 2007



ii. Rename the chart: Promo Budget YTD Plan vs. Actual

iii. Configure the chart as follows:

■ Chart type: Line

■ Category Axis – Field: Posting_period:

■ Category Axis – Axis label: Month

■ Data Animation - Effect: Slide in / out

iv. 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:

■ 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

ii. Click OK.

iii. Rename the table: Budget Availability YTD.

i. Save the model. It should look something like this:

December 2007


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 ( B B ) button in the toolbar.

December 2007


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:

December 2007


5.1.3 Integrating Web Services in your Model

Purpose 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 UCreating a Web Service System [Page 205]U.

Creating a web service system requires that you enter the URL of the web service. Use the following URL: http://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.

At runtime, the currency of the row selected in the Sales Orders Grid will be the input of the CURR_ISO field.

c. 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.

b. Under the table at the bottom of the task panel, click the Add (plus) button. The New UI Control dialog box is displayed.

December 2007


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 (plus) 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 Add button) as follows:

Value Display Text

EUR Euros

GBP United Kingdom Pounds

h. Click Close.

5. Add a button to the form to execute the conversion operation:

a. Select the Currency Selector form, and on the Configure Element task panel, click the Add (plus) 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, and select System action as the action type. Make sure that the Action code is SUBMIT.

e. Click Close.

6. Import the web service into the model:

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.

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 button, and make the following selections:

Input Field Assigned Value

FromCurrency @CURR_ISO

ToCurrency @Convert_To

8. Save the file.

December 2007


9. Create a form for the conversion rate result:

a. Drag from the Output port of the web service and choose Add Form View from the context menu. Rename the form Conversion Results.

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.

b. At the bottom of the Configure Element task panel, click the Add (plus) button and add an Input Field. Choose Number as the Data type, and type Converted_Net_Price for the Field name.

c. Double-click the Converted_Net_Price field in the table. The Control Properties dialog box is displayed.

d. 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. Expand the Data Fields node, and double-click ConversionRateResult.

ii. Expand the Operators node, and double-click * (Multiplication).

iii. Expand the Sales Orders node (within the Data Fields node), and double-click 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.

iv. Click Check to validate the expression, and then click OK.

v. Click Close.

10. Save the model. It should look similar to the following:

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.

December 2007


The model should look similar to the following:

12. Save the model and deploy it by clicking the Deploy and Run Model ( ) button in the toolbar.

Result Your iView should look something like this:

December 2007


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.

December 2007


5.2 Checklist Before you begin working with Visual Composer, review and confirm the following list items to ensure high quality and smooth functioning of the application:

● 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?

Documents

Visual Composer