Visual Composer for SAP NetWeaver Composition Environment · Modeler's Guide and Reference Guide...

Modeler's Guide and Reference Guide

Visual Composer for SAP NetWeaver Composition Environment

Document Version 1.00 – November 2007 SAP NetWeaver Composition Environment 7.1 SP 03

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

T yp o g r a p h i c C o n v e n t i 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.

I c o n s

Icon Meaning

Caution

Example

Note / Tip

Recommendation

Syntax

Contents

MODELING COMPOSITE VIEWS WITH VISUAL COMPOSER ............................................. 1 1 GETTING STARTED ......................................................................................................... 2

1.1 Visual Composer Architecture................................................................................... 4 1.2 Prerequisites ............................................................................................................. 5 1.3 Accessing Visual Composer ..................................................................................... 6 1.4 Introducing the Storyboard Desktop ......................................................................... 7 1.5 Typical Workflow ..................................................................................................... 10

1.5.1 Creating a Model .......................................................................................... 11 1.5.2 Locating the Data Services .......................................................................... 11 1.5.3 Designing the Component Logic and Flow .................................................. 12 1.5.4 Designing the User Interface........................................................................ 13 1.5.5 Deploying the Model..................................................................................... 14

2 CONCEPTS ..................................................................................................................... 16 3 QUICK START TUTORIAL.............................................................................................. 19

3.1 Creating the Basic Model ........................................................................................ 20 3.2 Adding a Second Data Service ............................................................................... 24 3.3 Creating an Entry List.............................................................................................. 27 3.4 Creating a Wizard ................................................................................................... 29 3.5 Adding a Popup....................................................................................................... 33 3.6 Defining a Dynamic Expression .............................................................................. 36

4 TASKS ............................................................................................................................. 39 4.1 Working with Models ............................................................................................... 39

4.1.1 Planning a Model.......................................................................................... 40 4.1.2 Creating a Model and Development Component ......................................... 41 4.1.3 Opening a Model .......................................................................................... 42 4.1.4 Saving a Model............................................................................................. 43 4.1.5 Saving a Copy of a Model ............................................................................ 44 4.1.6 Closing a Model............................................................................................ 44 4.1.7 Importing a Model......................................................................................... 45 4.1.8 Exporting a Model......................................................................................... 46 4.1.9 Managing Models ......................................................................................... 47

4.2 Working with Source Control................................................................................... 49 4.2.1 Adding a Development Component to Source Control ................................ 50 4.2.2 Checking In a Model..................................................................................... 51 4.2.3 Checking Out a Model.................................................................................. 51 4.2.4 Reverting to the Last Checked-In Version of a Model.................................. 52 4.2.5 Synchronizing a Model ................................................................................. 53

4.3 Designing the Composite View ............................................................................... 53 4.3.1 Discovering Data Services ........................................................................... 54 4.3.2 Modeling Composite Views Using BI Data Services.................................... 55 4.3.3 Reusing Components................................................................................... 58

4.3.4 Composing the Composite View .................................................................. 60 4.3.5 Configuring the Composite View.................................................................. 72

4.4 Laying Out the UI .................................................................................................... 75 4.4.1 Defining Layout Options ............................................................................... 76 4.4.2 Adding Controls ............................................................................................ 77 4.4.3 Configuring Controls..................................................................................... 81 4.4.4 Creating Toolbars ......................................................................................... 86 4.4.5 Working with Dynamic Expressions ............................................................. 87

4.5 Performing Advanced Modeling Tasks ................................................................. 103 4.5.1 Finding and Modifying References............................................................. 103 4.5.2 Storing Data in a Data Store ...................................................................... 106 4.5.3 Creating a Multi-Selection Table ................................................................ 109 4.5.4 Defining Popups ......................................................................................... 110 4.5.5 Creating Service Components ................................................................... 112 4.5.6 Creating a Service Using the Service Component Wizard ........................ 113 4.5.7 Defining Validation Rules ........................................................................... 117 4.5.8 Managing System Aliases .......................................................................... 118 4.5.9 Preparing Models for Translation ............................................................... 119 4.5.10 Modeling Composite Views for Use in Guided Procedures ....................... 121 4.5.11 Creating an Error Report ............................................................................ 123

4.6 Compiling and Deploying Models.......................................................................... 124 4.7 Viewing Log Files .................................................................................................. 126

5 VISUAL COMPOSER REFERENCE GUIDE ................................................................ 127 5.1 Main Workspace Elements ................................................................................... 128

5.1.1 Main Menu.................................................................................................. 128 5.1.2 Main Toolbar............................................................................................... 132 5.1.3 Workspace Boards ..................................................................................... 133 5.1.4 Board Toolboxes ........................................................................................ 133

5.2 Configuration Dialog Boxes................................................................................... 134 5.2.1 Options Pane.............................................................................................. 134 5.2.2 View Runtime Configuration Dialog Box .................................................... 139 5.2.3 Manage System Aliases Dialog Box .......................................................... 139

5.3 Model Menu Dialog Boxes .................................................................................... 140 5.3.1 Create New Model Dialog Box ................................................................... 141 5.3.2 Open Model Dialog Box ............................................................................. 142 5.3.3 Save As Local Copy Dialog Box................................................................. 142 5.3.4 Manage Models Dialog Box ....................................................................... 143 5.3.5 Import Dialog Box....................................................................................... 146 5.3.6 Export Dialog Box....................................................................................... 147

5.4 Task Panels........................................................................................................... 147 5.4.1 Get Started Task Panel .............................................................................. 148 5.4.2 Compose Model Task Panel ...................................................................... 149 5.4.3 Configure <Element> Task Panel .............................................................. 156 5.4.4 Search Task Panel ..................................................................................... 207 5.4.5 Deploy Task Panel ..................................................................................... 209

5.5 View Dialog Boxes ................................................................................................ 210 5.5.1 Customize Column Widths Dialog Box....................................................... 210

5.5.2 Edit Data Series Dialog Box ....................................................................... 211 5.5.3 Edit Title Dialog Box ................................................................................... 212 5.5.4 Select Event Dialog Box............................................................................. 212

5.6 Control Dialog Boxes ............................................................................................ 213 5.6.1 Define Action Dialog Box............................................................................ 213 5.6.2 Edit Entry List Dialog Box........................................................................... 218 5.6.3 Entry List Wizard ........................................................................................ 219 5.6.4 Validation Rules Dialog Box ....................................................................... 223

5.7 Operator Dialog Boxes.......................................................................................... 226 5.7.1 Define Aggregate Dialog Box ..................................................................... 226 5.7.2 Define Distinct Dialog Box.......................................................................... 227 5.7.3 Define Filter Dialog Box.............................................................................. 228 5.7.4 Define Sort Dialog Box ............................................................................... 229 5.7.5 Define Switch Dialog Box ........................................................................... 230 5.7.6 Define Union Dialog Box ............................................................................ 231 5.7.7 Service Component Wizard........................................................................ 232

5.8 Data Dialog Boxes ................................................................................................ 236 5.8.1 Define Data Dialog Box .............................................................................. 236 5.8.2 Initialize Data Dialog Box ........................................................................... 238 5.8.3 Map Data Dialog Box ................................................................................. 238 5.8.4 Redefine Ports Dialog Box ......................................................................... 239 5.8.5 Test Data Service Dialog Box .................................................................... 240

5.9 Expression Dialog Boxes ...................................................................................... 241 5.9.1 Dynamic Expression Editor Dialog Box...................................................... 241 5.9.2 Find All Expressions Dialog Box ................................................................ 242 5.9.3 Find Element References Dialog Box ........................................................ 243 5.9.4 Field References Dialog Box...................................................................... 244

Document History Document Version

Description

V 1.0 SAP Library release of document, with SP Stack 03. The entire manual has been updated to fully match the text to minor changes made in the UI since SP Stack 01.

In addition, the following changes were made in the manual to reflect new or modified features for SP Stack 03:

Visual Composer Reference Guide: New guide added that describes each of the options in the Visual Composer UI.

Finding and Modifying References: New topic added that describes how to find references in a model using the new Find References tool.

Adding Controls in a Melting Group: New topic added that describes how to group multiple controls in the layout using the new Melting Group control.

Transferring Data Using a Data Bridge: New topic added that describes how to transfer data to and from Guided Procedures using the new Data Bridge connector.

Modeling Composite Views for Use in Guided Procedures: New topic added that provides guidelines to follow when creating composite views for use in Guided Procedures.

Creating a Service Using the Service Component Wizard: New topic added that describes how to use the new wizard to create a simulated service.

Creating an Error Report: New topic added that describes how to generate a zip file that contains information to provide to SAP Support.

Viewing Log Files: New topic added that describes how to view the Visual Composer log files.

Managing System Aliases: New topic added that decribes how to manage aliases of back-end systems used in your models.

Compiling and Deploying Models: Topic updated to reflect that models deployed to Web Dynpro runtime provider can now be run in either Web Dynpro HTML or Web Dynpro Flex.

Defining Layout Options: Topic updated to reflect that you can now change the column widths in a form view.

Preparing Models for Translation: Topic updated to include more specific information about the translation process.

Creating Entry Lists: Topic updated to include information about clustered output ports. Information removed about Sort and Allow duplicates options to reflect changes in the UI.

Managing Models: Topic updated to include information about new option to export a software component to the file system.

Defining Data: Topic updated to include information about the new Show field labels checkbox and Field Label column.

Connectors: Topic updated to include information about the new Static Data connector. Information removed about the Configuration Port connector to reflect changes in the UI.

Getting Started November 2007

Modeling Composite Views with Visual Composer 1

Modeling Composite Views with Visual Composer This guide describes Visual Composer for SAP NetWeaver Composition Environment, explaining how to use Visual Composer tools to model applications using a graphical user interface, without coding.

Topics ● Getting Started [Page 2]

Provides introductory information to help you start using Visual Composer.

● Concepts [Page 16]

Defines general concepts that you should understand before using Visual Composer to model applications.

● Quick Start Tutorial [Page 19]

Provides step-by-step lessons that guide you through the process of modeling an application from start to finish, to get you quickly up and running with Visual Composer.

● Tasks [Page 39]

Describes tasks you might need to perform throughout a typical workflow of modeling components with Visual Composer.

How to Use this Guide You should use this guide in conjunction with the other guides in the documentation set for Visual Composer. In general, the Visual Composer Modeler’s Guide is intended to guide you through the general workflow tasks that you perform when creating and modifying models in Storyboard. The Visual Composer Reference Guide complements this guide in that it provides the details for filling in the dialog boxes and defining the attributes of every model element.

The following documents are included in the Visual Composer documentation set:

● Visual Composer Modeler's Guide (this guide)

Describes how to use Visual Composer tools to model applications.

● Configuring Visual Composer [External]

Describes how to configure certain items before you can start using Visual Composer to model applications.

● Visual Composer Security Guide [External]

Outlines security issues that are specific to running Visual Composer.

● Visual Composer Reference Guide [Page 126]

Provides detailed descriptions of the available fields and options in Visual Composer.

Be sure to read SAP Note 1021219 for the latest information about limitations, known issues, and workarounds for Visual Composer. You can find the SAP Note on SAP Service Marketplace at: service.sap.com/notes.



1 Getting Started Visual Composer is a Web-based visual modeling development environment that enables business process experts and developers to quickly create and adapt model-based transactional and analytical applications, without coding. Visual Composer minimizes the effort and time required to create an application, resulting in faster go-live decision making.

This version of Visual Composer introduces the concept of reusable components for modeling. Visual Composer enables the modeler to create components that can be reused within different models. For example, a component displaying sales information for the top five North American customers can be used within multiple models for various analytics dashboards.

Visual Composer enables business process experts to create enterprise applications using standardized components that meet SAP standards and quality criteria. Applying their understanding of the business requirements and knowledge of their organization's software to accomplish the various business processes, business process experts can use Visual Composer to map out the logical flow of the required applications.

Visual Composer features a visual user interface that streamlines application development, enabling users to model applications by dragging and dropping elements onto a Design board, rather than manually writing code. This modeling tool provides sophisticated, yet simple-to-use, tools for creating applications that process data from back-end systems (SAP systems, Web services, and others). Visual Composer utilizes the SAP connector-framework interfaces to enable modelers to access a range of systems, including SAP and third-party enterprise systems.

The tools provided by Visual Composer are powerful and intuitive, with a user interface that is user-centric and highly efficient. The Layout board enables the modeler to determine the visual layout of the application, and the Design board enables the modeler to determine data structure, data flow, and event flow in the application. The model elements and controls are industry-standard, both in graphical look-and-feel and in their behavior. For example, an input form is displayed and manipulated as an identifiable and familiar view, with all the controls displayed and configured in a standard and straightforward manner.

Visual Composer compiles the models and deploys them to different UI technologies, such as Web Dynpro. Business process experts can interact with application developers and content experts to build or customize applications as needed, accessing the Visual Composer application via a Web browser on any computer.

Features Visual Composer is designed according to the following prime considerations:

● Simplicity

○ Visual Composer enables fast development of model-based business components for business applications, without requiring manual coding skills.

○ The Visual Composer graphical interface is 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.



● Reusability

○ Using reusable components as building blocks when modeling an application markedly reduces model maintenance and improves the efficiency of the modeling process. Through the use of reusable components, modelers can leverage these same reusable assets in the design of other models with little or no modification necessary.

● Connectivity to SAP and third-party systems

○ Visual Composer utilizes the SAP connector-framework interfaces to enable access to a range of data services, including SAP and third-party enterprise systems.

● Support for different runtime environments

○ Visual Composer is a robust tool in which models can be created once, and then deployed to multiple runtime environments as required.

● Test-and-Redo

○ Visual Composer is ideal for trying out a model, quickly deploying it – and then going back to the “drawing board” for correction and tweaking. You can also use Visual Composer to define application requirements by creating a model as a prototype, and then transferring the model to a developer to implement the more complex aspects.

In summary, Visual Composer enables business process experts to apply their inherent understanding of their organizations’ requirements to create and adapt applications to their specific business needs. With their knowledge of their organization’s business processes, business process experts can create applications without programming knowledge, thereby acting as application developers. These applications can then be subsequently customized and continuously modified in Visual Composer as the organization’s business objectives evolve.



1.1 Visual Composer Architecture The following diagram illustrates the high-level architecture of Visual Composer:

NWDI

AS Java (Java EE 5 Compliant Server)Visual Composer Platform(Client Browser)

Development Server

Microsoft XML CoreServices (MSXML)

Drawing Engine / SVG

RuntimeInfrastructure

CompilerInfrastructure

Visual ComposerServer

Generation Framework

ConnectivityFramework

SearchInfrastructure

RuntimeInfrastructure

Search andDiscovery

Extension Kits

Kit A

Kit B

Web ServiceInfrastructure

Services Registry-------------------------------Enterprise ServicesRepository (ESR)

SAP Back-EndSystems

Third-PartySystems

Pluggable SourceControl Infrastructure

EnterpriseServiceProtocol

(ESP)

DTR

The Development Server provides a platform for design-time infrastructure integration and runs on the Application Server Java (AS Java), which is a fully-compliant Java EE 5 application server. The following modules are installed on the Development Server:

● Visual Composer Server: Contains infrastructure components, together with the client core (Storyboard) and extension kits.

● Generation Framework: Provides the infrastructure required for deployment to the supported environments.

● Pluggable Source Control Infrastructure: Enables Visual Composer to work with different source control systems. The SAP Design Time Repository (DTR) is part of the NetWeaver Development Infrastructure (NWDI). The DTR stores and handles modeled components and provides versioning control. When the DTR is not used, a shared repository with basic check-in and check-out functionality is used for Visual Composer.

The SAP NetWeaver Composition Environment (SAP NetWeaver CE) does not come with an installation of the NWDI, but you can use the functionality of NWDI (including DTR) if you have access to a system with an already installed NWDI.



The following modules reside on the AS Java:

● Connectivity Framework: Provides connectivity to SAP back-end systems, Services Registry, and SAP Enterprise services for use during design time. The connectivity framework also connects to the Web service infrastructure via the Enterprise Service Protocol, to provide connectivity to Web services.

● Enterprise Service Protocol: Encapsulates all Web service interaction to be used with Visual Composer, including discovery and execution.

Data Service Systems are connected to the AS Java via the connectivity framework and can be used when modeling with Visual Composer. These systems include Web service infrastructure, Enterprise Services Repository, SAP back-end systems, and third-party systems.

To connect to the Enterprise Services Repository for SAP NetWeaver Composition Environment, it must first be installed in your system landscape.

The Visual Composer Platform includes the following fully-integrated client-side modules used for designing models with Visual Composer:

● Installed prerequisites, such as Adobe SVG Viewer and Microsoft XML Parser (MSXML).

● Visual Composer Storyboard functionality and the various infrastructures required for freestyle modeling. At design time, Storyboard is accessed from the client machine through Microsoft Internet Explorer version 6.0 and higher.

● Extension kits, which are packaged groupings of resources that provide a specific set of features, extending the functionality of Visual Composer Storyboard. The extension kits are deployed to the Java EE Server database, and are loaded to the Visual Composer client via the Visual Composer Server when you access Visual Composer in your Web browser.

1.2 Prerequisites You install Visual Composer as part of the NetWeaver Composition Environment installation, using the additional Composition Tools installation option.

Before you begin using Visual Composer, be sure that Visual Composer has been configured according to the instructions outlined in Configuring Visual Composer [External], and that you meet the following prerequisites:

● Your Administrator has assigned you the VisualComposerUser role. The assignment is made using NetWeaver Administrator. For more information, see the User Administrator and Authentication [External] section of the Visual Composer Security Guide.

● The following items have been installed on the client computer from which you access Visual Composer Storyboard:

○ Microsoft Internet Explorer 6.0 SP1 or higher

○ Adobe SVG Viewer 3.0

○ Microsoft XML Parser 4.0 or higher



● To use SAP system BAPIs/RFCs as a source of data in your models, the relevant system is correctly defined in NetWeaver Administrator. For more information, see Maintaining RFC Destinations [External].

● To use Web services and enterprise services as a source of data in your models, their destinations are correctly defined in NetWeaver Administrator. If you are locating these Web services by querying the Services Registry, you also need to configure a connection to the Services Registry (as well as defining a destination for the Services Registry). For more information, see Creating Web Service Physical Destinations [External].

After Visual Composer is installed and correctly configured, you are ready to begin using Visual Composer to model applications. For more information, see Accessing Visual Composer [Page 6] and Introducing the Storyboard Desktop [Page 7].

1.3 Accessing Visual Composer You access Visual Composer through a browser window.

Prerequisites Your administrator has assigned you the VisualComposerUser role. The assignment is made using NetWeaver Administrator. For more information, see the User Administrator and Authentication [External] section of the Visual Composer Security Guide.

Procedure ...

1. Open Microsoft Internet Explorer.

2. In the address bar, enter the URL of the Visual Composer server as follows: http://<machine name with full domain>:<portnumber>/VC/freestyle.jsp

For example: http://dwdf041.wdf.sap.corp:54000/VC/freestyle.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 the Java EE 5 Application Server in use by the Visual Composer Server installation. Note that VC is case sensitive.

3. In the Welcome screen, enter your user name and password, and click Logon.

Result Visual Composer opens with an empty workspace to the left and a Get Started task panel to the right. For more information, see Introducing the Storyboard Desktop [Page 7].



1.4 Introducing the Storyboard Desktop

Purpose Visual Composer Storyboard contains all the tools you need to create your model. 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 panels display the tools you use to build your model.

Features The main parts of the Storyboard desktop are shown in the following figure and are described in more detail in the following sections:

Task panel

Task-paneltoolbar

Main menuMain toolbar

Workspace

Toolbox

Console

Model tabs

Boards

Some of the items in the Storyboard desktop are displayed only after you open a model, and may differ depending on the currently-selected element in the Storyboard.

You can use the settings in the Options pane (Tools → Options) to define certain aspects of Storyboard behavior, performance, and appearance. For more information, see Options Pane [Page 134] in the Visual Composer Reference Guide.

Main Menu and Toolbars The main menu contains the options required to create and modify models, create and lay out elements within your models, and manage and save your models.



Visual Composer Storyboard provides the following toolbars and toolboxes:

● Main toolbar: Enables quick access to frequently-used menu options.

● Toolbox: Contains buttons that enable you to change the workspace display between the Design board and the Layout board. It also contains buttons you can use to change the way items are displayed on the Design board and Layout board. The toolbox is displayed by default directly below the workspace. You can choose to display it at the left side of the workspace by right-clicking the toolbar and from the context menu, choosing Side.

Workspace Each model that you open is displayed in a separate tab in the Storyboard workspace. You can switch between models by selecting the relevant tab.

The Storyboard workspace contains the set of boards on which you design and lay out your model. The workspace contains the following boards, each displaying a different view of the model and providing different modeling functionality:

● Design board: Used to construct your model and define the flow between model elements

● Layout board: Used to lay out the UI controls in the views in your model (applicable only for composite views)

You change the board displayed in the workspace by choosing the required option from the toolbox (displayed by default directly below the workspace).

Task Panels Task panels are the panes located at the side of the workspace. The task panels support the typical Visual Composer workflow process, with each step in the workflow using options from one of the task panels. For more information about the workflow process, see Typical Workflow [Page 10].

You can choose to display the task panel to the left or right of the workspace area, by right-clicking the task-panel toolbar and choosing Switch Side from the context menu.

The tools on the task panels are dynamic and context-driven, and display one set of tools at a time. In other words, the displayed task panel provides options relevant only to the model element currently selected in the workspace. For example, if a Dropdown List control is displayed on the Layout board, only properties that are relevant to that control are displayed in the Configure task panel. You can display each tool set using the task-panel toolbar to the right of the task panel. You can also display the different task panels using the View → Task Panel menu options. You can choose to show or hide the task panel using the View → Show Task Panel menu option.

Additional task panels may also be available to you, depending on the Visual Composer kits you have installed and loaded.



The following task panels are available:

Name Toolbar Button Description

Get Started Displayed by default when there are no models currently open in Storyboard.

Provides quick access to recently-used models, and also enables you to create a new model, open an existing model, and manage models.

Compose

On the Design board, enables you to add views, containers, connectors, and operators to the model.

On the Layout board, enables you to add controls to the views and containers in a model.

Configure

Enables you to define properties of the currently-selected model element. The properties available depend on whether you select the element on the Design board or on the Layout board. Some of the properties relate only to the design environment, while others relate to the behavior and display of content at runtime.

Search

Enables you to locate data services and components to import into your model (on the Design board). You can use the Search task panel to locate BAPIs, RFCs, Web services, enterprise services, or other Visual Composer components.

Deploy

Enables you to compile and deploy the model.

Console The console is located directly below the workspace. It displays messages as errors and warnings occur during the design process. You can also use the console to display trace log information. By default, the console is not displayed. You can choose to show or hide it by using the View → Console menu option.



You can right-click the console and choose the following options:

● Clear Pane: Deletes all displayed messages from the console

● Copy to Clipboard: Copies the contents of the console to the Windows clipboard so you can paste it into another application

● Hide: Hides the console

1.5 Typical Workflow This section describes the typical workflow for creating a model in Visual Composer. The options in the task panel at the right of the workspace support this workflow process, with each step in the workflow using options from one of the task panels. For more information about the task panels, see Introducing the Storyboard Desktop [Page 7].

Prerequisites You have defined the needs of your application and know:

● Which data services (such as BAPIs or other RFCs, enterprise services, Web services, or other Visual Composer models) you need in your model

● In which back-end system each data service resides

● Your ID and password for gaining access to the back-end system(s)

Workflow After you have planned your model, you perform the following steps: ...

1. Create the model and choose its type: Creating a Model [Page 11]

2. Locate the data services that you want to use, using the Search task panel: Locating the Data Services [Page 11]

3. Design and configure the logic and flow of the component elements, using the Compose task panel: Designing the Component Logic and Flow [Page 12]

4. Design and configure the UI and layout of the component elements and their controls, using the Compose and Configure task panels: Designing the User Interface [Page 13]

5. Debug the model and deploy it, using the Deploy task panel: Deploying the Model [Page 14]

The process described here is a general one, and is provided only as a suggested guideline. You do not need to perform the steps in the order listed here. For example, you may prefer to design and lay out one element of the model before designing and laying out the next. Or you may prefer to design the top level of the model, and then proceed to configure the controls of each element, one at a time.

Result After you have deployed your model, you can run it to check its operation at runtime. You can make subsequent changes to the component by returning to Visual Composer, making the required modifications and redeploying the model.



Example The Quick Start Tutorial section of this guide assists you, step-by-step, in creating a sample model in Visual Composer. For more information, see Quick Start Tutorial [Page 19].

1.5.1 Creating a Model

Use You create a model in a specific location in the development server. When you create a model, you also choose its type, for example, Composite View or Service Component.

For more information, see Creating a Model and Development Component [Page 41].

Prerequisites A development component is available for saving your model. If not, create one following the procedure in Creating a Model and Development Component [Page 41]. ... ...

Procedure ... ...

1. Choose Model → New. In the Create New Model dialog box, choose the model type, enter a name for the model, and choose the repository, the software component, and the development component in which you want to store the model.

2. Click OK.

Result The Design board is displayed with an empty canvas ready for you to begin creating the model content.

1.5.2 Locating the Data Services

Use You import the data services required as the source of information processed in the component. You can import a range of data services – such as BAPIs, RFCs, Web services, SAP enterprise services, or other Visual Composer components – from a number of different systems. You perform this procedure on the Design board, after you open the component.

For more information, see Discovering Data Services [Page 54].

Prerequisites The model into which you want to import the data services is open in Storyboard.

Procedure ...

1. Click the Search button in the task-panel toolbar.

2. In the Search in dropdown list, choose the system from which you want to retrieve the data service.

3. In the Search for field, enter the name of the data service that you want to locate.

4. In the Type field, choose the type of data service, for example, Bapi/RFC, Service Registry, WSDL, or Model.



5. Click Search. All data services matching the search criteria and residing in the selected system are displayed.

6. From the Results list, locate the data service that you require and drag it onto the workspace.

7. To import additional data services, repeat the procedure for each data service.

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 in the mandatory fields and click Test to display the results of the query.

Result The data services are now in the component and you are ready to model the component logic and flow by creating and configuring the views and their connections.

1.5.3 Designing the Component Logic and Flow

Use Once you have imported your data services, you design the component logic by creating the required model elements in the workspace and defining the data flow between them. You perform this procedure on the Design board, with the component open.

For more information, see Designing the Composite View [Page 53].

Procedure ...

1. Define the input(s) to the data service:

a. From the Input port of the data service, drag out and release the mouse. From the context menu, choose the element that you require (such as Form View or Start Point). When you drag out from a data service to define an input element, the fields of the selected item are automatically mapped to corresponding fields of the data service and the required controls are created for the fields.

b. The context menus contain only the most common options for the given type of port. To add an element not contained in the context menu, click the Compose button in the task-panel toolbar and drag the required element from the task panel onto the workspace. Then connect it to the relevant port of the data service and map the fields of the element to the corresponding fields of the data service.

2. Define the output(s) from the data service:

As in the previous step, you drag out from the relevant output port(s) of the data service and choose the required element from the context menu. Alternatively, you can drag the specific element from the Compose task panel to the Design board and connect it to the data service. For output ports, you can choose from a wide range of different elements, connectors, and operators. For more information about the different elements, see Introducing the Compose Task Panel [Page 62].

○ If you choose an operator, you need to:

■ Connect the output port of that operator to a UI element, to display the customized results.



■ Define the properties of the operator, by right-clicking it and choosing Define Operator from the context menu. Then define the required parameters in the displayed dialog box.

○ If you choose a connector, you need to:

■ Connect it to the input port of a data service, where applicable.

■ Configure its properties, by right-clicking the connector and choosing Configure from the context menu. Then define the required parameters in the Configure task panel.

3. Configure the connecting lines between the elements and data services:

○ Configure the line properties and the events that trigger the data flow, by right-clicking the connecting line on the Design board and choosing Configure from the context menu. Modify the required parameters in the Configure task panel.

○ For connections types that use data mapping, check that the data is mapped correctly, by right-clicking the connecting line and choosing Map Data from the context menu. In the Map Data dialog box, modify the fields in the Assigned Value column as required, and click Close.

4. Continue this procedure until you have created all the model elements, and the logical flow between them for your model.

For a detailed explanation of how to ensure proper data connectivity within the component, using mapping, binding, and data flows, see Connecting Model Elements [Page 70].

Result Your model is fully designed on the Design board and you are ready to configure the UI elements and controls.

1.5.4 Designing the User Interface

Use When your model is completed on the Design board, you can configure the way each UI element is displayed in the runtime environment. This enables you to define the runtime look-and-feel of each element, its position in the application, and its controls and data fields. You define these items using the Layout board.

For more information, see Laying Out the UI [Page 75].

Procedure ...

1. Click the Layout button to display the model on the Layout board, and click the Configure button in the task-panel toolbar.

2. Reposition the different view elements (forms and tables) in the layout. Click outside the layout (no element is selected) and choose an option from the Layout dropdown list in the Configure task panel. You can choose Vertical flow or Horizontal flow to automatically align all view elements vertically or horizontally in the component. You can also use drag and drop to change the order in which elements are displayed.

To make it easier to reposition the view elements, you can change the zoom level of the workspace or scroll up/down or right/left as needed.



3. Display the properties of each UI element, such as an input form, by selecting its border and choosing the Configure button in the task-panel toolbar. The Configure task panel is displayed, showing the properties of the selected element, for example, the element title, whether it has a toolbar, and its frame style.

4. Modify the properties of each UI element using the options in the Configure task panel. The results of some property value modifications, such as Show title and Show toolbar, are reflected immediately on the Layout board.

For explanations of the properties relevant to each type of UI element, see Configure <Element> Task Panel [Page 156] in the Visual Composer Reference Guide.

5. Add controls to views by dragging them from the Compose task panel to the relevant view on the Layout board.

To add a toolbar and toolbar buttons, select the required view and check the Show toolbar checkbox in the Configure task panel. You can then add buttons to the toolbar by dragging them from the Compose task panel to the toolbar in the view.

You can remove a control from a view by selecting the required control on the Layout board and pressing the Del key.

6. Display the properties for each control in each view by selecting the control on the Layout board and choosing the Configure button in the task-panel toolbar. The Configure task panel displays properties relevant to defining the appearance and behavior of the selected control.

7. You can modify the properties of each control using the options in the Configure task panel. The results of some property value modifications, such as Label, are reflected immediately on the Layout board.

For explanations of the properties relevant to each type of control, see Configure <Element> Task Panel [Page 156] in the Visual Composer Reference Guide.

8. Continue until you have fully configured all the elements and controls in the component. The items in the task panel change according to the currently selected element or control.

For more information about configuring the complete range of elements and controls, see Compose Model Task Panel [Page 149] in the Visual Composer Reference Guide.

Result At this stage, your model is close to completion, ready to be deployed to the runtime environment.

1.5.5 Deploying the Model

Use The models that you create in Visual Composer are saved in Generic Modeling Language (GML) format. When you compile your model, the GML format is converted into XGL format. When you deploy your model, the compilation process is performed and then the XGL code is compiled into the supported runtime, such as Web Dynpro. When you deploy a model, all models in the current model’s development component are automatically compiled and deployed.

For more information, see Compiling and Deploying Models [Page 124].



Prerequisites ● The model that you want to deploy is open and saved.

● You have specified whether the component should be deployed as an application, either using the default setting in the Options pane (Tools → Options) or using the component-specific setting in the Configure task panel.

Procedure ...

1. Click the Deploy button in the task-panel toolbar.

2. To deploy all components throughout the dependency chain, select the Include dependencies checkbox. Any components referenced from the current model, any components referenced from the referenced components, and so on, are all deployed, regardless of the development component in which they are located (meaning that if a referenced model resides in another development component, all models in that development component are also deployed). Depending on the length of the dependency chain, this may take some time.

3. Click Deploy.

Result The model is compiled and deployed. If you specified that the model should be deployed as an application, you can run the application from the Results area by expanding the relevant development component and runtime provider, and clicking the application link. The different runtime providers displayed depend on the runtime provider configuration for the component (Tools → Options → View Runtime Configuration). For Web Dynpro, deployed applications can be run in both Web Dynpro HTML and Web Dynpro Flex.

Concepts November 2007


2 Concepts The following are general concepts that you should understand before using Visual Composer to model applications.

Application Modeling Application modeling is a method of defining application functionality without writing lines of code. Instead, you manipulate visual elements (such as controls, forms, and tables) on your workspace and create connections between them to create a reusable component that can be used in one or more applications.

Unlike classical UML modeling tools, which model programming code and then later compile that code into the application execution format, Visual Composer uses requirements modeling, which defines the application behavior using requirement terminology.

In Visual Composer, you model an application component by:

● Specifying its functional model elements (for example, input forms, operators and output tables)

● Specifying data services (for example, enterprise services and Web services)

● Creating relationships, logical flow, and event flow between all the model elements and application parts

● Defining the UI element appearance, controls, and behavior of the UI elements

When modeling with Visual Composer, the modeling process is independent from the selected runtime environment, meaning that you can model an application once and then deploy the same application to multiple runtime environments if required. After you define the elements and their relationships, Visual Composer compiles and deploys the application component to the selected runtime environment. Components modeled using this method are more standardized and simplified, thereby requiring less effort to enhance and maintain than standard coded applications.

For example, suppose you are a manager who wants to create an application that displays the monthly sales totals for each member in your sales team. In Visual Composer, you locate the data service of the required sales information and drag it onto your workspace. You define the required input to the data service (and the UI means for entering the data) and then define the means to output the required information fields from the database to a display table. No coding is required to model this application. You simply drag and drop elements onto your workspace, define their properties, and define the application logic and information flow.

Visual Composer enables you to quickly and efficiently design and implement a modeled application that meets specific business requirements. Access to the analytic and transactional data is direct and intuitive, resulting in a fast response from the structured data. After deploying the application, you can view and use the running version of the application that you modeled. You can then return to the “drawing board” to make subsequent modifications, until you are satisfied with the results.

You can use Visual Composer to create modeled components from scratch, or you can adapt existing applications to your specific needs. For analytic applications with standard features, it is significantly faster to customize an existing application by replacing data services with the required queries, for example, and making other minor adjustments. Whether you are creating a new model, or modifying an existing one, you should define the information needed to perform the required actions, detail the target functionality, and locate or prepare all required data services ahead of time.



Models and Components A model is an object created in Visual Composer Storyboard. It contains a single top-level component (composite view or service component), which may contain references to other (nested) components. A model contains your definition of an application, and you deploy it to the relevant runtime environment. You save the model in a development component, which is a location (like a folder) for saving your models, located within a software component hierarchy.

The source control system used with Visual Composer and NetWeaver in general, is based on a hierarchy of software components, which in turn contain development components. While the same term “component” is used, the meaning is different. For more information, see Life Cycle Management and Source Control later in this topic.

A component is a basic unit of modularity, reusability and execution within a model. It contains the UI elements of part of your application, and the relationships between the different elements. Each component can be reused in multiple models. When you create a component, Visual Composer bundles the resulting code, together with its component dependencies, as a model.

Reusable components can also be built from other reusable components. Rather than building an all-encompassing application component, a component can be assembled from multiple smaller components. These smaller components can then be used later in additional models.

Design Time and Runtime Visual Composer is a design-time software tool in which you develop an application component and then deploy it. After deployment, you can use the actual application in the runtime environment to check its runtime functionality.

When you model a component, you define all the runtime attributes of the UI elements, 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.

Models designed in Visual Composer can be deployed to run in one or more environments, for example, Web Dynpro. The same model can be deployed to more than one runtime environment.

Visual Composer implements a proprietary XML-based 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. This process provides “model once – run anywhere” capability.

Data Services At the heart of Visual Composer modeled applications are the data services, which can be standard RFCs and BAPIs (business APIs) from SAP data systems, SAP enterprise services, Web services, other Visual Composer components, and so on.

You can create a data service from scratch, or you can take an existing service component, customize it to meet your needs, and then save it as a new data service. Data service components can be reused in multiple models.



One main strength of Visual Composer is that models can be built around any number of disparate data services and then finely-tuned to display only the exact subset of data needed for the specific transaction or operation.

Controls and Fields Controls are UI-based items that can be placed in a UI element (a form, table, chart, and so on). Controls are visible items: for example, a checkbox, an input field, or a combo box. You add controls by dragging them to the required location in a UI element in the workspace. You can modify the appearance, characteristics and behavior of UI elements and controls.

Fields hold data that is retrieved from one entity and transferred to another, for example, retrieved from a BAPI data service or Web service and transferred to an input form or displayed in a table. To display the data from those fields, you “bind” each field to a visible control. Depending on how you create a UI element, Visual Composer may automatically create the relevant control that is needed to display the data in the field. Otherwise, you can manually add the required control by dragging it to the UI element and binding it to a selected field.

You can also add virtual fields to a UI element. Virtual fields are fields that are not connected to a data service – you add them manually when you design a model. Virtual fields enable you to add information and to correct mismatches between data services. For example, suppose that certain information is expected in the entity to which data is being transferred, but the data (and corresponding field) does not exist in the original data service. In this case, you can create a virtual field with a bound control, so that the runtime user can enter the required data into the bound control before transferring the field to the target entity.

Life Cycle Management and Source Control Management of the different Visual Composer component life cycle aspects – such as versioning, packaging, dependencies, and compatibility – relies on the NWDI infrastructure and component hierarchy, which is based on the software component and development component concepts.

SAP NetWeaver Composition Environment (SAP NetWeaver CE) does not come with an installation of the NWDI, but you can use the functionality of NWDI (including DTR) if you have access to a system with an already installed NWDI.

According to the NWDI hierarchy, models are organized within software components and development components into a nested structure:

● Development objects (Visual Composer models) are created in the context of development components and stored as versioned files in the Design Time Repository (DTR). They provide public interfaces of the component, accessible by other components.

● Development components (DCs) are development and build units that group development objects.

● Software components (SCs) are delivery and installation units that group development components.

Since Visual Composer models are persisted and managed in NWDI as components, they are arranged according to the software and development components, and thus made available for reuse. One of the benefits provided by this arrangement is the possibility to deploy a complex model along with all its dependent models.

Quick Start Tutorial November 2007


Visual Composer integrates with the SAP Design Time Repository (DTR) to provide life cycle management for models. If you do not have a source control system installed and configured to work with Visual Composer, a shared repository is provided by default. The shared repository provides basic check-in and check-out functionality (without version control) for models stored in a shared location. For more information about the DTR, see Working with the Design Time Repository [External].

To use the Design Time Repository (DTR) as your source control system, you must configure the DTR to work with Visual Composer. For more information, see Configuring Visual Composer to Work with NWDI [External].

The DTR provides source code management for versioning control of resources. Implementing Visual Composer together with the DTR enables you to track component versions and track and control component modification by different modelers who may be using the same reusable components. A different version of a model is created each time you check the model into the DTR. Associated with each version of the model is an activity, which describes the logical change made to the checked-out model.

3 Quick Start Tutorial This tutorial provides step-by-step lessons, in which you learn to model a basic Flight Reservation application. The Flight Reservation application searches for flights according to user input, and provides additional information and seat availability for the selected flights.

Structure You build the model in the following incremental lessons: ...

1. Create the basic flow for searching for flights: Creating the Basic Model [Page 20]

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

3. Add an entry list for country selection: Creating an Entry List [Page 27]

4. Change the Flight Reservation application to a wizard format: Creating a Wizard [Page 29]

5. Add a popup to display seat availability information: Adding a Popup [Page 33]

6. Display a message when certain criteria are met: Defining a Dynamic Expression [Page 36]

Result The lessons guide you through the process of modeling an application, from start to finish. When you finish the tutorial, you will have used Visual Composer to model an application that enables you to search for flights on a specific route, select a flight to display additional details, and view availability information for the flight. You could then use the information you found using this application to book a flight using a flight reservation system.

In the lessons, you learn to perform a number of basic tasks with Visual Composer, including how to:

● Create a component and add data services

● Define an input form and output table view for a data service

● Import a second data service, and map the data from the output table to it



● Lay out the component views and UI elements in wizard format, and add a popup

● Define a list of entries for a dropdown list, using the Entry List wizard

● Define a dynamic expression using the Dynamic Expression Editor

● Compile and deploy the model

After you complete the tutorial lessons, you should have a general understanding of how to model applications in Visual Composer, be familiar with a typical modeling workflow, and know how to perform common modeling tasks. You should then be ready to begin modeling your own applications, based on your own business processes and requirements.

3.1 Creating the Basic Model

Use In this lesson, you create an application in which you can search for and display flights on a specific route.

Prerequisites ● You have access to the IDES system.

● You have been mapped to a user of the SAP back-end system.

● The following data service is available from the system:

○ BAPI_SFLIGHT_GETLIST

For more information about configuring access to data services, see Defining Destinations [External].

Procedure ...

1. Begin by creating a model:

a. Choose Model → New.

b. In the Create New Model dialog box, choose the Composite View model type.

c. In the Name field, enter the name Flights for the model.

d. In the Development Component field, choose the location in which you want to save the model. If a development component does not exist, create one in the local repository as described in Creating a Model and Development Component [Page 41].

e. Click OK. The Design board is displayed with an empty canvas to start adding your model content.

2. Define the model as an application:

a. Click the Configure button in the task-panel toolbar.

b. In the Configure task panel, make sure that the Define as application checkbox is selected.

Defining the model as an application means that you can run the model directly from a link in the Deploy task panel after deployment.



3. Import the data service:

a. Click the Search button in the task-panel toolbar.

b. In the Search in dropdown list, choose the IDES system (the source of the data that we need), such as IDES_R3.

c. In the Search for field, enter bapi_sflight.

d. In the Type field, make sure that Bapi/RFC is selected.

e. Click Search. A list of all data services matching the search string is displayed

f. Drag BAPI_SFLIGHT_GETLIST onto the workspace.

4. Test the functionality of the Bapi_sflight_getlist data service:

a. Right-click the data service icon and from the context menu, click Test Data Service. The Test Data Service (Bapi_sflight_getlist) dialog box is displayed.

b. Select the Input node, and enter the following field values:

■ Fromcity: New York

■ Fromcountrykey: US

■ Tocity: Frankfurt

■ Tocountrykey: DE

c. Click Test. The information for all flights to Frankfurt from New York is displayed.

d. Click Close.

5. Define the input to the data service:

a. Drag out from the Input port of Bapi_sflight_getlist, release and from the context menu, choose Form View. The Input Form icon is added to the Design board.

b. Right-click the icon and choose Rename. Change the form name to Request Flights.

6. Add a Sort operator to sort the results returned by the data service:

a. Drag out from the FLIGHTLIST output port of Bapi_sflight_getlist, release, and from the context menu choose Sort Data. A Sort operator is added to your model.

b. Right-click the Sort operator icon, and from the context menu choose Define Operator.

c. Click the Add Row (+) button, and in the first row in the Sort By column, select Fldate from the fx dropdown list.

d. Click the Add Row (+) button, and in the second row in the Sort By column, select Deptime from the fx dropdown list.

e. In the Direction column, choose Up for both rows

f. Click Close.

These settings specify that the flight list should be sorted chronologically by flight date and time.

7. Add a table view as output from the data service:

a. Drag out from the output port of the Sort operator icon, and from the context menu choose Table View. The Table icon is added to the Design board.



b. Right-click the icon and choose Rename. Change the table name to Flight List.

All of the fields from the FLIGHTLIST output port of Bapi_sflight_getlist are channeled through the Sort operator to the in port of the Flight List table. By default, all of the fields are selected for display in the Flight List table.

8. Choose Model → Save. At this stage, your model should look similar to the following:

9. Lay out the controls of the Request Flights form:

a. Click the Layout button.

b. Streamline the form by deleting the following controls (select each control on the Layout board and press the Delete key):

■ Airlinecarrier

■ Afternoon

■ Maxread

c. Rearrange the controls:

i. Select the Request Flights form and click Configure in the task-panel toolbar.

ii. In the Columns dropdown list, choose 2. This arranges the controls into two equal-width columns.

iii. Drag and drop the controls on the Layout board to reorder them as follows:

d. Change the control labels by selecting each control and choosing the Configure

button in the task-panel toolbar at the right. In the Label field, change the label of each control as follows:

Original Label New Label

Fromcity From city

Fromcountrykey From country

Tocity To city

Tocountrykey To country

10. Select the form and drag its side handles to resize it to fit the new controls layout.

11. Save the model.



12. Deploy the application:

a. Click the Deploy button in the task-panel toolbar.

b. Click the Deploy button in the Deploy task panel.

13. In the Results area of the Deploy task panel, expand the node of the development component you created, expand the Web Dynpro node, and click the Flights link under the Html or Flex node to run the application. It should look similar to this:

14. Test the runtime application using the following values:

○ From city: New York

○ From country: US

○ To city: Frankfurt

○ To country: DE

15. Export the model and save it to your local file system:

a. Choose Model → Export. The Export dialog box is displayed.

In the Model name field, the name of the open model is displayed, in the format <development component>/<model name>.

b. Click Export. The File Download dialog box is displayed.

c. Click Save.

d. In the Save in dropdown list, navigate to the folder to which you want to export the model and click Save. The model files are exported to a zip file with the same name as the model, under the folder you selected.

e. Click Cancel to close the Export dialog box.

Result The runtime application enables you to specify the start point and destination of your flight route, and display a list of all flights that meet the specified criteria.



When you search for a flight, the application should look similar to this:

3.2 Adding a Second Data Service

Use In this example, you enhance your Flight Reservation application by adding a second data service that retrieves the flight information based on a selection in the flight list.

Prerequisites ● You have created the model as described in Creating the Basic Model [Page 20] and it

is open in Storyboard.


○ BAPI_SFLIGHT_GETDETAIL


Procedure ...

1. Import a second data service to the model:

a. With the model open on the Design board, click the Search button in the task-panel toolbar.

b. Drag BAPI_SFLIGHT_GETDETAIL from the search results onto the Design board. (If BAPI_SFLIGHT_GETDETAIL is not already displayed in the search results, search for it as described in Creating the Basic Model [Page 20].

2. Define the input to the second data service:

a. To enable the user to select a flight and display all of its details, the table created in the first example (Flight List table) must serve as input to the second data service (Bapi_sflight_getdetail). Therefore, connect the out port of the Flight List table to the Input port of Bapi_sflight_getdetail.

b. Right-click the select connecting line, and from the context menu choose Map Data.



c. In the Map Data dialog box, map the output fields of the Flight List table to the corresponding input fields of the data service, as follows:

Target Field Assigned Value

Airlinecarrier Carrid

Connectionnumber Connid

Dateofflight Fldate

d. Click Close.

3. Define the output from the second data service:

a. Drag out from the FLIGHTDATA output port on Bapi_sflight_getdetail, release, and from the context menu choose Form View. The Define Data dialog box is displayed.

b. Choose the following fields to be displayed in the form by clicking the Deselect All button and then clicking in the first column of the dialog box for each required field:

■ Arrtime

■ CarrID

■ Currency

■ Deptime

■ Fldate

■ Planetype

■ Price

c. Click Close.

4. Right-click the form and choose Rename. Change the form name to Flight Details.

5. Save your model. It should look similar to the following:

6. Rearrange the form layout:

a. Click the Layout button and then click the Configure button in the task-panel toolbar.

b. Click the edge of the Flight Details form to select it.

c. Drag for form handles to resize the form to display all of its controls.



d. In the Label field, rename each of the form field labels as follows:

Original Field Label New Field Label

Currency Currency

Planetype Plane type

Fldate Date

Price Price

Arrtime Arrival

CarrID Airline

Deptime Departure

e. Arrange the form fields into two columns. Select the form, and in the Configure task panel, in the Columns dropdown list, select 2.

f. Drag and drop the fields to rearrange them so that they look similar to the following form:

7. Save the model.




9. In the Results area of the Deploy task panel, expand the node of the development component you created, expand the Web Dynpro node, and click the Flights link under the Html or Flex node to run the application. Check that you can search for and select a flight, and display details about the selected flight.

Result The runtime application enables you to search for all flights on a specific route, then select a specific flight and display additional information for that flight.



It should look similar to this:

3.3 Creating an Entry List

Use In this lesson, you make your Flight Reservation application easier to use by creating an entry list for selecting a country in the Request Flights input form. The entry list displays a list of countries and their codes, and uses the country code value required as input for the Bapi_sflight_getlist data service.

Prerequisites ● You have created the model as described in Adding a Second Data Service [Page 24]

and it is open in Storyboard.


○ ISA_GET_COUNTRY_LIST


Procedure ...

1. In the Request Flights input form, change the To country and From country input fields to Combo Box controls:

a. On the Layout board, right-click the From country input field and from the context menu choose Change Control Type → Combo Box.

b. Repeat this process for the To country input field.



2. Define an entry list for the first dropdown list:

a. Right-click the From country dropdown list and choose Entry List from the context menu.

b. In the Name field, enter a name for the list, for example, Countries.

c. Select the Dynamic option and click Next. A dynamic list automatically displays the values from the selected data service field at runtime (whereas a static list displays values that you define manually).

3. Locate the data service that you require:

a. From the Search in dropdown list, choose the IDES system (the source of the data that we need), such as IDES_R3.

b. From the Search for dropdown list, enter the name of the data service ISA_GET_COUNTRY_LIST.

c. Click Search and then choose the ISA_GET_COUNTRY_LIST data service from the Results list.

d. Click Next.

4. Configure the input parameters:

a. Drag from the Request Flights item on the left to the Input item on the right, to map the data flow between the elements.

b. Select the mapping line, and in the Assigned Value column, enter the value EN then click elsewhere in the dialog box. This indicates that the value EN is the input to the data service so that the entry list items are the English values.

c. Click Next.

5. Configure the output parameters:

a. From the Output port dropdown list, choose COUNTRYLIST.

b. In the Assigned Value column, select the following values from the fx dropdown list:

■ VALUE: Land1

■ TEXT: Landx

These values indicate that the field values for the dropdown list items are taken from the Land1 data service field, while the display names are taken from the Landx data service field.

c. Click Finish.

6. Repeat steps 2 to 5 to create the same dynamic entry list for the To country dropdown list.

7. Save the model.




9. In the Results area of the Deploy task panel, expand the node of the development component you created, expand the Web Dynpro node, and click the Flights link under the Html or Flex node to run the application.



10. Verify that you can either enter a country code or choose a country from a list. Use the following values:

○ From city: New York

○ From country: United States

○ To city: Frankfurt

○ To country: Germany

Result The Search Flight form in the runtime application enables you to enter a country code in the To country and From country fields, or to click the button to select a country value from a list. The form should look similar to this:

3.4 Creating a Wizard

Use In this lesson, you learn how to change your Flight application to a wizard-like step-by-step process. You use a wizard to divide the application into separate pages between which the user can navigate.

Prerequisites You have created the model as described in Creating an Entry List [Page 27] and it is open in Storyboard.

Procedure ...

1. Create the wizard container and steps:

a. On the Design board, open the Compose task panel and drag a Wizard container to an empty location. A Wizard icon is added, containing a single step.

b. Click the Add Step ( ) icon in the wizard container. A second step is added.

Each time you click the icon, a new step is added to the wizard. You need three steps in the wizard for this example, so click the Add Step ( ) icon one more time.

c. Drag each view into the appropriate wizard step, in the order in which they appear in the business process.

d. Drag the data services to reposition them below the wizard.



2. Configure the wizard:

a. On the Design board, select the wizard, and in the Configure task panel configure the wizard properties as follows:

■ Show toolbar: Select this checkbox to add a toolbar to the wizard. Adding a toolbar to the wizard enables you to add navigation buttons to the toolbar in a later step.

■ Default layer: From the dropdown list, make sure that Step1 is selected to be the step displayed by default when the wizard opens.

b. Select each step within the wizard and in the Configure task panel, in the Title field, rename each wizard step respectively: Flight Search, Flight List, and Flight Details.

The value in the Title field is displayed as the title of each wizard step during runtime.

3. Save the model. It should look something like this:

4. Rename the button in the Request Flights input form and define a custom action for the

button. The custom action is used to trigger data transfer and display the next wizard step:

a. On the Layout board, click the Flight Search step of the wizard in the wizard roadmap.

b. Right-click the Submit button and choose Configure from the context menu.

c. In the Text field of the Configure task panel, change the button text to Search and press Enter.

d. Right-click the Search button and from the context menu choose Action. The Define Action dialog box is displayed.

e. From the Action list, delete the Submit action (select the action and click the Delete Action (-) button).

f. Add a custom action by clicking the Add Action (+) button and choosing Custom Action from the list. Name the new action Next and click Close.



To make sure that the wizard steps are displayed in the correct order at runtime, transitions should always follow a button click and not use the default actions (for example, Submit).

5. Define a transition between the Flight Search step and the Flight List step. You use the same name for the event and transition so that when you click the Search button, the input form data is sent to the data service and the Flight List step of the wizard is displayed.

a. On the Design board, select the Flight Search step. Drag from the solid dot at the top of the Flight Search step to the flashing dot on the Flight List step, and from the context menu choose next. Note that the flashing dot is removed if you drag the pointer into a wizard step or outside of the wizard borders.

b. Select the submit line connecting the Request Flights input form to the Bapi_sflight_getlist data service and in the Configure task panel, change the Event name to next. This ties the button action to the event line.

6. Define a transition between the Flight List step and the Flight Details step, triggered by the buttons in the Flight List step. For this step, we need to add buttons to the Flight List step going backward and forward.

a. On the Layout board, select the Flight List roadmap icon to display the Flight List table.

b. Select the Flight List table and in the Configure task panel, check the Show toolbar checkbox to add a toolbar to the table.

c. In the Toolbar dropdown list, select Bottom to place the toolbar at the bottom of the wizard step.

d. From the Compose task panel, drag two Button controls to the new toolbar. The toolbar area is a strip across the bottom of the wizard, and it is outlined as you drag the button controls over it, so you can see where to place the controls.

e. In the Configure task panel, specify the properties for the first button as follows:

■ Text: Back

■ Action: Open the Define Action dialog box and choose the Back action from the Add Action dropdown list. Click Close. For this button, we can use a predefined system action rather than creating a transition and using a custom action.

f. Specify the properties for the second button as follows:

■ Text: Show Details

■ Action: Enter the text Next directly in the Action field and press Enter to create a custom action with this name.

g. On the Design board, select the Flight List step. Drag from the solid dot at the top of the Flight List step to the flashing dot on the Flight Details step, and from the context menu choose next.

7. Define a transition from the Flight Details step back to the Flight List step, triggered by the button in the Flight Details step.

a. On the Layout board, select the Flight Details roadmap icon to display the Flight Details form.

b. Select the Flight Details form and in the Configure task panel, select the Show toolbar checkbox to add a toolbar to the form.



c. In the Toolbar dropdown list, select Bottom to place the toolbar at the bottom of the wizard step.

d. From the Compose task panel, drag a Button control to the new toolbar. The toolbar area is a strip across the bottom of the wizard, and it is outlined as you drag the button control over it, so you can see where to place the control.

e. In the Configure task panel, specify the properties for the button as follows:

■ Text: Back

■ Action: Open the Define Action dialog box and choose the Back action from the Add Action dropdown list. Click Close.

8. Edit the layout of the wizard steps on the Layout board:

○ To display a specific wizard step, select the step icon in the wizard roadmap.

○ To display the contents of all the steps simultaneously, press Ctrl while you select all the step numbers in the wizard roadmap. This is useful if you want verify that certain items are aligned at the same location on different wizard steps.

○ Reposition the controls and resize the step contents as required.

9. Save the model.




11. In the Results area of the Deploy task panel, expand the node of the development component you created, expand the Web Dynpro node, and click the Flights link under the Html or Flex node to run the application. Check that you can move between wizard steps using the toolbar buttons.

Result The runtime application is presented as a three-step wizard. A roadmap appears at the top of the wizard using color and bold font to indicate the currently-displayed step.

The first step of the wizard should look similar to this:



The second step of the wizard should look similar to this:

The third step of the wizard should look similar to this:

3.5 Adding a Popup

Use In this lesson, you extend your Flight application by adding a Popup that displays additional information about the selected flight.

For general information and tips about popups, see Defining Popups [Page 110].

Prerequisites ● You have created the model as described in Creating a Wizard [Page 29] and it is

open in Storyboard.


○ BAPI_FLIGHT_CHECKAVAILIBILITY




Procedure ...

1. Add a toolbar button to the Flight Details form that triggers the Popup:

a. On the Layout board, display the Flight Details form.

b. From the Compose task panel, drag a button control to the toolbar.

c. In the Configure task panel, define the following properties for the button:

i. In the Text field, enter the button name Available Seats and press Enter.

ii. In the Action field, enter the text Available and press Enter to create a custom action with this name.

2. Create a Popup:

a. On the Design board, from the Compose task panel, drag a Popup icon into an empty area in the Flight Details step of the wizard.

b. Select the Flight Details form. Drag a transition line from the solid dot at the top of the Flight Details form to the flashing dot at the top left of the Popup icon, and choose available from the context menu. The newly created toolbar button triggers the opening of the Popup.

3. Create the Popup content:

a. In the Search task panel, search for BAPI_FLIGHT_CHECK and drag the BAPI_FLIGHT_CHECKAVAILIBILITY data service onto the Design board.

b. Drag out from the out port of the Flight Details form to the Input port of the bapi_flight_checkavailibility data service.

c. Select the connecting line, and in the Configure task panel choose the available event from the Event name dropdown list.

d. Right-click the available connecting line, and from the context menu choose Map Data.

e. In the Map Data dialog box, map the output fields of the Flight Details form to the corresponding input fields of the data service, as follows:

Target Field Assigned Value

Airlineid Carrid

Connectionid Connid

Flightdate Fldate

f. Drag out from the AVAILIBILITY output port of the data service to inside the Popup icon and add a form by choosing Form View from the context menu. Rename the form to Availability.

Make sure that the form is located inside the Popup icon.

g. Select the Popup icon, and in the Configure task panel:

■ Rename the popup window Title to Flight Availability.

■ Make sure that the Show toolbar checkbox is selected.



■ In the Toolbar dropdown list, make sure that Bottom is selected. This places the toolbar at the bottom of the popup window.

■ Make sure that the OK button checkbox is selected and deselect the Cancel button checkbox to add an OK button to the toolbar that closes the popup window.

4. Save and view the model. It should look similar to the following:

5. Define the Popup layout:

a. On the Design board, right-click the Popup icon and choose Layout Board.

The Popup opens in a separate window, displaying the fields that are retrieved from the data service.

b. Rename and rearrange the fields in the Popup as follows:

c. Close the Popup by clicking the X button.



6. Save the model.




8. In the Results area of the Deploy task panel, expand the node of the development component you created, expand the Web Dynpro node, and click the Flights link under the Html or Flex node to run the application. Check that the Popup opens when you click the Available Seats button.

Result The runtime application enables you to open a popup window that displays seat availability information for a specific flight, by selecting a flight and clicking the Available Seats button. The popup window should look similar to this:

3.6 Defining a Dynamic Expression

Use In this lesson, you learn how to define dynamic expressions and conditions to provide additional information in your Flight application. You use dynamic expressions to add a message field to the Popup that you created in the previous lesson. The message shows the number of available economy class seats on the selected flight, and is displayed only when there are fewer than 50 seats available.

Prerequisites You have created the model as described in Adding a Popup [Page 33] and it is open in Storyboard.



Procedure ...

1. Add a field to the Popup:

a. On the Design board, right-click the Popup icon and choose Layout Board from the context menu. The Popup window opens, containing the controls you previously defined.

b. From the Compose task panel, drag a Plain Text control to the Popup.

2. Define the text for the Plain Text control:

a. In the Configure task panel, in the Text field, click the Function (fx) button to enter the text. The Dynamic Expression Editor dialog box is displayed.

b. In the Expression box, delete any default text and enter the following expression: =" There are only "&NSTR(@Econofree,"")&" seats left in economy class!"

The formula indicates how many seats remain in economy class on the flight. It uses the NTSR function to display a formatted string representing the number defined in the Econofree data service field.

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

c. Click Check to verify that the expression syntax is valid and then click OK.

3. Define that the new Plain Text control is visible only when a certain condition is met:

a. In the Configure task panel, in the Visible field, click the Function (fx) button to specify the condition. The Dynamic Expression Editor dialog box is displayed.

b. In the Expression box, delete any default text and enter the following expression: =@Econofree<50

The formula indicates that the field should be visible only if the number of economy seats remaining on the selected flight is fewer than 50. It retrieves the number of free economy seats from the Econofree data service field.

c. Click Check to verify that the expression syntax is valid and then click OK.

d. Close the Popup.

4. Save the model.




6. In the Results area of the Deploy task panel, expand the node of the development component you created, expand the Web Dynpro node, and click the Flights link under the Html or Flex node to run the application. Display availability information for several different flights to check that the Plain Text control content is displayed only when there are fewer than 50 economy class seats available on the specific flight.



Result The runtime application displays a warning message in the Flight Availability popup window when the number of available economy class seats on the selected flight is fewer than 50. You can see the warning text below the data fields in the popup window. It should look similar to this:

You have finished creating an application that enables you to search for flights on a specific route, select a flight to display additional details, and view availability information for the flight. You could use the information you found using this application to book a flight using a flight reservation system.

You should now have a general understanding of how to model applications in Visual Composer, and be ready to start modeling your own applications.

Tasks November 2007


4 Tasks This section contains a description of the tasks you might need to perform throughout a typical workflow of modeling components with Visual Composer.

The tasks are grouped in the following main processes:

● Working with Models [Page 39]

Describes how to perform basic model operations in Visual Composer. It also describes how to manage models and development components.

● Working with Source Control [Page 49]

Describes how to work with models stored in the shared repository or source control system.

● Designing the Composite View [Page 53]

Describes how to locate data sources and design and configure the logic and data flow.

● Laying Out the UI [Page 75]

Describes how to design and configure the UI and layout of model elements and their controls.

● Performing Advanced Modeling Tasks [Page 103]

Describes tasks that are intended for more advanced users who have experience modeling with Visual Composer.

● Compiling and Deploying Models [Page 124]

Describes how to compile and deploy models to a specific runtime environment.

● Viewing Log Files [Page 126]

Describes how to view error messages and access the log files.

4.1 Working with Models This section describes how to perform basic operations with models in Visual Composer, for example, creating, opening, saving, and closing models. It also describes how to plan your models to maximize usability and increase efficiency, perform import and export operations, and use the Manage Models dialog box to manage models and development components.

You perform these functions using options in the Model menu, or by clicking the associated toolbar button.

For more information, see:

● Planning a Model [Page 40]

● Creating a Model and Development Component [Page 41]

● Opening a Model [Page 42]

● Saving a Model [Page 43]

● Saving a Copy of a Model [Page 44]

Tasks November 2007


● Closing a Model [Page 44]

● Importing a Model [Page 45]

● Exporting a Model [Page 46]

● Managing Models []

4.1.1 Planning a Model Before starting to model applications using Visual Composer, you should first take time to plan your models and the components used to create them. Careful planning enables you to create usable components in the most efficient manner.

Understanding Reusability Reusable components are core building blocks that you can use in building multiple components. By design, each component represents a specific part of an application model. Each component comprises several application steps that are logically performed together in a specific order. When combined, components are incorporated into an application model in a serial flow that represents the main tasks performed within a particular business process. For example, a model for a flight reservation application may include a log-in component, a search flights component, a book flights component, an order flights component, and a log-out component. The search flights, book flights, and order flights components might be reused several times within the same application model for multiple reservation scenarios. These same components might also be used in other application models that include the same business processes.

Modeling using reusable components markedly reduces model maintenance and improves model creation efficiency, enabling you to more quickly assemble models that reflect specific business processes. Through the use of reusable components, you can leverage these same reusable assets in the design of other models with little or no modification necessary.

Reusable components can also be built from other reusable components. Rather than building an all encompassing single component, you can assemble a component from multiple smaller components. You can then reuse these smaller components in other models.

Planning for Reusability When modeling applications, you should have specific knowledge of the application logic, a high-level understanding of the entire system, and a detailed understanding of the individual elements and tasks that are fundamental to the application model being created. This enables you to determine the operating scenarios or business processes that must be modeled and identify the key business activities that are common to multiple business processes.

To take advantage of Visual Composer component reusability, you should first invest time in planning your models, and decide how to create components that can be reused the most. You should analyze your model requirements and attempt to break the models down to the smallest level of reusable components. However, you should also keep in mind that if you use one component in several un-related application models, future changes that may be required in the component due to one application may have an undesired effect on the other applications that reuse the same component. So when planning for reusability, consider any future changes that may be needed and take them into account at this stage.

When planning your models, consider the following:

● Which processes and views do I want to include in my model? For example, search forms, report tables, specific process workflows, and so on.

Tasks November 2007


● Which processes in my model are self-contained processes that occur in multiple applications?

● What are the smallest building blocks into which I can divide each process to enable optimum reusability?

4.1.2 Creating a Model and Development Component

Use You create a new model by selecting the model type, assigning the model a name, and choosing the location in which you want to save the model. If the development component in which you want to create the model does not exist, you can create a new development component in the local repository.

Prerequisites If you are working with source control, the source control system has been configured appropriately. For more information, see Configuring Visual Composer to Work with NWDI [External].

Procedure ...

1. Click the New button in the main toolbar, or choose Model → New. The Create New Model dialog box is displayed.

You can also create a new service component within a component by dragging a Service Component operator from the Compose task panel onto the Design board. From the displayed context menu, choose New Service.

You can also create a new composite view within a component by dragging a Nested View from the Compose task panel onto the Design board.

For more information, see Introducing the Compose Task Panel [Page 62].

2. In the Model Type pane, choose the type that you want to create, for example,

○ Composite View: A model of an application task, such as searching for and displaying data

○ Service Component: A single customized data service that contains one or more data services

The options displayed depend on the Visual Composer kits that are installed on your Visual Composer server.

3. In the Name field, enter a name for the model.

4. From the Repository dropdown list, choose the repository type in which to store the model. You can choose from the following options:

○ Local Repository: Stores the model in a local repository with no source control. Models in the local repository can be accessed only by the user who created them.

Tasks November 2007


○ Shared Repository: Stores the model in a shared location where it can be accessed by other modelers. Models saved in this location are managed using basic source control features (check in and check out). When you create a model in the shared repository, it is automatically checked out to you that so you can start working on it. This option is available only if you do not have a source control system installed and configured for use with Visual Composer.

○ Source Control Repository: Stores the model in the selected source control system. This option is available only if you have a supported source control system installed and configured for Visual Composer.

5. In the Software component field, choose the software component in which you want to save the model.

You cannot create a new software component from within Visual Composer.

6. In the Development component field, choose the location in which to save the model. If there are no development components in the dropdown list, or if you want to create the model in a different development component, you can create one in the local repository as follows:

a. Click the New button next to the Development component field. The Create New Development Component dialog box is displayed.

b. From the Master language dropdown list, choose the source language to be used in the components stored in the development component.

c. In the Development component field, type a name for the development component.

d. Click OK. The new development component is created in the local repository and appears in the Development component field.

7. Click OK.

Result The new model opens in its own tab in Storyboard. If you chose to store the model in the shared repository or in the source control system, it is automatically checked out to you.

4.1.3 Opening a Model

Use You can open models that are saved in the local repository or in the shared repository or a source control system, to view or modify them as required. Each model that you open is displayed in its own tab in the workspace.

Procedure ...

1. Click the Open button in the main toolbar, or choose Model → Open.

2. In the Open Model dialog box, expand the model structure and browse for the model that you want.

3. Either double-click the model or select the model and click Open.

Tasks November 2007


Result The selected model opens in its own tab on the Design board.

If the model is saved in the shared repository or source control system and is not checked out to you or is checked out to another user, the model opens in read-only mode. You can then save a copy of the model, with a different name. For more information, see Saving a Copy of a Model [Page 44].

4.1.4 Saving a Model

Use You can choose to save a single model, or to save all open models at the same time. A model that has unsaved changes is marked by an asterisk (*) next to the model name in the model tab.

Saving a model results in different actions, depending on where the model is located:

● For a model residing in the local repository, the model with the changes overwrites the model that was previously saved.

● For a model residing in source control, the changes are saved in the local copy of the model. When you check the model in, it is saved as a new version of the model.

Prerequisites The model that you want to save is open in Storyboard.

Procedure ...

You can save a model in one of the following ways:

● Click the Save button in the main toolbar.

● Choose Model → Save.

● Right-click the model tab and choose Save <Model Name>.

You can also save a copy of a model. For more information, see Saving a Copy of a Model [Page 44].

You can save all open models in one of the following ways:

● Click the Save All button in the main toolbar.

● Choose Model → Save All.

Result The selected model is saved in the location from which it was opened.

If you are working with source control, you can cancel changes you have made and revert to a previous version of a model, using the Revert option in the Manage Models dialog box. For more information, see Reverting to the Last Checked In Version of a Model [Page 52].

Tasks November 2007


4.1.5 Saving a Copy of a Model

Use You can use the Save As option to save a copy of a model with a different name, in the local repository. Saving a copy of a model may be particularly useful if a model is read-only (for example, if it is checked out by another user) and you want to modify it and save it.

You can save a copy of a model in different locations in the local repository, depending on where the original model is located:

● If the original model resides in the local repository, you can save a copy only in the same development component.

● If the original model resides in a source-control system, you can save a copy in any development component in the local repository.

When you save a copy of a model, all references to the original model remain unchanged. Therefore, if you wish to save a copy of a model that contains nested or referenced components, it is not enough to save a copy of each referenced model separately. You also need to modify the references so that they point to the new copies of the components.

Prerequisites The model that you want to save a copy of is open in Storyboard.

Procedure ...

1. Perform one of the following:

○ Choose Model → Save As.

○ Right-click the model tab and choose Save As.

The Save As Local Copy dialog box is displayed.

2. In the Name field, specify a name for the copy of the model.

3. If the original model resides in a source-control system, in the Development component field, specify the name of the development component in the local repository in which to save the copy of the model.

Result The selected model is saved in the local repository with the specified name and in the specified development component. If the original model was saved in the local repository, the copy is saved automatically in the same development component.

4.1.6 Closing a Model

Use You can close a model in a number of ways. You can also close all currently open models, and close all models except for a specific model.

Tasks November 2007


Prerequisites The model that you want to close is open in Storyboard, and any changes that you made have been saved (if required).

Procedure ...

To close a single model, make sure that the model you want to close is the active (visible) model, and perform one of the following:

● Click the Close button in the toolbar.

● Choose Model → Close.

● Right-click the model tab and from the context menu, choose Close <Model Name>.

You can also close multiple models in one of the following ways:

● Right-click the model tab and from the context menu, choose Close Other Models, to close all models except for the active (visible) model.

● Right-click the model tab and from the context menu, choose Close All Models, to close all models (including the active model).

Result The selected models are closed and their tabs are removed from Storyboard. If you made changes to the model and the changes have not been saved, you are prompted to save them before the model is closed.

4.1.7 Importing a Model

Use You can import a previously exported model into the local repository. A model can only be imported into a development component with the same name as the development component from which it was exported. When you import a model, you also import any nested or referenced models that were exported with the model. You can choose whether you want to open the model after you import it.

Prerequisites A development component exists with the same name as the development component from which the model was exported.

Procedure ...

1. Choose Model → Import. The Import dialog box is displayed.

2. To locate the model to import, click the Browse button next to the File name field. The Choose file dialog box is displayed.

3. Use the Look in dropdown list to navigate to the model that you want to import and click Open.

The File name field displays the name and path of the file you selected.

Tasks November 2007


4. To open the model in Visual Composer after importing it, select the Open imported model checkbox.

5. Click Import.

Result The model is imported to the development component with the same name as the development component from which the model was exported. Any nested or referenced models are also imported.

If you chose to open the top-level model after the import process is complete, it is opened in Visual Composer.

Visual Composer has no way of validating that imported models were not modified outside of Visual Composer. To enable such validation, you need to use an external digital signature mechanism.

4.1.8 Exporting a Model

Use You export a model from your local repository by packaging all of its model files (XML and GML files) in a compressed zip file and saving it to your file system (either on your local computer or on a computer in your network).

When you export a model, any components that are referenced from or nested in the selected model are also exported. Any referenced or nested components must also reside in the local repository. Each component’s files are stored in a separate zip file, and then all of the zip files are combined into a single zip file and saved in the location you specify.

You can then take the exported zip file and send it to other modelers, or reimport to the local repository at a later date.

Prerequisites ● The model to export is open in Storyboard.

● The model must reside in the local repository, and any nested or referenced components must also reside in the local repository.

Procedure ..

1. Choose Model → Export. The Export dialog box is displayed.

In the Model name field, the name of the open model is displayed in the format <software component>/<development component>/<model name>.

To export a different model, click the Browse button next to the Model name field and select the required model from the model tree.

2. Click Export. The File Download dialog box is displayed.

3. Click Save.

4. Use the Save in dropdown list to navigate to the folder to which you want to export the model and click Save.

Tasks November 2007


5. Click Close to complete the export process.

Result The model files are saved in a zip file that you can distribute or use as required.

4.1.9 Managing Models You can manage the models that you created and saved in the local repository (your private models) and in the shared repository (public models) using the Manage Models dialog box. If you have a supported source control system installed and configured for use with Visual Composer, you can also manage the models stored using source control (models checked in by you and also models checked in by other users). You can also create development components in the local repository.

Understanding the Manage Models Dialog Box The Manage Models dialog box enables you to manipulate the models and development components in your Visual Composer development environment. You open the Manage Models dialog box by choosing Models → Manage Models.

The Manage Models dialog box contains the following areas:

● Toolbar: Enables you to create and manipulate development components and models in the local repository and shared repository or source control system.

● Display: Enables you to filter the display to show either of the following:

○ Visual Composer Models

○ Data Services used in the models in your development environment

● Repository pane: Displays a hierarchical tree of the folders and models in the local repository and shared repository or source control system.

● Status pane: Displays information about the selected model. In addition, for models saved in the shared repository or in a source control system, this pane displays information such as the check-out status, check-out user, and sync status.

You use the toolbar to access the functions of the Manage Models dialog box. The buttons in the toolbar are enabled according to the type of model that you select. For example, if you select a model residing in your local repository, the buttons for source control functions, such as check in and check out, are not available.

The following table describes each of the toolbar buttons in the Manage Models dialog box:

Button Name Description

New Development Component Enables you to create a new development component in the selected software component in the local repository. For more information, see Creating a Model and Development Component [Page 41].

New Model Enables you to create a new model under the selected development component. For more information, see Creating a Model and Development Component [Page 41].

Rename Enables you to rename an existing local

Tasks November 2007



model or development component.

Delete Deletes the selected model from the local repository.

Before you delete a model, you must make sure that it is not being referenced by any other model. Otherwise, the referencing model may not work as expected after you delete the referenced model.

If you chose Data Services in the Display filter (and not Visual Composer Models), this option enables you to delete the selected data service component.

This option can be useful if you added a data service to a model, and then deleted the data service from the model. In this case, the reference to the data service is deleted, but the data service still remains in the development component. You can use this option to delete it from the development component.

Export Software Component Exports the selected software component and all its models from the shared repository to a zip file at the location that you specify. You can then use this zip file when running a build using the offline build plug-in.

Add to Source Control Tags a development component in the local repository for source control and checks the development component and all of its models in to the shared repository or source control system. For more information, see Adding a Development Component to Source Control [Page 50].

Check Out Checks out the selected model from the shared repository or source control system. This copies it to your local repository so you can work on it and prevents it from being modified by other users. For more information, see Checking Out a Model [Page 51].

Check In Checks in a model previously checked out from the shared repository or source control system. After a model is checked in, it can be used and modified by others. For more information, see Checking In a Model [Page 51].

Tasks November 2007



Revert Cancels all changes to a model since it was last checked out or added to the shared repository or source control system. The current model is replaced by the previous version saved in the shared repository or source control system. For more information, see Reverting to the Last Checked-In Version of a Model [Page 52].

Sync Synchronizes a local version of the selected model with the latest version checked in to the source control system or shared repository. For more information, see Synchronizing a Model [Page 53].

Refresh Updates the tree in the repository pane so that it displays the most current folder and model information.

4.2 Working with Source Control In addition to storing models in a local (per-user) repository, Visual Composer enables you to store your models in a supported source control system, or in a shared repository.

To use the Design Time Repository (DTR) as your source control system, you must configure the DTR to work with Visual Composer. For more information, see Configuring Visual Composer to Work with NWDI [External].

The DTR is part of the SAP NetWeaver Development Infrastructure (NWDI). The SAP NetWeaver Composition Environment (SAP NetWeaver CE) does not come with an installation of the NWDI, but you can use the functionality of NWDI if you have access to a system with an already installed NWDI. For more information about the DTR, see Working with the Design Time Repository [External].

Storing models in a source control system enables you to activate version control on the models that you and other users create. If you do not have a source control system installed and configured to work with Visual Composer, a shared repository is provided by default. The shared repository enables different users to access models stored in it, and provides basic check in and check out functionality (without version control).

After a model is stored in a source control system or shared repository, you and other users can check the model out for editing or open it for read-only review.


● Adding a Development Component to Source Control [Page 50]

● Checking In a Model [Page 51]

● Checking Out a Model [Page 51]

● Reverting to the Last Checked In Version of a Model [Page 52]

● Synchronizing a Model [Page 53]

Tasks November 2007


Guidelines for Working with Source Control Following are some useful guidelines to keep in mind when working with source control:

● We recommend that you develop a model in the local repository until your model is ready to be shared with other users and can be reused in other models. You should then check it in to the source control system.

● To modify models stored in the source control system, you first check out the specific models that you want to modify. When you have finished, you check in all of the models that you checked out.

● To add models to the source control system, you check in the development component together with all of the models inside it. You cannot add individual models to the source control. This prevents problems that may occur when a checked-in model references a model that is not yet checked in.

● When reusing components in other models, you can reuse models that are:

○ Stored in the same local development component.

○ Stored in different development components (but the same software component), only if they are checked in to the source control system or shared repository.

● When you add a development component to source control, all of the models in that development component are automatically added and checked in to the source control system.

● When you open a model that is not checked out, or a model that is checked out to another user, it opens in read-only mode.

4.2.1 Adding a Development Component to Source Control

Use When you finish creating a model in a local development component, you can add the development component to a source control system. Adding a development component to a source control system automatically checks in all models in that development component.

The development component name must be unique within the source control system.

After a development component and its models are added to the source control system, they are available to other users and version control is activated on them. For this reason, you should only add a local development component to the source control system when all models in that development component are ready to be checked in.

Procedure ...

1. Choose Model → Manage Models.

2. In the Manage Models dialog box, expand the Local Repository node and choose the development component that you want to add to the source control system.

3. Click the Add to Source Control button. The Add to Source Control Details dialog box is displayed and the XGL file is created. The Add to DTR Details dialog box is displayed.

Tasks November 2007


4. From the Software component dropdown list, choose the software component to which you want to add the development component.

5. Click the button next to the Activity description field to open the Activity Description dialog box. Enter a description and click OK.

6. From the Domain dropdown list, select the relevant domain, if required.

7. Click Save.

Result The development component is removed from the local repository and added to the source control system. All models in the development component are also checked in to the source control system.

4.2.2 Checking In a Model

Use After modifying a model that is stored in the source control system, you check it in. Checking a model into the source control system enables version control on the model (when working with DTR) and allows other users to edit the model. When working with the DTR, each time the model is subsequently checked in, a new version of the model is stored.

To check in a model residing in the local repository, you need to add the relevant development component to the source control system. When you do this, all models in the development component are automatically checked in to the source control system. For more information, see Adding a Development Component to Source Control [Page 50].

Prerequisites You have checked out the model.

Procedure ...


2. In the Manage Models dialog box, expand the Shared Repository or source control system node and select the model that you want to check in.

3. Click the Check In button. The model icon in the tree changes to indicate that it is checked in.

Result The model is checked in and can now be modified by other users.

4.2.3 Checking Out a Model

Use Checking a model out of the source control system enables you to modify the model while simultaneously locking it for revision to other users. Other users see a Checked Out by <user> icon and can open the model for read-only review. To release the modified model for other users, you must subsequently check it back in or revert it.

Tasks November 2007


Prerequisites The model has been previously checked in or added to the source control system.

Procedure ...


2. In the Manage Models dialog box, expand the Shared Repository or source control node and select the model that you want to check out. Look at the icon next to the model to make sure that it is not already checked out (to you or to another user).

3. Click the Check Out button. The Activity Description dialog box is displayed.

4. Click anywhere in the Activity Description field. The field expands into an Activity Description dialog box.

5. In the text pane, enter a description of the changes you plan to make to the model and click OK.

6. Click Save. The model icon in the tree changes to indicate that the model is checked out, and information is displayed in the status pane that indicates that the model is checked out by you.

Result The model is checked out and is now locked, meaning that it cannot be modified by other users until you check it in. You can double-click the model in the Manage Models dialog box to open the model in Storyboard.

4.2.4 Reverting to the Last Checked-In Version of a Model

Use While working on a checked-out model, you can revert to the last checked-in version of the model to cancel all changes that you have made since checking out the model.

Prerequisites The model whose changes you want to cancel is checked out by you.

Procedure ...


2. In the Manage Models dialog box, expand the Shared Repository or source control node and select the checked-out model whose changes you want to cancel.

3. Click the Revert button.

Result The version of the model that you are working on is discarded and reverts back to the previously checked in version. All content changes made after the model was checked out are cancelled. The model icon in the tree changes to indicate that the model is checked in.

Tasks November 2007


If the model was open while you reverted it, the open version is no longer synchronized with the version that is checked in. For more information, see Synchronizing a Model [Page 53].

4.2.5 Synchronizing a Model

Use You can synchronize a development component or model stored in the source control system. This makes a local copy of the last checked-in version of the model or development component. Synchronizing a model may be useful when you want to be sure that you are viewing the latest changes that may have been made to a model by another user. You may also want to synchronize before deploying a model, to make sure that the latest model versions are included in the build (deploy processes use the local copies of models and development components).

When you open a component from the source control system, it is automatically synchronized before opening.

Procedure ...


2. In the Manage Models dialog box, expand the Shared Repository or source control node and select the development component or model that you want to synchronize.

3. Click the Sync button. The last check-in version of the selected item is copied locally.

Although the item is copied locally, it is not visible in the Visual Composer local repository.

4.3 Designing the Composite View After you have created a model and composite view component, you can start to design it. The design process takes place on the Design board, and includes some or all of the following steps:

● Discovering data services: You import the data services required as sources of information processed in the component. For more information, see Discovering Data Services [Page 54].

● Reusing components: You locate existing components to reuse them in your model. For more information, see Reusing Components [Page 58].

● Composing the composite view: You define the logic of the model by adding various model elements to the Design board and then define the information flow between the elements by connecting them and defining their input and output parameters. For more information, see Composing the Composite View [].

● Configuring the composite view: You configure each model element and connecting line, and define their attributes. For more information, see Configuring the Composite View [Page 72].

Tasks November 2007


You also use the Design board to design the content, logic, and flow of a service component. Most of the information in the sections listed here also applies to service components.

After you have designed the composite view as described here, you can lay out the UI of the model elements. For more information, see Laying Out the UI [Page 75].

4.3.1 Discovering Data Services

Use You import the data services required as the sources of information processed in the component. You can create a component that uses data services – including BAPIs, RFCs, Web services, BI data services and SAP enterprise services - from a number of different back-end systems. You drag data services onto the Design board, using the Search task panel.

When searching for enterprise services, you can search for an operation in a specific enterprise service, or you can search through the entire service repository, filtering by classification to locate the required enterprise service.

You can also use other Visual Composer models as reusable components within a component. For more information, see Reusing Components [Page 58].

Prerequisites ● The model into which you want to import the data services is open in Storyboard.

● Visual Composer is correctly configured to access the required data services from the back-end systems. For more information, see Maintaining RFC Destinations [External].

● To use Web services and enterprise services as a source of data in your models, make sure that their destinations are correctly defined in NetWeaver Administrator. If you are locating these Web services by querying the Services Registry, you also need to configure a connection to the Services Registry (as well as defining a destination for the Services Registry). For more information, see Creating Web Service Physical Destinations [External].

Procedure ...


2. From the Search in dropdown list, choose the system in which you want to search. You can select Service Registry to search all defined logical destinations in the service registry.

3. In the Search for field, enter the name of the data service that you want to locate. You can use an asterisk (*) in the string as a wildcard to search for a partial match.

4. From the Type dropdown list, choose the type of data service, for example, Bapi/RFC or WSDL. The available types depend on the system you chose in the previous step.

Tasks November 2007


5. If you chose Service Registry in the Search in dropdown list, you can specify additional criteria to fine-tune the search parameters:

○ In the Search task panel, click the Advanced Search option.

○ In the Select Classifications dialog box, expand the nodes and select the checkbox next to the classification categories according to which you want to search.

○ Click OK. The search is performed only within the classifications you selected.

6. Click Search. All data services matching the search criteria and residing in the selected system are displayed. Depending on the data service type, a link that displays additional details about the data service may also be displayed.

7. From the Results list, locate the data service that you require and drag it onto the Design board. If you performed a search in the Service Registry or WSIL, expand the result nodes to select the operation(s) that you require.

If the data service contains a large number of ports, the Choose Ports dialog box is displayed, listing the ports of the data service. Use this dialog box to display or hide the data service ports as required, and then click OK.

8. To import additional data services, repeat this procedure for each data service.

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 the necessary values in the input fields and click Test to display the results of the query.

Result The selected data services are added to the Design board and you are ready to model the component logic and flow, by defining the view elements and their connections. For more information, see Composing the Composite View [Page 60].

If you modify a data service (outside of Visual Composer) and then want to see those changes reflected in models that use the modified data service, you must reimport the data service. For more information, see Redefining Ports [Page 71].

4.3.2 Modeling Composite Views Using BI Data Services

Use Business experts can use Visual Composer available in SAP NetWeaver Composition Environment to provide business intelligence data and capabilities directly in operational processes and to provide user-specific BI data directly in a given business context. This approach enhances the BI capabilities of SAP NetWeaver by providing a flexible modeling infrastructure that makes it possible to embed BI directly into applications for strategic and operational decision making.

This documentation describes how to model composite views using BI data services. For general information about modeling composite views with Visual Composer, see Modeling Composite Views with Visual Composer [Page 1].

Tasks November 2007


Prerequisites To be able to model composite views with BI queries and query views, the following prerequisites must be met:

● You must create a system connection to an SAP BI system in the portal of the CE system.

For more information, see Defining Destinations [External].

● To be able to use BI queries and query views in your models, your BI system must be on SAP NetWeaver 7.0 SPS11 or higher.

Procedure

Inserting a BI Data Service in a Composite View ...

1. Open the Search task panel.

2. In the Search in dropdown list box, select the BI connection from which you want to insert a BI data service.

3. In the Type dropdown list box, select whether you want to insert a query or a query view.

○ When you select Query, you search for queries created in the BEx Query Designer.

○ When you select Query View, you search for query views created in the BEx Web Analyzer.

4. In the Search field, enter a search term.

5. Select a BI object from the results list and drag it to the Storyboard. A data service icon is created in the Storyboard.

6. The FILTER and VARIABLE input ports are typically connected to a form view, which enables you to enter values for filters and variables. The DATA output port can be connected to a table view or chart view to display the data. The INFO output port can be connected as a form view.

Note that BI queries and query views in SAP List Viewer (ALV) are not displayed in the same way as in the BEx Analyzer or BEx Web. For example:

● All structures for the query are in the columns.

● Characteristics in the drilldown of the columns are added to the drilldown in the rows.

● Hierarchies cannot be displayed.

● The definition of totals rows are not copied; these need to be defined in ALV.

● Exceptions cannot be displayed.

Tasks November 2007


Examples

Filtering a BI Data Service with the Results from Another BI Data Service ...

1. Display the results of the first query in a table view.

2. In the configuration for the table view, check whether the Selectable property is set to True.

3. Connect this table view to the FILTER input port of another BI data service.

4. Define the assignment for this connector; for example, assign the field Product of the input port filter to the field Product_Display_Key of the output port table.

Note that the syntax works for filters with key values (_Display_Key), but not with texts (_Text). For more information about the syntax for filters, see Structure of a BI Data Service [Page 57].

Using a BI Data Service in the Definition for Dynamic Entry Lists You can also use BI data services in the definition of dynamic entry lists for dropdown list boxes and combo boxes by filling the lists dynamically with BI master data or with the result of another query.

4.3.2.1 Structure of a BI Data Service A BI data service can have up to two input ports and two output ports. Using the FILTER and VARIABLE input ports, you can set the input parameters for the BI object (BI query or query view). The results for the BI object are made available in the DATA output port. The INFO output port provides general parameters for the BI object.

● FILTER input port

The FILTER input port contains exactly one field (key) for each characteristic in the rows, columns, or free characteristics of the BI object. Each filter field is of type String and can contain a filter condition, for which you can select a single value, multiple values, intervals, and arbitrary selection options:

○ Single value

Enter the value, for example, PROD1.

○ Multiple single values

Enter the values separated by semicolons, for example, PROD1; PROD2; PROD4.

○ Intervals

Enter the lower and upper values separated by a minus sign (-), for example, PROD1-PROD3.

○ Arbitrary selection options

You can enter a combination of single values and intervals, for example, PROD1; PROD3; PROD5-PROD8.

Tasks November 2007


● VARIABLE input port

The VARIABLE input port contains exactly one field (key) for each input-enabled variable of the BI object. You can specify whether the variables contain one single value, multiple single values, an interval, or a complete selection option. Each variable field is of type String and can contain selections with the same syntax as that used for filters.

If the BI object does not contain any input-enabled variables, the VARIABLE input port is not generated.

● DATA output port

The DATA output port is generated as follows:

○ A field is generated for each display type (key, text) of a characteristic in rows or columns, for example, Product_Text and Product_Display_Key.

○ The display for characteristic attributes is the same as that of characteristics.

○ If the BI object contains one key figure structure, three fields are generated for each structure member:

■ Field of type String for formatted values, for example, Revenue_FMTVALUE

■ Field of type String for units, for example, Revenue_UNIT

■ Numeric field for actual values, for example, Revenue_VALUE

Note that the field name is generated from the technical name of the structure element in the Query Designer (in the 'Revenue' example). If you do not specify a technical name for the structure element in the Query Designer, the GUID is used for the field name.

○ If the BI object contains a key figure structure and another structure, these three fields are generated for each member combination of the two structures.

● INFO output port

The INFO output port provides general parameters for the BI object, such as the name of the query, the data, and information about the last change made.

4.3.3 Reusing Components

Use Visual Composer enables you to create components that can be reused within different models. When reusing components, you create a reference to the reusable component, rather than creating a copy of it. This means that any changes made to a component can affect all models that reuse (reference) that component.

Be aware that other modelers can modify components that you use, and you may discover that the inputs and outputs that you require are not available.

Tasks November 2007


You use the Search task panel to locate existing components to use them in your model. When you reuse a component, you can either display it in the same window as the parent component (known as a nested component) or open it in a new window (using the Navigate connector).

To reuse a component in your model, the reused component must reside in any development component in the shared repository or source control system, or reside in the same development component in the local repository as the current model.

Prerequisites The model in which you want to reuse a component is open in Storyboard and is editable (either opened from the local repository or checked out by you from the shared repository).

Procedure ...


2. In the Search in dropdown list, choose Visual Composer Models.

3. In the Search for field, enter the name of the component that you want to reuse. You can use an asterisk (*) in the string as a wildcard to search for a partial match.

4. In the Type dropdown list, choose DC to search for a specific named development component or choose Model to find a specific named component.

5. Click Search. All components or development components matching the search are displayed. If you chose DC in the Type dropdown list, you can expand the development components that match the search criteria to see the models located in each development component.

6. From the Results list, locate the component that you require and drag it onto the Design board.

7. From the context menu that is displayed when you drop the component onto the Design board, choose how you want to reuse the component:

○ Nested View: Inserts a reference to the selected component from the current component, as a nested view. A nested view is displayed at runtime within the current component, in the same window. You can double-click a nested view icon to open it in a new model tab, so that you can define its input and output parameters or modify its contents if required.

○ Navigate: Inserts a reference to the selected component from within the current component, using a Navigate connector. A Navigate connector displays the reused component in the main window at runtime (replacing the previous contents of the window). A component that is reused using the Navigate option cannot output parameters to other components.

8. Define connections to or from the component:

○ If you chose Nested View:

i. Open the nested view component (by double-clicking its icon on the Design board).

ii. Add Signal In and Signal Out connectors so that you can transfer input and output parameters to the nested view. For more information, see Connectors [Page 64].

Tasks November 2007


iii. After you define the connectors, right-click the nested view icon in the parent component, and choose Redefine Ports from the context menu. In the displayed dialog box, select the newly added ports and click OK to display the ports on the nested component icon.

iv. Connect the required input and output elements to the nested view icon ports. For more information, see Connecting Model Elements [Page 70].

○ If you chose Navigate, connect the required input elements to the Navigate icon port. For more information, see Connecting Model Elements [Page 70].

9. To reuse additional components, repeat this procedure for each component.

To remove a reference to a component, right-click the nested view icon or navigate icon and from the context menu choose Delete. Note that only the reference is deleted; the actual component is not deleted.

Result The selected components are added to the Design board according to your selections and you are now ready to model the component logic and flow, by defining the view elements and their connections. For more information, see Composing the Composite View [Page 60].

4.3.4 Composing the Composite View

Use You define the logic of a model by adding model elements to the Design board and then defining the information flow between the elements. You add elements to a model by dragging them from the Compose task panel to the Design board. You can also add model elements by dragging out from ports of data services and other model elements that you previously added to the Design board. After you add elements to the Design board, you define the element logic and flow, and the input and output data for each element.

You can use the settings in the Options pane (Tools → Options) to define certain aspects of Storyboard behavior that affect the way you compose a composite view. For example, you can choose whether to prevent overlapping shapes on the Design board and whether to snap model elements to the grid. For more information, see Options Pane [Page 134] in the Visual Composer Reference Guide.

After you have composed the composite view, you configure the composite view properties. For more information, see Configuring the Composite View [Page 72].

The information in this section regarding connector and operator elements in the Compose task panel is applicable also when you create service components.

Prerequisites You have created a new model (Model → New) or opened an existing model (Model → Open) in Storyboard. For more information, see Creating a Model and Development Component [Page 41] or Opening a Model [Page 42].

Tasks November 2007


Procedure ...

1. From the Design board, click the Compose button in the task-panel toolbar. The elements available for composing the model are displayed in the Compose task panel.

2. Drag the element(s) you require from the task panel to the Design board. For a description of each of the elements, see Introducing the Compose Task Panel [Page 62].

If you are creating input to or output from data services that you have already added to the Design board, you can drag out from a port, and from the context menu choose an element. This is the recommended method for adding elements, since it automatically maps the data fields.

3. If you are using container elements that support multiple layers (for example Tabstrip, Wizard, and View Switch), add layers by clicking the Add Step icon in the relevant container. For example, you may want to add tabs to a Tabstrip container or add steps to a Wizard container. For more information, see Containers [Page 63].

4. Connect the items as needed, by dragging from the relevant in or out ports to other elements, to create the logic and flow of the application. You can define input to data services, output from data services, and views that are connected through data binding (meaning that the same data is displayed in both elements). For more information about different connection types, see Connecting Model Elements [Page 70].

If you drag out from an element that includes a large number of fields, the Define Data dialog box is displayed, enabling you to choose the fields for the element, and their default values. For more information, see Defining Data [Page 73].

5. If you are using nested views, open the nested view component and add Signal In and Signal Out connectors so that you can transfer input and output parameters to the nested view. For more information, see Reusing Components [Page 58].

6. Map the data fields from the elements used as input to the fields of a data service. For more information, see Mapping Data [Page 74].

Result Your basic model is created, displaying the application logic. Now you are ready to configure each of the elements, as described in Configuring the Composite View [Page 72].

Tasks November 2007


Example Your model may contain data services, views, containers, operators and other model elements, as shown in the following example:

4.3.4.1 Introducing the Compose Task Panel The Compose task panel serves as a repository of model elements that you can drag and drop onto the Design board to compose the model logic and flow. (When working on the Layout board, the Compose task panel enables you to add basic and advanced controls to the view and container elements that are already added to your model. For more information, see Adding Controls [Page 77].)

You build your model by dragging the required element icon from the Compose task panel onto the Design board. After you have placed elements on the Design board, you can also drag out from their input or output ports and use the options in the context menu to create a connected element.

The Compose task panel content changes according to the board that is currently displayed in the workspace. When working on the Design board, the Compose task panel displays the following model element types:

● Views [Page 63]

● Containers [Page 63]

● Connectors [Page 64]

● Operators [Page 68]

Tasks November 2007


4.3.4.1.1 Views Views are standardized and reusable UI elements, such as forms, charts, and tables. You add views to your model by dragging them from the Compose task panel to the Design board. You define their logic and flow, and their input and output data on the Design board. You then define the content and layout on the Layout board. You can add views directly to the Design board as top-level elements, or you can add them within a container.

The following table lists the views that are available when building your composite view component:

Name Icon Description

Form View

A data view used by the runtime user to input data, to view data, and to select displayed data.

Table View

A tabular view used by the runtime user to view output data and/or to edit data. This view displays each record in the dataset in a separate row and each field in a separate column.

Chart View

A view that displays data in a graphical chart format. A variety of chart types are available. For more information, see Configure Chart View Task Panel [Page 160] in the Visual Composer Reference Guide.

Nested View

A component that is displayed at runtime within the current component. This option enables you to reference a new reusable component from within your model. After you add a Nested View to your model, you can double-click its icon to open the component and define its content.

4.3.4.1.2 Containers Containers enable you to group model elements to define which view elements are visible to users at specific times in the application, and also to enable you to change the visible view elements according to user actions in the application. For example, you can use a wizard container to display view elements in numbered and layered boxes, as sequential steps to navigate between layers. You can also use a popup container to display view elements in a modal popup window. Depending on the container type, transition lines may be required to define the navigation between containers or container layers.

You add containers to your model by dragging them from the Compose task panel to the Design board. You can then drag views and other elements into the containers.

You can use multiple container types in a model, and you can also nest containers of the same or different types within each other. For example, you may want to:

● Add a Tabstrip container with a nested Popup container that opens when you click a button in a tab

● Add a Tabstrip container within a wizard page

● Nest two panels within a Panel container so that you can define a different layout for each nested panel

Tasks November 2007


The following table lists the containers that are available when building your composite view component:


Panel

A generic container used to create complex layouts. You can use Panel containers to assign different properties to content that is grouped in each panel. For example, you may want to arrange one set of view elements using a vertical flow, and another set of view elements using a horizontal flow. In this case, you could place each set of elements in a separate Panel container.

Tabstrip

A set of labeled tabs that enables navigation between content layers. Tabstrip containers enable you to group model elements into different tabs. The runtime user displays each content group by selecting the relevant tab.

Wizard

A container that uses sequential labeled steps to represent different content layers. The runtime user navigates between content layers using toolbar buttons or by clicking the step labels at the top of the Wizard container. For a step-by-step example, see Creating a Wizard [Page 29].

View Switch

A simple container that displays one content layer at a time, with no navigation selector. The View Switch container enables the runtime user to “flip” between views – similar to tabs – but by means of buttons that specify the navigation. The UI elements in one View Switch layer are displayed when the button in another View Switch layer is clicked.

Popup

A container that displays its content in a popup window. For more information, see Defining Popups [Page 110]. For a step-by-step example, see Adding a Popup [Page 33].

4.3.4.1.3 Connectors Connectors are points in the data flow that represent connections that channel data from/to points outside the open component. You can use connectors to:

● Bring parameters in from another component

● Send parameters at the end of the data flow to another component

● Define the component initialization or end value

● Enhance the data flow within the component

You add connectors to your model by dragging them from the Compose task panel to the Design board. You define their logic, flow, and connections to other elements on the Design board.

Tasks November 2007


The following table lists the connectors that are available when building your composite view or service component:

Name Icon Available in Description

Start Point

Composite view Defines a value used to initialize the component execution. For example, in a component used to display a number of Customer records, the initialization value defined in the Start Point could be 10.

You create one Start Point per component. To do so, you can create a single Start Point instance in the model, or, for convenience purposes, you can create multiple Start Point elements, all pointing to the same Start Point connector.

End Point

Composite view Defines a final value at the end of the component execution. For example, in a component that returns a value to another component, the value defined in the End Point could be the Customer Name field.

You create one End Point per component. To do so, you can create a single End Point instance in the model, or, for convenience purposes, you can create multiple End Point elements, all pointing to the same End Point connector.

Navigate

Composite view Defines the navigation to a referenced component that is opened in the main window (replacing the content from the initial component). A component accessed using the Navigate connector cannot output parameters to other components.

When you add a Navigate connector, the Create New Model dialog box opens, so you can create the referenced component. When you use a Navigate connector, you must create a new referenced component (you cannot reference an existing component). You can double-click the Navigate connector on the Design board to open the referenced component in a new model tab.

Tasks November 2007



Signal In

Composite view Receives asynchronous data sent from another component to a nested component. Use the Signal In connector only if you need to use asynchronous communication to transfer data to the nested view during runtime.

After you add a Signal In connector to a nested component, right-click the nested component icon in the parent component and choose Redefine Ports from the context menu. In the displayed dialog box, select the newly added ports and click OK to display the in port on the nested component icon.

Signal Out

Composite view Sends asynchronous data from a nested component to another component. Use the Signal Out connector only if you need to use asynchronous communication to transfer data from the nested view during runtime.

After you add a Signal Out connector to a nested component, right-click the nested component icon in the parent component and choose Redefine Ports from the context menu. In the displayed dialog box, select the newly added ports and click OK to display the out port on the nested component icon.

Data In

Service component Receives data from another component.

After you add a Data In connector to a service component that is referenced from another component, right-click the service component icon in the parent component and choose Redefine Ports from the context menu. In the displayed dialog box, select the newly added ports and click OK to display the in port on the service component icon.

Tasks November 2007



Data Out

Service component Sends data from a service component to another component.

After you add a Data Out connector to a service component that is referenced from another component, right-click the service component icon in the parent component and choose Redefine Ports from the context menu. In the displayed dialog box, select the newly added ports and click OK to display the out port on the service component icon.

User Data

Composite view

Service component

Contains the personal data of the user, retrieved from the runtime environment. The User Data fields can be referenced in any dynamic expression, thereby personalizing the component by creating dynamic attributes that depend on the current user data and preferences. For example, you might use the User Data connector as input to an Employee GetInfo data service.

Data Store

Composite view Temporarily stores data for later use. Each model uses a single Data Store. To make it easier to connect elements to the Data Store, you can add multiple Data Store elements to the Design board. However, these multiple Data Store elements all represent the same Data Store (data stored in one element is visible in the other elements).

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

More information: Storing Data in a Data Store [Page 106].

Data Bridge

Composite view Enables a dataset to be passed from a Visual Composer component to a Guided Procedures process.

More information: Transferring Data Using a Data Bridge [Page 121].

Tasks November 2007



Static Data

Service component Stores static flat data for use by a service component. You can create multiple Static Data connectors per service component. You manually define data for a Static Data connector and use it to output data from the service. Unlike a Data Store connector, you cannot add data to the Static Data connector at runtime (the data is predefined and static).

When you use the Service Component Wizard to add data to a service component, a Static Data connector is created for each data selection that you add.

More information: Creating a Service Using the Service Component Wizard [Page 113].

4.3.4.1.4 Operators An operator is a mechanism used to manipulate data returned from a data service according to specified criteria, prior to display in a model view.

You add operators to your model by dragging them from the Compose task panel to the Design board. You define their logic and flow, and their connections to other elements, in the Design board. After you add an operator to the Design board, you define its parameters by right-clicking the operator icon and choosing Define Operator from the context menu. For more information about the Define Operator dialog box for each operator type, see Operator Dialog Boxes [Page 226] in the Visual Composer Reference Guide.

Tasks November 2007


The following table lists the operators that are available when building your composite view or service component:


Filter

Defines selection criteria for retrieving and displaying records in a dataset. For example, you can filter documents by Creation Date so that only documents created on the specified date are displayed.

Sort

Sorts data in ascending or descending order according to a specified field. For example, you may want to alphabetically sort a list of records by Name, with a secondary sort according to Date, newest to oldest.

Aggregate

Aggregates the values of all the records of a specified field into a single record. For example, you may want to create an output record that totals the values of all the material orders.

Distinct

Omits records containing duplicate data from the dataset.

Note that the fewer fields marked as distinct, the fewer records are returned. For example, a data service returns the following fields: Bank Country, Bank Key, and Bank Name. If only Bank Country is marked as distinct, the first appearance of a value, such as France, in the combination of Bank Country–Bank Key–Bank Name is returned. Any subsequent combination containing France is not returned. If, on the other hand, all three fields are marked as distinct, each combination becomes distinct, so that the potential list of results is greater.

Union

Merges the data of multiple datasets into a new dataset.

You connect each data source output port (for example, data service, form view, table view, or other operator) that you want to merge to a separate input port on the Union operator. You add and remove ports on the operator by right-clicking the operator icon on the Design board and choosing Add Port or Remove Port from the context menu. You can add an unlimited number of ports.

For example, you may have a field in one data service called FirstName and a field in another dataset called FName. You can use the Union operator to combine the data from these two fields into a single field called Name. You can select the Key column to specify that the entries merged into the new Name field are unique (any duplicate entries from the source fields are not added to the target field).

Tasks November 2007


Switch

Defines multiple execution flows. You can use the Switch operator to receive input from multiple sources (such as a data service and a form view) and pass the received data as input to a single model element.

You connect each data source output port (for example, data service, form view, table view, or other operator) to a separate input port on the Switch operator. You add and remove ports on the operator by right-clicking the operator icon on the Design board and choosing Add Port or Remove Port from the context menu. You can add an unlimited number of ports.

Service Component Creates a new data service component. You can use this operator to model a customized data service that performs data processing that a group of operators or an advanced service might otherwise perform.

4.3.4.2 Connecting Model Elements You can connect model elements in several different ways, depending on the type of element and the type of information or event flow required. Connecting lines are used to channel data and events between model elements according to the specific element type. You use connecting lines to indicate the direction of the flow of information or events from one model element to another.

When you connect model elements to each other, you drag from the port of one element to the port of another element. The shape of the port indicates the type of data input to or output from the element:

Port Shape Meaning

Multiple records (record set), In

Single record, In

Clustered data, In

Multiple records (record set), Out

Single record, Out

Clustered data, Out

The following table describes the types of connections that you can make between model elements:

Connection Type Description

Data binding A connection between two view elements (or between a Web service and a view element) that channels identical data from the output port of one view element to the input port of the other view elements.

Data flow The means by which data is channeled between a data service and the connected model.

Tasks November 2007


Connection Type Description

Data mapping A connection between two model elements describing, for example, what data is input to an element or what fields are output from another element. This type of connection requires mapping of the data fields from the input element to the fields of the data service. For more information, see Mapping Data [Page 74].

When you drag out from the input port of a data service to create the input element, the fields are mapped automatically.

Transition A connection between two containers (Paneland Popup) or between two layers within a container (View Switch, Tabstrip, and Wizard), defined according to the event that triggers the transition from one layer to the other. To create a transition, select the source container or layer and drag the solid dot at the top to the flashing dot of the target layer or container. When you release the mouse, a transition line is created.

4.3.4.3 Redefining Ports

Use The Redefine Ports dialog box enables you to choose the ports that you want to display on a data service or nested component, so that you can connect to and from the ports when defining the data flow between elements.

The Redefine Ports dialog box opens automatically when you add a data service that contains a large number of ports. In addition, you can open the Redefine Ports dialog box at any time to change the ports that are displayed on the component. If new ports have been added to the component since you referenced it from your model, you can see them, and optionally select them, in the Redefine Ports dialog box.

If the component was created using Visual Composer, when you open the Redefine Ports dialog box, the latest port information is automatically retrieved from the cache of the latest checked-in version of the component and displayed. If the component was created outside Visual Composer, the Redefine Ports dialog box automatically shows the ports from the component version in the cache. Changes made to the component ports outside Visual Composer are not visible until you click Reimport in the Redefine Ports dialog box. Clicking Reimport copies the latest version of the component into the cache and displays the updated port information in the Redefine Ports dialog box.

Prerequisites You have referenced a component from the model on the Design board.

Tasks November 2007


Procedure ...

1. Right-click the referenced component and from the context menu choose Redefine Ports. The Redefine Ports dialog box is displayed, showing all ports defined for the component. Any ports that are already displayed on the component icon are selected in this dialog box. Any new ports that were added to the component are displayed in the dialog box but are not selected.

2. If the referenced component was created outside Visual Composer, click Reimport and then click Yes to update the cache with the latest version of the component. This process may take some time. At the end of the reimport process, any ports that are already displayed on the component icon are selected in this dialog box. Any new ports that were added to the component are displayed in the dialog box but are not selected.

3. Select the checkboxes of the ports that you want to use for the component and click OK.

Result The changes that you made to the port selections are reflected in the component icon on the Design board. You can now connect elements to the component ports.

4.3.5 Configuring the Composite View

Use After you have added elements to your model (using the Compose task panel) and you have connected the elements, you need to configure the attributes of each item. You do this using the Configure task panel together with the elements on the Design board.

Prerequisites You have composed all or part of your model, as described in Composing the Composite View [Page 60].

Procedure ...

1. On the Design board, make sure that nothing is selected (by clicking an empty area) and click the Configure button in the task-panel toolbar. The attributes for the component are displayed in the Configure task panel.

2. Review the attributes of the component in the Configure task panel and modify them as necessary.

3. When you have finished configuring the component itself, click each model element and connecting line to display and configure their attributes in the Configure task panel. For full descriptions of each attribute that you can configure, see Configure <Element> Task Panel [Page 156] in the Visual Composer Reference Guide.

4. Define operators, and map and define data, as follows:

○ Right-click operators and from the context menu, choose Define Operator. Configure the options in the displayed dialog box. For full descriptions of the dialog box options, see Operator Dialog Boxes [Page 226] in the Visual Composer Reference Guide.

Tasks November 2007


○ Right-click connecting lines that provide input to a data service, and from the context menu, choose Map Data. In the Map Data dialog box, map the data fields from the input element to the data service. For mapping information, see Mapping Data [Page 74]. For full descriptions of the options in the dialog box, see Map Data Dialog Box [Page 238] in the Visual Composer Reference Guide.

○ Right-click connectors and view elements, and from the context menu, choose Define Data. Configure the options in the Define Data dialog box. For full descriptions of the dialog box options, see Define Data Dialog Box [Page 236] in the Visual Composer Reference Guide.

...

Result ...

All the model elements have been configured and mapped as needed. You can now define the layout for each view and container element, and configure their fields and controls. You do this on the Layout board. For more information, see Laying Out the UI [Page 75].

4.3.5.1 Defining Data The Define Data dialog box enables you to choose the data service fields for an element, and specify their default values. For UI elements, the Define Data dialog box also enables you to choose the control to display for each field, or whether to hide the control (and thereby remove the field from the UI element). If the data service has field label values defined for the fields, you can choose whether to display them in the Define Data dialog box.

If you add an element to the model by dragging out from a data service that includes a large number of fields, the Define Data dialog box opens automatically. You can also display the Define Data dialog box at any time by right-clicking the element icon on the Design board and choosing Define Data from the context menu. For more information about the options in the Define Data dialog box, see Define Data Dialog Box [Page 236] in the Visual Composer Reference Guide.

You can use the Initialize Data dialog box (opened from the Define Data dialog box) to initialize values for connectors (Start Point, End Point, Signal In, Data In and Data Store). For more information about the options in the Initialize Data dialog box, see Initialize Data Dialog Box [Page 238] in the Visual Composer Reference Guide.

Virtual Fields

You can define virtual fields for an element. Virtual fields are fields that are not returned by a data service, and are defined manually in the Define Data dialog box. Field names are case-insensitive, and can contain only ASCII characters, digits, and underscores. They cannot contain spaces, cannot start with a digit, and must be unique within the same data structure level.

Virtual fields enable you to correct mismatches between data services. For example, suppose certain information is expected in the element to which data is being transferred, but the data (and corresponding field) does not exist in the original data service. In this case, you can create a virtual field so that the runtime user can enter the required data before transferring the field to the target element.

You can also use virtual fields to transfer data without it being visible to the runtime user. For example, you may want to use a virtual field of type Time to add a time stamp to data so that you can filter displayed information according to the time stamp. Using a virtual field in this case enables you to transfer the time stamp information without showing it to the runtime user. To enable the runtime user to view the time stamp information, you can bind the virtual field to a control to make it visible.

Tasks November 2007


Clustered Datasets

If an element contains a clustered dataset (a dataset containing nested tables and structures), you need to first choose the source data node for the element, and then define the fields. The fields are defined as if the dataset was flat. Since the following children of the view element are dependent on the source node data, you cannot change them after you choose the source node.

When working with clustered datasets, you can use the Initialize Data dialog box to initialize values for the dataset using input connectors (Start Point, End Point, Signal In, Data In and Data Store). You access the Initialize Data dialog box from the Define Data dialog box. For more information about the options in the Initialize Data dialog box, see Initialize Data Dialog Box [Page 238] in the Visual Composer Reference Guide.

4.3.5.2 Mapping Data

Use When you connect an element to an input port of a data service, you need to map the data fields from the input element to the fields of the data service. You map data fields to define which fields of the input data are the correct sources of data for the fields of the data service.

When you drag out from the input port of a data service to create an input element, or if you use the Compose task panel to add a view element to the Design board and manually connect it to the input port of a data service, the fields are mapped automatically.

For example, you may have a data service that expects to receive data for the Bank Country and Max Rows fields. If you create a form view by dragging out from the data service input port, these two data fields and their associated controls are added automatically to the form view and mapped to the corresponding data service fields.

However, if the input element’s dataset does not match that of the data service, if you want to change the automatic field mapping, or if the dataset is clustered, you need to manually map the data fields of the input element to the fields of the data service. For a clustered dataset, you also need to map any child nodes of the dataset as required (the root node is mapped automatically). You do this using the Map Data dialog box, as described in the following procedure.

Prerequisites On the Design board, you have connected an element to an input port of a data service.

Procedure ...

1. Right-click the connecting line between the element and the input port of the data service, and from the context menu choose Map Data.

2. Map the fields in one of the following ways:

a. If you are mapping fields in a flat dataset, in the Assigned Value column, specify each field that you want to map to each Target Field of the other element.

b. If you are mapping fields in a clustered dataset:

i. In the top part of the dialog box, drag from the Source node (the node containing the data for output) to the Target node (the node that receives the data). A mapping line is created between the two nodes, and any fields of the same name are automatically mapped to each other. If you are mapping a child node, the parent nodes are mapped automatically as well.

Tasks November 2007


The appearance of the mapping line changes according to whether the fields are mapped automatically or manually (a manual mapping has a diamond shape at the center of the line).

You can select an already mapped node, and click the Map All button in the toolbar to automatically map all child nodes of the selected mapped node.

ii. In the tree, select the node whose fields you want to map.

iii. In the table at the bottom of the dialog box, in the Assigned Value column, specify each field that you want to map to each Target Input Field of the other element.

To remove a mapping, select the mapping line and click the Unmap button in the toolbar. If you delete a parent node mapping, any relevant child node mappings are also deleted. If you delete a child node mapping, the parent node mappings are not deleted.

3. Click Close.

For more information about the options in the Map Data dialog box, see Map Data Dialog Box [Page 238] in the Visual Composer Reference Guide.

Result The fields are mapped, and at runtime the field data is transferred to the data service according to the mappings you defined.

4.4 Laying Out the UI When you have configured the attributes of the model elements, using the Configure task panel, the next step is to lay out the UI of the component as the user should see it at runtime. You do this on the Layout board.

You lay out the view elements by selecting and dragging the element edges to the required locations. The ways in which you can lay out the view elements depend on the layout options selected in the Configure task panel. For more information, see Defining Layout Options [Page 75]. For more information about the Configure task panel options, see Configure <Element> Task Panel [Page 156] in the Visual Composer Reference Guide.

On the Layout board, you also add and configure the controls and fields of each of the view and container elements in the component, using the Compose and Configure task panels.


● Adding Controls [Page 77]

● Configuring Controls [Page 81]

● Creating Toolbars [Page 86]

● Working with Dynamic Expressions [Page 87]

Tasks November 2007


4.4.1 Defining Layout Options You define the layout for views and elements in a model in different ways. Each type of layout is described in the following sections.

Defining Layout of View Elements in Components By default, the view elements (forms, tables, and charts) in a model are arranged one above the other (Vertical flow). Alternatively, you can arrange the elements side-by-side. To do so, on the Layout board, click outside the layout (no element is selected) and from the Layout dropdown list in the Configure task panel, choose Horizontal flow.

To change the order of the different views in a model, drag-and-drop them to a new location as needed on the Layout board.

Defining Layout of Controls in Form View Elements By default, controls in Form View elements are arranged in a single column. You can use the Columns dropdown list in the Configure task panel to change the layout of the controls by specifying the number of columns into which to organize the controls. The element is automatically divided into a layout grid of equal-width columns, according to your selection.

You can modify the layout of controls on the Layout board by dragging the controls to new locations within an element on the Layout board. As you drag, an arrow appears showing you the possible locations in which you can drop the control. The control automatically snaps to the new location, depending on the value selected in the Columns dropdown list. For example, if you specify the number of columns as 3 in the Columns dropdown list, the controls are automatically arranged in a grid containing three columns of equal width.

When you have more than one column in a form view, you can define the width of each column as a percentage of the total form width. To do this, right-click the form on the Layout board and choose Customize Columns. The Customize Column Widths dialog box enables you to enter a percentage width for each column (except for the last column, which is calculated automatically based on the width remainder). A column width must be greater than 0%, and the sum of all the column widths cannot exceed 100%. You can also click the Default button to automatically assign equal widths to each column.

For most control types, the control width is automatically set according to the column width and cannot be modified to fill a partial column. However, you can change the width of all control types to span multiple columns by dragging the control handles. For some control types, such as Button, you can also drag the control handles to modify the control width to fill a partial column. For some control types, such as Radio Group and Calendar, you can also drag the control handles to increase the height of a control. When you modify the control height, this increases the height of the control and its entire row.

You can use the Melting Group control as a container for multiple controls. You can add a Melting Group control to a form view, and then drag multiple controls into it. After the controls are inside the Melting Group control, you can drag their handles to define their widths. More information: Adding Controls in a Melting Group [Page 80].

Tasks November 2007


Controls are automatically placed in every cell of the layout grid. If you want a specific cell to remain empty, you can add a Plain Text control without a Text value to act as a placeholder to make the cell appear empty.

If you define controls that are visible or hidden dynamically at runtime according to certain conditions, the visible controls are automatically moved at runtime to fill up the gaps left by the hidden controls. This means that your control layout may not appear at runtime as you had intended. For this reason, we recommend that you do not define Hidden controls, but rather define the controls to be Enabled or disabled dynamically as required. In this way, the controls are always displayed at runtime, and the layout remains as you intended. Alternatively, you can make sure that controls that need to be dynamically visible or hidden appear at the end of the view element, so that if they are hidden, the remainder of the layout is not affected.

Defining Layout of Controls in Table View Elements You can drag controls from the Compose task panel to a Table View element. Each control fills an entire table column. You can also drag controls to the table toolbar. You can change the order of columns in a Table View element by dragging them to a new location in the table on the Layout board. As you drag, an arrow appears showing you the possible locations in which you can drop the control or column. You can also change the width of a column by dragging the relevant column handle until it reaches the correct width.

Defining Layout of Chart View Elements You define the layout of chart view elements using the options in the Configure task panel. The Layout board does not display a representation of the chart settings you define. For more information about the options in the Configure task panel, see Configure Chart View Task Panel [Page 160] in the Visual Composer Reference Guide.

4.4.2 Adding Controls

Use Controls enable you to display data fields that are retrieved from an entity, and/or transferred to another entity. To display a data field, you must bind it to a control. Depending on how you create a UI element, Visual Composer may automatically create and bind the relevant control that is needed to display the data in the field.

The recommended way to bind a field to a control is by selecting the control type for the field in the Define Data dialog box. However, you can also manually add controls to a view element by dragging them from the Compose task panel to the view on the Layout board. You may want to add controls in this way for the following reasons:

● You want to add a control that does not need to be bound to a field, for example, a Plain Text or Hyperlink control.

● You want to add a control and bind it to a virtual field that does not yet exist.

● You want to add a Melting Group control, to group several controls together. More information: Adding Controls in a Melting Group [Page 80].

For information about the controls available in the Compose task panel, see Controls Overview [Page 79].

Tasks November 2007


Prerequisites On the Layout board, you have displayed the view or container element to which you want to add a control.

Procedure ...

1. Drag a control from the Compose task panel to the required location in the view or container element. The control automatically snaps to its location, according to the defined layout options. For more information, see Defining Layout Options [Page 75].

To change a control type after you have added it to an element on the Layout board, you can right-click the control and choose Change Control Type → <Control> from the context menu. The list of available controls depends on the current view element, the current control type, and the type of the field that is bound to the control. For example, for an Input Field control that is bound to a field of type String, the list contains controls that can be bound to fields of this type, such as Dropdown List. It does not contain controls that require input of type Boolean, such as Checkbox controls.

2. For a control that cannot be bound to a field (for example, a Plain Text or Hyperlink control), select the control on the Layout board. Then, in the Text field in the Configure task panel, enter the display content of the control, for example, the text to display in a Plain Text control.

You can choose to bind the control to a field by selecting the required field in the Value field of the Configure task panel.

3. For a control that you want to bind to a virtual field that does not yet exist:

a. Right-click the element containing the new control and from the context menu choose Define Data. The Define Data dialog box is displayed.

b. Define a new virtual field by clicking the Add Field (+) button and choosing the field type from the list. A control is added automatically for the new field, and there is a checkmark in the first column (meaning that the field is now visible because it is bound to a control).

c. Click the Rename Field button to rename the field if required.

Field names are case-insensitive and can contain only ASCII characters, digits, and underscores. They cannot contain spaces, cannot start with a digit, and must be unique within the same data structure level.

d. Remove the control bound to the new field so that you can bind the field to the control you added in step 1, either by clicking the checkmark or by choosing Hide from the dropdown list in the Control column. Click Close.

e. Select the control and in the Value field of the Configure task panel, choose the newly-added field name from the dropdown list. This binds the new control to the new field.

4. Define values for the control properties in the Configure task panel as required. For more information, see Configure <Element> Task Panel [Page 156] in the Visual Composer Reference Guide.

5. Repeat the procedure to define additional controls as required.

Tasks November 2007


After you have added the controls, you configure their attributes, including their appearance, layout, and behavior. For more information, see Configuring Controls [Page 81].

4.4.2.1 Controls Overview The controls in the Compose task panel are divided into two groups: Basic Controls and Advanced Controls. Following is a list and description of the controls available in each group. For information about adding controls to a view element, see Adding Controls [Page 77].

Basic Controls

Control Icon Description

Input Field

A single-line text box that supports all data types

Checkbox

A dual-state selection control used for setting or clearing Boolean (yes/no) fields

Dropdown List

A list showing the possible values that can be selected and also the currently-selected value

Button

A control used to trigger actions when it is clicked with the mouse or activated using the keyboard

Hyperlink

An unbound control used to display a hyperlink that triggers a specific action when clicked

Date Picker

A date selection control that allows the user to select a date using a dropdown calendar

Progress Bar

A read-only control for displaying numeric values using a bar that is filled to display the current value relative to the total size of the bar

Plain Text

A control used to display a text message with uniform formatting

Text Editor

A multi-line text editing control with support for line breaks, word wrapping and scrolling

Melting Group

A control that can be used to group other controls, enabling more layout flexibility. More information: Adding Controls in a Melting Group [Page 80].

Advanced Controls


Combo Box

A combination dropdown list and input field, enabling the user to choose an option from a dropdown list or else enter values not available in the list

Radio Group

A selection control consisting of radio buttons, one for each value that a user can select. Only one radio button can be selected at any time

Tasks November 2007



Toggle Button

A dual-state selection control used to set or clear Boolean fields using a button

Calendar

A date selection control that allows the user to select a date or a range of dates using a navigable monthly calendar

Horizontal Separator

A horizontal line that visually groups items or separates content areas

Vertical Separator

A vertical line that visually groups items or separates content areas

Image

A control used to display an image by specifying its URL.

4.4.2.2 Adding Controls in a Melting Group

Use You can use a Melting Group control to group other controls in a form view, enabling more layout flexibility. For example, you can use a Melting Group to group controls with related functionality, such as Start Date and End Date Date Picker controls, or a Search Input Field control with a Search Button control.

You drag other controls into a Melting Group control, and then define the width of each control within the Melting Group control.

Prerequisites You have added a form view to a model and displayed it on the Layout board.

Procedure ...

1. Drag a Melting Group control from the Compose task panel to the form view.

2. Drag additional controls into the Melting Group control. The Melting Group control is outlined as you drag the controls over it, so you can see where to place the controls. In addition, arrows are displayed on the Melting Group control, indicating the possible locations in which you can place the new control.

You can drag controls from the Compose task panel, or from the form view in which the Melting Group control is located. You can also drag controls out of a Melting Group control and place them back onto the from view that contains the Melting Group control.

You can use a Plain Text control in a Melting Group control as follows:

● Add a Plain Text control between two other controls and specify spaces in its Text field value. This enables you to use it to add this amount of space between the other two controls in the Melting Group control.

● Add a Plain Text control to the left of a control without a label (for example, an Input Field or Dropdown List control), and use its

Tasks November 2007


Text field value to display a name at runtime for the label-less control.

3. Drag the handles of each individual control to define its width within the Melting Group control. Any other controls in the melting group resize automatically to fit the new control width you define.

4. Select the Melting Group control, and in the Configure task panel, configure its properties.

The easiest way to select the Melting Group control is to click its label on the Layout board. If the label is not displayed, move the cursor over the Melting Group control until the cursor changes to a four-way arrow, then click to select the Melting Group control.

5. Select each control within the Melting Group control, and in the Configure task panel, configure their properties.

Example The following runtime example shows a combination of an Input Field together with a Button control, both contained within a Melting Group control.

If the Input Field and Button controls were not within a Melting Group control, they would appear as follows at runtime:

The Melting Group control enables you to group the Item input field and the Search button together, to indicate that the Search button is related to this specific input field.

4.4.3 Configuring Controls After you have added controls to views and container elements, you configure their attributes, content, and behavior.

You configure the attributes for each control by selecting the control on the Layout board and clicking the Configure button in the task-panel toolbar. For a description of the attributes that can be defined for each control, see Configure <Element> Task Panel [Page 156] in the SAP Visual Composer Reference Guide.

In addition to attributes that you can define for a control, you can also define actions and entry lists for certain control types. For more information, see:

● Defining Actions [Page 81]

● Creating Entry Lists [Page 84]

4.4.3.1 Defining Actions

Use You use the Actions tab in the Define Action dialog box to define the action (or event) that can be triggered by a control. You can add a single or compound action for the control. You use

Tasks November 2007


the Validation tab in the Define Action dialog box to define the validation behavior for the control.

Tasks November 2007


You can define two types of actions:

● Predefined actions: Standardized events, such as closing a window or inserting a row.

● Custom actions: Specialized actions that you define.

The options in the Define Action dialog box change according to the action that you define. For a full description of the actions and their fields, see Define Action Dialog Box [Page 213] in the Visual Composer Reference Guide.

Prerequisites On the Layout board, you have added a control to a view or container element.

Procedure ...

1. Select the control for which you want to define an action and in the Configure task panel, click the Browse button in the Action field. (Alternatively, you can right-click the control and choose Action from the context menu.) The Define Action dialog box is displayed.

To define a single custom action, with only its name (and no other properties), you can enter its name in the Action field in the Configure task panel. You do not need to open the Define Action dialog box. The Action field is only editable if no actions have yet been defined for the control, or if the only action defined for the control is a single custom action.

2. In the Actions tab, click the Add Action (+) button. The list of actions is displayed.

3. Choose the action that you want to define for the control. You can choose a predefined action from the list, or Custom Action to define a specialized action. You can choose Other from the list to display additional predefined actions.

4. Define the properties for the action. If you defined a custom action, you also need to define the action name. The available properties depend on the action you choose. For a description of all the action properties, see Define Action Dialog Box [Page 213] in the Visual Composer Reference Guide. For certain action properties, you can define the value using a dynamic expression (by clicking the fx button). For more information, see Working with Dynamic Expressions [Page 87].

5. Repeat steps 2 to 5 to define additional actions, as required.

6. If you defined more than one action for the control, choose an option in the Execution mode dropdown list to specify how the actions should be performed:

○ Sequence: Indicates that the first action in the list should be checked at runtime to see whether its defined condition criteria are met. If yes, the action is performed and the next action in the list is then checked, and so on. This process continues until all actions in the list have been checked and all actions that meet the condition criteria have been performed.

○ Switch: Indicates that the first action in the list should be checked at runtime to see whether its defined condition criteria are met. If yes, the action is performed and no other actions in the list are checked or performed. If no, the next action in the list is checked, and so on. This process continues until a single action in the list meets the defined condition criteria and is performed.

Tasks November 2007


7. In the Validation tab, specify which controls are validated when this action is triggered. We recommend that you leave the default settings in this tab, unless you need to change the validation behavior for a specific control. For example, you may want to remove validation for a Cancel button. For more information and examples about validation behavior and creating validation rules, see Defining Validation Rules [Page 117].

8. Click Close.

Result The action(s) are defined and triggered at runtime.

You can modify action definitions at a later stage by right-clicking the control for which the action was defined, and choosing Edit Action from the context menu. In the displayed dialog box, you can modify the action definitions as required.

Example For step-by-step examples that use predefined and custom actions, see Creating a Wizard [Page 29] and Adding a Popup [Page 33].

4.4.3.2 Creating Entry Lists

Use The Entry List wizard enables you to create predefined lists of entries to be used as input for certain controls. Each entry list can be used as input for a single control.

You can create the following types of entry lists:

● Static: An entry list in which you predefine each item as a static value.

● Dynamic: An entry list that is populated dynamically from a data service at runtime, according to the input fields selected and the corresponding values that you assign.

Prerequisites On the Layout board, you have added a control with a bound field to a view or container element.

Procedure ...

1. Right-click the control and choose Entry List from the context menu. The Entry List Wizard is displayed.

The Entry List option is available only for certain controls that support entry lists.

2. Enter a name for the entry list, select the entry list type (Static or Dynamic) and click Next.

Tasks November 2007


3. If you selected Static:

a. Click the Add Row (+) button to add entries to the list.

b. Define a unique value and display text for each entry. The unique value is the field value that is transferred to the data service at runtime. The display text is the value that is displayed in the control for selection at runtime.

c. Select entries and use the Up and Down buttons to reorder the entries if required. This defines the order in which the entries are displayed in the list at runtime.

4. If you selected Dynamic:

a. Use the Search in, Search for, and Type fields to locate and select the data service from which you want to retrieve the entries at runtime, and click Next. For more information about searching for a data service, see Discovering Data Services [Page 54].

b. If you chose a data service with multiple or clustered input ports, you need to map the output port of the view element to the input port(s) of the data service. You do this by dragging from the icons on the left to the icons on the right. A mapping line is created between the two items. You can delete the mapping by right-clicking the line and choosing Delete Mapping from the context menu. For more information, see Mapping Data [Page 74].

c. The Target Field column displays the fields channeled through the input port that you selected. The Assigned Value column enables you to define the mandatory values that you need to send to the data service to get the output values you want in your list. Specify the values in the Assigned Values dropdown list using the following methods:

■ Assign a field from the dropdown list. The fields in the dropdown list are fields in the current form view that are of the same type as the input field type.

■ Use the Dynamic Expression Editor (choose Define expression from the dropdown list) to create a formula defining different values according to input value, such as IF('US','United States','Other'). For more information, see Working with Dynamic Expressions [Page 87].

■ Enter a different field found in the form (using the Dynamic Expression Editor). For example, for BANK_CTRY, you might assign a field @BANK_REGION. For more information, see Working with Dynamic Expressions [Page 87].

■ Enter a fixed value, such as United States for the BANK_COUNTRY input field

d. Click Next. From the Output port dropdown list, choose the data service port that returns the values used to populate the entry list.

e. If the output port contains a clustered dataset, from the Cluster node dropdown list, select the source node that contains the field whose values you want to use for the entry list.

f. In the table, map each field: In the VALUE row, specify the source field from which the field value should be taken. In the TEXT row, specify the source field from which the display text should be taken (the value displayed in the entry list at runtime). You specify output values in the same way as input values, described previously.

Tasks November 2007


■ You can use the Additional entries checkbox below the output table to add static items to the entry list. Items defined in this way are displayed at the top of the entry list at runtime; they are not displayed alphabetically with the dynamically added items.

5. Click Finish.

Result The entries in the list are displayed in the control at runtime.

You can modify the entries in an entry list at a later stage by right-clicking the control for which the entry list was defined, and choosing Entry List from the context menu. In the displayed Edit Entry List dialog box, you can modify the entry list definitions as required.

You can delete an entry list by clicking the Delete Entry List button in the Edit Entry List dialog box.

Example For an example of how to define an entry list for a control, see Creating an Entry List [Page 27].

4.4.4 Creating Toolbars

Use You can add a toolbar to a view or container element. The toolbar can contain a variety of controls, such as buttons, dropdown lists, and hyperlinks. Each control can be defined to initiate different actions at runtime, for example, adding a row to a table, displaying a popup window, or closing a window.

Prerequisites On the Design board, you have added the view or container element for which you want to create a toolbar.

Procedure ...

1. On the Layout board, select the view or container element to which you want to add the toolbar and select the Show toolbar checkbox in the Configure task panel. A toolbar is added to the selected element (you can see the toolbar as a gray strip in the element on the Layout board).

2. In the Configure task panel, in the Toolbar dropdown list, select where to place the toolbar on the element: Top or Bottom.

3. Drag the required controls from the Compose task panel to the toolbar area in the view or container element. The toolbar area is a gray strip that is outlined as you drag the controls over it, so you can see where to place the controls.

4. If needed, you can change the order of the controls on the toolbar by dragging them to a new position.

Tasks November 2007


5. Configure the controls in the toolbar as you would configure any other controls (including defining actions for them). For more information, see Configuring Controls [Page 81].

Result At runtime, a toolbar of controls is displayed at the top of the container or view element.

Example For a step-by-step example of how to create a toolbar in a wizard for navigation, see Creating a Wizard [Page 29].

4.4.5 Working with Dynamic Expressions A dynamic expression is a formula that you define for generating a dynamic field value. You can use dynamic expressions to define specific behavior in a property of a model element. You define dynamic expressions in the Dynamic Expression Editor dialog box.

Dynamic expressions can define conditions for field initialization, calculation, validation, and text manipulation. They can also be used to define element behavior, such as whether an element is visible, editable, or selectable. For example, you can define the following dynamic expression for a Plain Text control (static text display field) that indicates how many seats remain in economy class on a flight. ="Book your flight soon! There are only "&NSTR(@Econofree,"")&" seats left in economy class on this flight."


● Dynamic Expression Editor Dialog Box [Page 87]

● Defining Dynamic Expressions [Page 89]

● Frequently-Used Functions [Page 90]

4.4.5.1 Dynamic Expression Editor Dialog Box You access the Dynamic Expression Editor dialog box by clicking the Function (fx) icon displayed to the right of an attribute or property field that supports dynamic expressions.

The Dynamic Expression Editor dialog box contains the following areas:

● Expression pane: The area on the top left of the dialog box enables you to construct dynamic expressions. You can write the expression as free text, or you can create it by dragging functions from the Function pane to the Expression pane. When you drag a function to the Expression pane, the required syntax is displayed. When you define a dynamic expression, prefix it with an equal (=) symbol. In certain cases, the equal (=) symbol is added automatically when you drag an item to the Expression pane.

● Function pane: The area on the right of the dialog box displays a list of expandable nodes that group functions into the following categories:

○ Data Fields, which contains all of the fields available from the data services in your model. This can be useful if, for example, you want a particular action type, such as a hyperlink, to represent a specific output in a query.

○ Recently Used, which provides easy access to the functions you used last, up to a maximum of eight functions.

Tasks November 2007


○ All available functions, divided into the following categories: Text Functions, Numeric Functions, Date Functions, Time Functions, Quantity Functions, Conditional Functions, and Scientific Functions.

○ Operators, which lists all the mathematical, logical, and comparison operators available for use in the expression.

A descriptive tooltip is provided for each function. In addition, the syntax of the function is displayed after its name, and the icon to the left of each function represents the data type returned when the function is evaluated, as follows:

Icon Data Type

Boolean

Date

Number

Quantity

Text

Time

● Description field: The area below the Expression pane enables you to add any text related to the current expression, such as a reminder or a note to other users. Click anywhere in the field to open a Description dialog box in which you can enter, view, or modify descriptive text. Then click OK to close the dialog box and enter the text into the Description field.

● Message pane: The area below the Description field displays the validation results returned for the expression when you click the Check button. For more information, see Messages in the Dynamic Expression Editor Dialog Box [Page 88].

For a step-by-step description of how to use the Dynamic Expression Editor dialog box, see Defining Dynamic Expressions [Page 89].

4.4.5.1.1 Messages in the Dynamic Expression Editor Dialog Box When you click the Check button in the Dynamic Expression Editor dialog box, the area below the Description field displays the validation results returned for the expression. Validation results can include the following:

● If an expression is correct, it is confirmed with a green flag and the message Expression is valid is displayed.

● If an expression uses invalid syntax, an error (yellow flag) or warning (red flag) is displayed, together with information that helps you to correct the syntax.

● When there are type mismatches, the dynamic expression engine implicitly converts types where possible. For example, when it expects data of type String but the validation result is Boolean, the engine confirms the expression and generates a warning that suggests that you use a different function (or rely on the implicit conversion). You can choose to proceed with the defined expression, or you can modify it.

● If the type conversion is undefined, for example, when trying to convert data of type Date to type Boolean, the editor generates an error message. You can choose to proceed with the defined expression, or you can modify it.

Tasks November 2007


4.4.5.2 Defining Dynamic Expressions

Use You use the Dynamic Expression Editor dialog box to define specific behavior in a property of a model element. A dynamic expression is a formula that you define for generating a dynamic field value. The Dynamic Expression Editor dialog box enables you to define dynamic expressions and then validate their syntax. For more information, see Dynamic Expression Editor Dialog Box [Page 87].

For examples of many commonly-used functions in dynamic expressions, see Frequently-Used Functions [Page 90].

Procedure ...

1. Click the Function (fx) icon displayed to the right of the attribute or property field into which you want to enter a dynamic expression. The Dynamic Expression Editor dialog box is displayed.

2. In the Function pane on the right of the dialog box, expand the node for the category that contains the function that you want to use. Each function has an explanatory tooltip.

Make sure that the icon of the function that you choose matches the required data type. You can see the text displayed above the Expression pane to check what data type is expected in the result: Edit a dynamic expression that returns a result of data type: <Data_Type>.

3. Drag the required function to the Expression pane on the left of the dialog box.

For example, you may want to expand the Conditional Functions node and use the IF function. In this case, the following expression is displayed in the Expression pane:

IF(test,expr1,expr2) where test is any value or expression that can be evaluated to TRUE or FALSE, expr1 is the value that is returned if test is TRUE, and expr2 is the value that is returned if test is FALSE.

4. Use the displayed formula to create your custom expression. You can write the expression by entering free text in the Expression pane, by dragging additional functions from the Function pane to the Expression pane, or by using a combination of the two methods.

You can use the Data Fields node to locate another field whose value you want to include in your expression. To do this, expand the node and drag the field to the required position in the expression.

For more information about the required syntax, see Frequently-Used Functions [Page 90].

5. Click anywhere in the Description field to open the Description dialog box. Enter any text related to the dynamic expression, such as a reminder or note to other users, and click OK.

6. Click Check to ensure that the dynamic expression is valid. If an error occurs, an explanatory message is displayed. For more information about possible messages, see Messages in the Dynamic Expression Editor Dialog Box [Page 88].

7. When your expression is valid, click OK. The expression is displayed in the property or attribute field from which you accessed the Dynamic Expression Editor dialog box.

Tasks November 2007


Result For a step-by-step example of defining a dynamic expression, see Defining a Dynamic Expression [Page 36].

4.4.5.3 Frequently-Used Functions The following tables list some of the most frequently-used functions that you may use when defining dynamic expressions in the Dynamic Expression Editor dialog box. There are additional functions available that are not described in this section. You can find information about the additional functions by viewing the tooltips and syntax provided for each function in the Dynamic Expression Editor dialog box.

The functions in the Dynamic Expression Editor dialog box are divided into the following categories:

● Text

● Numeric

● Date and time

● Quantity

● Conditional

● Scientific

● Operators

Text Functions Function Description Syntax Examples

CAPITAL

Converts the first word in the returned string to initial caps.

CAPITAL (text)

CAPITAL(@COMP_NAME)

Displays the string with the first letter of the first word capitalized; for example: Atlas city.

CAPITALW Converts the returned string to capitalized words.

CAPITALW (text)

CAPITALW(@COMP_NAME)

Displays each word in the string as a capitalized name; for example: Atlas City.

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

FILL(len, [pad])

where pad is the optional character or characters for filling

FILL(8,*)

Returns a string of eight characters, using * to represent all empty characters in the string. For example, HOME would be displayed as HOME****

Similar or related functions: RPAD, LPAD, ZPAD

Tasks November 2007


Function Description Syntax Examples

FORMAT Enables the formatting of translatable output strings, by using variables.

FORMAT(text, parameter list)

where text is the string (including placeholder values for the variable strings), and parameter list is the comma-separated list of parameters. You can specify an unlimited number of parameters.

=FORMAT("Mr. {1} {2}", @FIRSTNAME, @LASTNAME)

Displays @FIRSTNAME and @LASTNAME values in the placeholders at runtime, for example Mr. John Smith.

The values of the additional parameters (following @) are inserted into the placeholders during runtime.

The placeholder values reference the additional parameters according to their order of appearance. Therefore placeholder {2} in the text string refers to the @LASTNAME value. Placeholder values start with '1', not '0'.

If a placeholder value has no corresponding string parameter, an empty string is used. If a string parameter has no corresponding placeholder value, it is ignored.

MID Returns a string starting from a specified number of characters from the beginning of the string and containing the next specified number of characters.

MID(text, start,len)

MID(@SHORT_TEXT,5,3)

Displays a substring consisting of the fifth, sixth and seventh character of the string. For example, DOCUMENTATION would be displayed as MEN.

RIGHT LEFT

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

RIGHT(text, [len])

LEFT(text, [len])

Where len is the optional number of characters

RIGHT(@SHORT_TEXT,4)

Displays the last four characters of the string. For example, a value of FINALCOST would be displayed as COST. LEFT(@Country,3)

Displays the first three characters of the returned string. For example, DOCUMENTATION would be displayed as DOC.

Tasks November 2007



TRANSLATE Indicates the string parts that require translation.

TRANSLATE(text,[tType])

where text is the string to be translated and tType (optional) is one of the classifications listed in Table F at the end of this section

=IF(@Status=="1", TRANSLATE("green"), TRANSLATE("red"))

Specifies that the values "green" and "red" should be included in the translation file. If these values are translated (using translation tools), the corresponding translated text appears at runtime, according to the value of the Status field. =(TRANSLATE("Football", "XTIT")=="Football")

When used in the Hidden property of a control, hides the control for languages that translate the term 'football' as something other than 'football'.

Do not use TRANSLATE for static values (use it only for dynamic expressions) because interpretation of the TRANSLATE function may affect runtime performance.

TRIM Removes the white space from both ends of the string.

LTRIM removes the white space only from the left.

TRIM(text) TRIM(@YEAR_TO_END)

Removes the white space in the returned value. For example, the value “ ANNUAL TURNOVER “ would be displayed as ANNUAL TURNOVER (without the spaces at the beginning and the end).

Related or similar functions: COMPACT, LTRIM, RTRIM

UPPER LOWER

Converts the returned string to upper case or lower case, respectively.

UPPER(text)

LOWER(text)

UPPER(@COUNTRY)

Displays the string in all capital letters; for example: ATLAS. LOWER(@COUNTRY_NAME)

Displays the string in all lower-case letters; for example: usa

Tasks November 2007


Numeric Functions Function Description Syntax Examples

CEIL Rounds a number upward to the nearest integer or multiple of a defined factor.

CEIL (n,factor)

where factor is the basis for rounding off the number

CEIL(@num,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.

Related or similar function: FLOOR

MAX Returns the largest value among a specified set of values.

MAX(n1,n2)

where n indicates a numbered list with unlimited arguments

MAX(EARNINGS_Q1,@EARNINGS_Q2)

Displays the larger of the values of the two cells.

Related or similar function: MIN

NSTR Returns a formatted string representing the defined number.

NSTR(n,mask)

where mask (optional) is a formatted sequence defined according to Table E at the end of this section

NSTR(@num,’B’)

Displays or hides zero/blank values. For example, an empty space or a value of 0 would not be displayed. NSTR(@SD_DOC,’Z’)

Displays leading zeros in the field value. For example, if there are 10 characters in the string, the number 1432 would be displayed as 0000001432. NSTR(@num,’10.2’)

Rounds off a long decimal output to a two-place decimal value. For example, a value of 142.3213762 would be displayed as 142.32. NSTR(@TOTAL_PRICE,’C’)

Adds a comma separator to values in the thousands. For example, a value of 682328 would be displayed as 682,328.

Tasks November 2007


Date and Time Functions Function Description Syntax Examples

DADD TADD

Increases/ decreases a date/time value by the specified number of date units.

DADD(dt,n,unit)

TADD (t,n,unit)

where unit (optional) is one of the enumerations listed in Table A at the end of this section

TADD(@CREATE_TIME,13,’H’)

Adds 13 hours to the returned value. For example: 10:17:22 would be converted to 23:17:22

Default format: HH:NN:SS

DGET TGET

Returns the numeric value of the selected part of a date or time.

DGET(dt, part)

TGET(t,part) where part is one of the enumerations listed in Table C at the end of this section

DGET(@CREATE_DATE,’M’)

Returns only the value of the specified time unit from within the date value. For example, 30.05.2002 would return 5, while 27.02.2004 would return 2.

DSTR TSTR

Converts a date or time object format to a defined text string.

DSTR (dt,mask)

DSTR (t,mask)

where mask (optional) is one of the devised characters from the set of special characters listed in Table B at the end of this section

DSTR(@DATE_FIELD,’MON DD, YYYY’) Converts the returned date value to a string date format. For example, 30.05.2002 would be converted to May 30, 2002

DSTR(DADD(@CREATE_DATE,13,’D’),’XML_DATE’) Using the DADD function, this expression adds 13 days to the returned date, and then converts the date format to the XML standard format. For example, 30.05.2002 would be converted to: 2002-06-12

DSUB TSUB

Returns the difference between two dates, in the specified date unit.

DSUB(dt1,dt2,unit)

TSUB (t1,t2,unit)

where unit (optional) is one of the enumerations listed in Table A at the end of this section

DSUB(NOW(),@CREATE_DATE,’D’)

Calculates the difference in the two dates, specified here, in days. For example, values of 16.09.2004 (today) and 05.8.2004 for these two fields would return 39.

DVAL TVAL

Converts a date or time string to a standard date/time object format.

DVAL(str, seq)

TVAL(str, seq)

where seq is:

EUR (DD/MM/YYYY

DVAL(@TIME_FIELD,USA)

Converts the date string returned to a standard format. For example, May 30, 2002 would be converted to the USA standard date format: 05/30/2002.

Tasks November 2007


Function Description Syntax Examples HH:NN:SS)

USA (MM/DD/YYYY HH:NN:SS)

XML (YYYY-MM-DDTHH:NN:SS)

FREE (free format)

NOW TNOW

Returns the current date or time.

NOW() NOW()

See the example for the DSUB function.

Quantity Functions Quantity functions enable you to manipulate and convert quantity values (concatenated values that combine a numeric value and a unit of measurement), for example, 20.90 USD or 100 KG.


QGET Extracts the numeric component of the specified quantity.

QGET(q)

where q is the quantity

QGET(20USD)

Extracts the numeric component from within the 20USD quantity value, in this case, 20.

QGETUNIT Extracts the unit code of the specified quantity.

QGETUNIT(q)

where q is the quantity

QGETUNIT(20USD)

Extracts the unit code from within the 20USD quantity value, in this case, USD.

QSTR Returns a formatted string of the specified quantity in the format “NUM UNIT", where NUM is the numeric component and UNIT is the unit code (note the space between NUM and UNIT).

QSTR(q,[mask])

where q is the quantity and mask is an optional formatted sequence defined according to Table E at the end of this section

QSTR(1250EUR)

Returns the 1250EUR quantity as a formatted string in the format "NUM UNIT", in this case, 1250 EUR.

QSTR(1250USD,'C.2')

Returns the 1250USD quantity as a formatted string in the format "NUM UNIT", adding a comma separator to values in the thousands, and rounding off the decimal output to a two-place decimal value, in this case, 1,250.00 USD.

Tasks November 2007



QVAL Parses a string containing a quantity value. If the string contains an invalid quantity value, the result is undefined.

QVAL(str)

Where str is a string containing a quantity value in the format “NUM UNIT"

QVAL('125.75 USD')

Parses the string 125.75 USD as a quantity value, in this case, 125.75USD.

QVAL('200 EUR')

Parses the string 200 EUR as a quantity value, in this case, 200EUR.

Conditional Functions Function Description Syntax Examples

IF Checks whether a specified condition is met. If it is, returns the first specified value; otherwise, returns the second specified value.

IF(test, expr1,expr2)

IF(@NET_PRICE>1000,’Expensive’,’Cheap’)

If the expression in the field is TRUE (the value is greater than 1000), the text Expensive is displayed. If the expression is FALSE (the value is equal to or less than 1000), the text Cheap is displayed.

IF(@initials==’DE’,’Germany’,’Other’)

If the string DE is returned, the text Germany is displayed. Otherwise, the text Other is displayed.

IF(@BANK_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 text Other is displayed.

ISNULL Returns TRUE if a reference is to an empty, undefined or null cell; otherwise, returns FALSE.

ISNULL

(value)

IF(ISNULL(@num),’NO FAX NUMBER’, @num)

If the value of the @num is empty, the value NO FAX NUMBER is displayed; otherwise, the returned value is displayed.

Tasks November 2007


Operators Type Symbol Function

Mathematical operators +

-

*

/

%

&

Addition

Subtraction

Multiplication

Division

Modulus arithmetic

Concatenation (Connects two returned values in order to produce a single, continuous value, using the syntax(string)&(string))

Comparison operators <

<=

>

>=

==

!=

<>

Less than

Less than or equal to

Greater than

Greater than or equal to

Equal to

Not equal to

Not equal to

Logical operators AND

&&

││

OR

NOT

!

Logical AND

Logical AND

Logical OR

Logical OR

Logical NOT

Logical NOT

Table A: DATE_UNITS

An enumeration of date/time units used for date/time arithmetic operations:

Code Date/Time Unit Milliseconds

Z Milliseconds 1ms

S Seconds 1,000ms

N Minutes 60,000ms

H Hours 3,600,000ms

D Days 86,400,000ms

M Months 2,592,000,000ms

Q Quarters 7,776,000,000ms

Y Years 31,536,000,000ms

Tasks November 2007


Code Date/Time Unit Milliseconds

C Centuries 3,153,600,.000,000ms

Table B: Date/Time Mask

The date/time formatting mask uses the following syntax:

[ date-part │ embedded-chars] * │ special-format

Mask Description

date-part Listed in Table C at the end of this section

embedded-chars Character codes other than those listed in Tables A and C

special-format Listed in Table D at the end of this section

To insert codes that are reserved as date-part codes, you can use HTML code (for example, you might use D for D).

Table C: DATE_PARTS

An enumeration of date/time parts used for date/time formatting operations:

Code Date/Time Part

D Days as 1-31

DD Days as 01-31

DAY Days 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 a 1900-9999

MS Milliseconds as 000-999

SS Seconds as 00-59

NN Minutes as 00-59

H Hours as 0-23

HH Hours as 00-23

H12 Hours as 0-12

Tasks November 2007


Code Date/Time Part

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

Table D: DATE_FORMATS

An enumeration of special date/time formatting values:

Code Format Sample Result

DATE DD/MM/YYYY 31/01/2001

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

LOCALE_DATE Locale date format Jan 31, 2001

TIME HH:NN:SS 02:39:40

SHORT_TIME H:NN 2:39

LONG_TIME Long time format 02:39:40 UTC+0200

XML_TIME THH:NN:SS 02:39:40

LOCAL_TIME Local time format 2:39:40

DATETIME DD/MM/YYYY HH:NN:SS 31/01/2001 02:39:40

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 Locale date/time format 2:39:40, Jan 31, 2001

Any arbitrary date/time formats can be defined using sequences of DATE_PARTS, listed in Table C.

Tasks November 2007


Table E: 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 Displays insignificant digits as zeros.

P Displays insignificant digits as spaces.

B Displays a space when the value is zero, regardless of other codes.

C Inserts a thousands separator into the number.

N Number of digits to display to the left of the decimal point. If omitted, only the significant digits are displayed.

.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 square brackets (such as [USD] or [EUR]).

NORMAL Displays the number in standard format.

Table F: Text Type Classifications

A list of type classifications used in the TRANSLATE function. The classifications are possible values for the tType parameter, and the display names are the strings that appear in the XLF file.

Code Display Name

XACT accessibility

XALT alternativetext

XBCB breadcrumbstep

XBLI listitem

Tasks November 2007


Code Display Name

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

XTOL quickInfo

XTXT generaltext

YACT accessibilitylong

YBLI list

Tasks November 2007


Code Display Name

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

Tasks November 2007


4.5 Performing Advanced Modeling Tasks The topics in this section are intended for more advanced users who have experience modeling with Visual Composer.

● Finding and Modifying References [Page 103]

● Storing Data in a Data Store [Page 106]

● Creating a Multi-Selection Table [Page 109]

● Defining Popups []

● Creating Service Components [Page 112]

● Creating a Service Using the Service Component Wizard [Page 113]

● Defining Validation Rules [Page 117]

● Managing System Aliases [Page 118]

● Preparing Models for Translation [Page 119]

● Modeling Composite Views for Use in Guided Procedures [Page 121]

● Creating an Error Report [Page 123]

4.5.1 Finding and Modifying References

Use When you rename or delete a field, or delete a view element (table or form), any references to the field or view element are broken, and may cause errors or unexpected model behavior. Field or element references can be found either in dynamic expressions, or as direct references, for example, in the From and To fields of a predefined action. Visual Composer provides a tool that enables you to search for references before you rename or delete a field or a view element, so that you can modify the reference accordingly and ensure that your application runs as expected.

You can search for references using the following procedures:

● Finding All Expressions

● Finding References to a View or Connector

● Finding References to a Field

Procedures

Finding All Expressions You can search for all expressions defined in a component. For example, expressions defined using the Dynamic Expression Editor dialog box, values entered in fields that can be edited using the Dynamic Expression Editor dialog box, references to fields and views defined in the Define Action dialog box, conditions defined in an operator dialog box, and so on. After displaying the list of expressions, you can sort them, review them, modify them, look for errors, and locate them on the Design board and Layout board.

Tasks November 2007


Open the ...

1. Make sure that the component in which you want to search is the active component (click its model tab to make it active).

2. Choose Tools → Find All Expressions. Visual Composer searches through all the expressions in the component and displays them in the Find All Expressions dialog box.

3. In the Find All Expressions dialog box, you can do the following:

○ Click a link in the Element column to highlight the selected element on the Design board or Layout board.

○ Click the button next to an expression to open the Dynamic Expression Editor dialog box, or other relevant dialog box (such as the Define Filter dialog box), and modify the selected expression. An expression that contains a syntax error is marked with an error icon.

After you modify an expression, the expression is updated in the Find All Expressions dialog box, if you modified it using the Dynamic Expression Editor dialog box. If you modified it using another dialog box (such as the Define Filter dialog box), the expression is not updated and is displayed in gray. You can then click the Refresh button in the Find All Expressions dialog box to update it with the changes.

For more information about the options in the Find All Expressions dialog box, see Find All Expressions Dialog Box [Page 242] in the Visual Composer Reference Guide.

Finding References to a View or Connector You can search for references to a view element (a table or form) or a connector. For example, a form may be referenced in a dynamic expression or in an action. This enables you to see where an element is in use, before you decide whether to delete it. ...

1. On the Design board, right-click the view or connector and choose Find References from the context menu. Visual Composer searches in the component and displays all references to the selected element in the Find Element References dialog box.

2. In the Find Element References dialog box, you can do the following:


○ Click the button next to an expression to open the Dynamic Expression Editor dialog box, or other relevant dialog box (such as the Define Action dialog box), and modify the specific expression. An expression that contains a syntax error is marked with an error icon.

After you modify an expression, the expression is updated in the Find Element References dialog box, if you modified it using the Dynamic Expression Editor dialog box. If you modified it using another dialog box (such as the Define Action dialog box), the expression is not updated and is displayed in gray. You can then click the Refresh button in the Find Element References dialog box to update it with the changes.

For more information about the options in the Find Element References dialog box, see Find Element References Dialog Box [Page 243] in the Visual Composer Reference Guide.

Tasks November 2007


Finding References to a Field You can search for references to a specific field. This search is useful to perform before you rename or delete a field, so you can first check where it is being used. After you find the references, you can choose to rename the field and update selected references with the new name, replace the field name in selected references with a different field name, or delete the field together with selected references. ...

1. Right-click the view or connector element that contains the field you want to search for and choose Define Data from the context menu. The Define Data dialog box is displayed.

2. Select the field whose references you want to find, and click the Find References button in the toolbar of the Define Data dialog box. Visual Composer searches in the component and displays all references to the selected element in the Find Field References dialog box.

Visual Composer only searches for references in the current component. If other components reuse this component and contain references to it, they are not displayed.

When you rename or delete a field directly in the Define Data dialog box, a message box is displayed stating that this may result in unresolved field references. You can also open the Find Field References dialog box and handle these references by clicking the Find references link in this message box.

3. In the Find Field References dialog box, you can do the following:


○ Rename the field and update selected references to it:

i. In the list of found references, select the checkboxes of the ones you want to update with the renamed field.

ii. Select the Rename field radio button.

iii. In the New name field, enter a new name for the field.

iv. Click Rename. The field is renamed and any selected references are also updated using the new name.

○ Delete the field and delete selected references to it: ...

i. In the list of found references, select the checkboxes of the ones you want to delete. You can only delete expressions that contain a reference to a single field, for example, =@NUM1 and =@Table1@NUM1.

ii. Select the Delete field radio button.

iii. Click Delete. The field is renamed and any selected references are also deleted. Note that this may result in controls being defined with empty values.

○ Replace the field in selected references with another field: ...

i. In the list of found references, select the checkboxes of the ones you want to replace with a different field.

ii. Select the Replace references radio button.

Tasks November 2007


iii. In the Replace with field, select the name of the field that you want to use. The fields in the dropdown list are those in the same dataset and of the same type as the current field.

iv. Click Replace. Any selected references are updated using the name of the specified field.

○ Click the button next to an expression to open the Dynamic Expression Editor dialog box, or other relevant dialog box (such as the Define Action dialog box), and modify a specific expression. An expression that contains a syntax error is marked with an error icon.

After you modify an expression, the expression is updated in the Find Field References dialog box, if you modified it using the Dynamic Expression Editor dialog box. If you modified it using another dialog box (such as the Define Action dialog box), the expression is not updated and is displayed in gray. You can then click the Refresh button in the Find Field References dialog box to update it with the changes.

For more information about the options in the Find Field References dialog box, see Find Field References Dialog Box [Page 244] in the Visual Composer Reference Guide.

4.5.2 Storing Data in a Data Store

Use A Data Store is a central data container in which you temporarily store data for later use. The data is stored in memory, and is available at runtime as long as the modeled application is open. When the modeled application is closed, the data store is emptied.

Each model uses a single Data Store. To make it easier to connect elements to the Data Store, you can add multiple Data Store elements to the Design board. However, these multiple Data Store elements all represent the same Data Store (data stored in one element is visible in the other elements).

The connecting lines to the input port of the Data Store are of data mapping type. The values in the Data Store are accessed using expressions.

Procedure ...

1. In your model, drag a Data Store connector from the Compose task panel to the Design board.

2. Drag from the out port of the UI element whose data is to be stored in the Data Store to the port of the Data Store element.

3. Define a virtual field in which to store the data:

a. Right-click the Data Store element and from the context menu, choose Define Data.

b. Define a virtual field for the Data Store by clicking the Add Field (+) button and choosing the type of data that you want to store. Add more fields as required.

c. The field is added with a default name. If you want to give it a meaningful name, click the Rename Field button and enter a new name.

d. To define a default value for each field, enter it in the Default Value column.

Tasks November 2007


4. Define the event used to transfer data to the Data Store:

a. Right-click the connecting line to the Data Store, and from the context menu choose Rename.

b. Name the event with the same name as the action that adds items to the Data Store (defined in step 6), for example: Add_Item.

5. Map values from the UI element fields to the Data Store fields:

a. Right-click the connecting line between the elements, and from the context menu choose Map Data.

b. In the Assigned Value column, choose a UI element field, enter a field name, or define a dynamic expression to specify from where to take the value that is placed in the Data Store.

6. On the Layout board, add a toolbar button for transferring items to the Data Store:

a. Select the UI component that contains the values to send to the Data Store and in the Configure task panel, select Show Toolbar.

b. From the Compose task panel, drag a Button control to the toolbar, and assign it a custom action with the same name as the event you defined in step 4, for example, Add_Item. For more information, see Defining Actions [Page 81].

7. On the Design board, drag a Form View icon from the Compose task panel to create a stand-alone form that displays the Data Store values at runtime in the component.

8. Define a virtual field to display the Data Store values:

a. Right-click the Form View element and from the context menu choose Define Data.

b. Define a virtual field for the form by clicking the Add Field (+) button and choosing the type of field.

c. The field is added with a default name. Give the field a meaningful name (the name is displayed as the control label in the form), by clicking the Rename Field button and entering a new name.

d. In the Control column, choose the type of control that you want to add to the form for the field.

e. In the Default Value column, click the fx button to open the Dynamic Expression Editor dialog box. In the list of functions in the right pane, expand the Data Fields group, then expand the store group, and double-click the name of the field in the Data Store. This is the field whose values will be transferred from the Data Store to the form.

f. Click OK to close the Dynamic Expression Editor dialog box.

g. Click Close in the Define Data dialog box.

Result At runtime, when the user selects an item and clicks Add Item, the item name is displayed in the field in the stand-alone form. When additional items are selected, they are concatenated in this field.

Tasks November 2007


Example In this example, we will use the Flights model and add a Data Store to it. We will then create a form called Departures into which users can transfer flight departure times from the Flight List table. Departure times transferred to the form are concatenated into a single string separated by semicolons. ...

1. Open the Flights model that you created in Creating the Basic Model [Page 20].

2. Drag a Data Store connector from the Compose task panel onto the Design board.

3. Drag from the out port of the Flight List table to the port of the Data Store element to connect them.

4. Define a virtual field of type String for the Data Store, named DepartureTimes.

5. Right-click the connecting line from the Flight List table to the Data Store, choose Rename from the context menu, and rename the line to Add_to_Departures.

6. Create a dynamic expression that maps values from the table to the Data Store.

a. Right-click the connecting line and from the context menu, choose Map Data.

b. Double-click the DepartureTimes row to open the Dynamic Expression Editor dialog box.

c. Enter the following expression: =IF(CONTAINS(store@DepartureTimes,@Deptime),store@DepartureTimes,store@DepartureTimes &(IF(LEN(store@DepartureTimes)>0,'; ',''))&@Deptime)

This expression checks whether the Deptime value transferred to the DepartureTimes field is already contained in the field. If it is not, the value is concatenated with the existing values.

d. Click Check to validate the expression, and then click OK.

7. Create another instance of the Data Store as described in steps 2-6. However, name the connecting line Clear_Departures and map the value '' as the Assigned Value of the input field in the Dynamic Expression Editor dialog box (this assigns an empty value to the DepartureTimes field).

8. On the Layout board, create toolbar buttons for activating and clearing the Data Store items:

a. Select the Flight List table and in the Configure task panel, select Show toolbar.

b. From the Compose task panel, drag a Button control to the toolbar, name it Add to Departures and define a custom action for it called Add_to_Departures.

c. Add a second button named Clear Departures, with Clear_Departures as the custom action.

9. On the Design board, drag a Form View icon from the Compose task panel to create a stand-alone form. Name it Departures and place it above the Flight List table.

10. Define a virtual field in the form to display the Data Store (departure list) values and name the field Departures (following step 8 in the previous procedure).

Tasks November 2007


Result At runtime, when the user selects a flight and clicks Add to Departures, the departure time is displayed in the Departures form. When additional items are selected, they are concatenated in the DepartureTimes field. When the runtime user clicks the Clear Departures button, all departure times in the form are removed.

4.5.3 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 and clicks a Submit button, all of the rows are transferred to the data service.

The following procedure describes the settings that you need to define to create a component with a multi-selection table.

Prerequisites On the Design board, you have added a data service that can receive multiple rows, and a table view that serves as input to the data service.

Procedure ...

1. Right-click the Table icon and from the context menu, choose Configure. The Configure task panel is displayed.

2. Select the Multi-selection checkbox. This enables runtime users to select multiple rows.

3. Select the line connecting the output port of the table and the data service.

4. In the Select mode dropdown list in the Configure task panel, choose one of the following:

○ All data rows: Transfers all rows of the table

○ Current data row: Transfers only the table row in which the cursor is located

○ Selected data rows: Transfers only the table rows that are selected by the runtime user

5. On the Layout board, create a toolbar button to transfer the values of multiple table rows to the data service:

a. Select the table and in the Configure task panel, select the Create toolbar checkbox.

b. Create a button with a descriptive name, for example, Submit Selected Rows, and define the action that transfers the table rows to the data service. The action should be the same as the event defined for the connecting line. You may also want to create an additional button, such as Submit All Rows. For more information about creating toolbar buttons, see Creating Toolbars [Page 86].

Result At runtime, users can select multiple rows in the table by holding down the Ctrl key and clicking each additional row. They can then submit the values of the selected rows to the data service, using the button defined for this purpose.

Tasks November 2007


4.5.4 Defining Popups

Use Popups are containers that enable you to display content in a popup window. For example, you may want to create a popup that displays additional information about the item selected at runtime in a Table View.

Prerequisites You have opened a model on the Design board.

Procedure ...

1. Drag a Popup container from the Compose task panel onto the Design board.

2. Drag one or more elements that you want to display in the popup into the Popup container. You can drag existing elements from the Design board, or new elements from the Compose task panel.

If the content of the popup is relatively simple (contains one or two elements), you can drag the elements directly into the Popup container. If the content is more complex (contains many elements), we recommend that you define the content in a Nested View inside the Popup container. The end result at runtime is the same, but creating popups with complex content in this way makes it easier to work with them during design time.

3. Drag a transition line from the solid dot at the top of the element that triggers the popup, to the flashing dot at the top left of the Popup icon. From the context menu that opens, choose an event name to trigger the popup or create a new event.

4. In the element that triggers the popup, define an action for the trigger. For example, you could add a Button control and define a custom action for it with the same name as the event that you selected in the previous step.

5. Configure the Popup:

a. On the Design board, select the Popup icon and click Configure in the task-panel toolbar.

b. In the Configure task panel, enter a Title for the popup window and define other popup properties. For example, you can define whether to show a toolbar in the popup, whether to show OK and Cancel buttons in the toolbar, and whether you want to perform a specific action when the popup is closed by the runtime user.

6. Lay out the Popup:

a. On the Design board, right-click the Popup icon and choose Layout Board. The Popup opens in a separate window, displaying any fields that are retrieved from a connected data service.

b. Rename, rearrange, and add UI elements (views and controls) to the Popup, as you would in any other container element. For more information, see Laying Out the UI [Page 75].

7. Close the Popup.

Tasks November 2007


Result The Popup is created. At runtime, it opens as a separate window when triggered.

Example For a step-by-step example, see Adding a Popup [Page 33].

Tips The following tips may be helpful when working with popups:

● In the Configure task panel, you can choose to show a toolbar in the popup and automatically add OK and Cancel buttons to it.

● You can use the Close action field in the Configure task panel to specify the action that occurs when the runtime user closes the popup (in addition to the default built-in functionality that closes the popup and transfers any mapped data).

● You can use the Close Window predefined action in the Define Action dialog box to close the popup. You define the Close Window action for a control in the popup and then choose the name of the popup window to close from the Window dropdown list.

● You use the Map Data dialog box to map data from a popup to another element, as you would between any other elements. For more information, see Mapping Data [Page 74].

If the mapping you need to create is relatively simple, you can define an Assign action that transfers data to a port of a different element. To do this, select the control and open the Define Action dialog box. Define an Assign action and from the To dropdown list, select the element to which you want to transfer the data. From the Target field dropdown list, select the field to which you want to transfer the data. For more information, see Defining Actions [Page 81].

Note that this method is not possible when you are mapping data from a nested view contained within a popup.

● If you are working with a popup in a nested view, you can use signals to manipulate the popup:

○ You can close the popup when the event is triggered within the nested view. To do so, select the nested view icon, drag out from the out port of the nested view, and choose Close Popup from the context menu. A Close connector is added with a connecting line to the nested view.

○ You can use the Signal In and Signal Out connectors to connect to any other element in the component. After you add signals, remember to right-click the nested view icon and choose Redefine Ports from the context menu to make the newly added ports visible in the nested view.

Tasks November 2007


● To map data between a nested view in a popup and its parent component, you can right-click the connecting line, choose Map Data, and map the data as you would between any other elements. For more information, see Mapping Data [Page 74].

If you are mapping data from an out port defined as Close Popup, you first choose the element to which to map the data (by dragging from the port on the left of the Map Data dialog box to the element on the right) and then perform the data mapping.

4.5.5 Creating Service Components

Use Service components enable you to combine and manipulate data services to create a customized data service. You can then reuse this service component as a source of data in other composite views, instead of customizing the data services each time in each composite view. For example, you can create a service component that contains two data services and a Union operator with complex definitions to provide a single combined data output.

You define the logic of a service component by adding data services to the Design board, and adding connectors and operators to define the information flow between them. You add connectors and operators to the Design board by dragging them from the Compose task panel. You can also add them by dragging out from ports of data services and other model elements that you previously added to the Design board.

You can also create a service component using the Service Component wizard. This wizard assists you in creating a simulated service that contains static data and input ports. You can use this wizard if you need to create a demo service that contains data, or if you are creating a model and the service you need to use does not yet exist. For more information, see Creating a Service Using the Service Component Wizard [Page 113].

After you have composed the service component, you configure the service component properties. You do this in the same way as for composite view properties. For more information, see Configuring the Composite View [Page 72].

Prerequisites You have created a new service component using the Create New Model dialog box or by dragging a Service Component operator from the Compose task panel onto the Design board and choosing Create Service from the context menu. For more information, see Creating a Model and Development Component [Page 41].

Procedure ...

1. In the Search task panel, locate the required data service and drag it to the Design board. Locate and add additional data services as required. For more information, see Discovering Data Services [Page 54].

2. Click the Compose button in the task-panel toolbar. The connectors and operators available for the service component are displayed in the Compose task panel. For a description of each of the elements, see Introducing the Compose Task Panel [Page 62].

3. Drag the connectors or operators you require from the Compose task panel to the Design board.

Tasks November 2007


You can also drag out from an element port and from the displayed context menu choose an element to add.

4. Connect the items as needed, by dragging from the relevant in or out ports to other elements, to create the logic and flow of the service component. You can define input to data services, output from data services, static data (using the Static Data connector), and manipulate the data using operators (such as Sort and Filter).

If you drag out from an element that includes a large number of fields, the Define Data dialog box is displayed, enabling you to choose the fields for the element and their default values. For more information, see Defining Data [Page 73].

5. Map the data fields from the elements used as input to the fields of a data service. For more information, see Mapping Data [Page 74].

6. Configure each of the elements in the service component as described in Configuring the Composite View [Page 72].

Result You have created a service component that serves as a source of customized data. You can now reuse this service component in other models. For more information, see Reusing Components [Page 58].

Example Your service component may contain data services, connectors, and operators. The following example shows a service component that uses a data service that checks whether a specific customer exists, and if it does, the first data service passes the customer ID to a second data service that sorts and outputs the specified customer’s details.

4.5.6 Creating a Service Using the Service Component Wizard

Use Visual Composer provides a wizard that enables you to model a service component and add data and input ports to it.

This may be useful if you are modeling an application and the services you need to use do not yet exist in the back-end system. In this way, you can model the application, and then later replace the service created by the wizard with the real back-end service when it exists.

Tasks November 2007


You can also use the wizard to create a mock-up of a service, so that you can show a service developer the requirements of the data service that you want them to create. The wizard also assists you in creating a service component that you can use when creating a demo application. Since the wizard enables you to add static data to the service component, you can create a model that actually works at runtime, and use it for demos.

When using the wizard to create a service component, you can click Finish at any point to create the service component – you do not need to complete all the steps of the wizard. After you create a service component (with or without the wizard), you cannot modify its data or definitions using the wizard. If you want to modify a service component, you need to manually modify its elements individually in the Design board.

Prerequisites If you want to create a service component to reuse within a specific model, the model in which you want to reuse the service component has been opened.

Procedure ...

1. Perform one of the following:

a. From the Compose task panel, drag the Service Component icon to the Design board. From the context menu, choose Use Wizard. The Service Component Wizard is displayed.

b. Choose Tools → Service Component Wizard. The Service Component Wizard is displayed.

2. In the Define Service Name page:

a. Enter a name for the service component.

b. If you opened the wizard by dragging the Service Component icon to the Design board, the new service component will be created in the development component of the currently opened model. If you opened the wizard using the Tools menu:

i. From the Repository dropdown list, choose the repository type in which to store the service component. You can choose from the following options:

■ Local Repository: Stores the service component in a local repository with no source control. Service components in the local repository can be accessed only by the user who created them.

■ Shared Repository: Stores the service component in a shared location where it can be accessed by other modelers. Service components saved in this location are managed using basic source control features (check in and check out). When you create a service component in the shared repository, it is automatically checked out to you that so you can start working on it. This option is available only if you do not have a source control system installed and configured for use with Visual Composer.

■ <Other source control system>: Stores the service component in the selected source control system. This option is available only if you have a supported source control system installed and configured for Visual Composer.

ii. In the Software component field, choose the software component in which you want to save the service component.

Tasks November 2007


You cannot create a new software component from within Visual Composer.

iii. In the Development component field, choose the location in which to save the service component. If there are no development components in the dropdown list, or if you want to create the model in a different development component, you can create one using the New button. More information: Creating a Model and Development Component [Page 41].

iv. Click Next.

3. In the Define Data page, add static data for the service that will be output according to the conditions you define later:

a. Specify whether the first row of the data you want to add is a header row, by selecting the Header row checkbox.

b. Add data as follows:

■ Copy data from a supported spreadsheet application, such as Microsoft Excel, and paste it in the Data pane by clicking the Paste from Clipboard button or pressing Ctrl+V.

You can also paste data from a text editor, as long as each field is separated by a tab character, and each record is separated by a newline character.

■ Drag a data selection from a supported spreadsheet application, such as Microsoft Excel, and drop the selection in the Data pane.

The data selection is added to a static data connector (displayed in the Connectors pane of this wizard page).

c. Repeat the previous step to add more data as required.

Note the following:

● Each data selection is added to a new static data connector.

● The type of data in each row is defined by the data types in the first row.

● All subsequent data selections that are added must have the same format as the initial data selection that was added.

● You can delete static data connectors (and consequently, the data they contain) by selecting the relevant connector in the Connectors pane and clicking the Delete Connectors button or pressing the Delete key.

● The same header row is used for all subsequently added data. Even if you delete all the static data connectors, the header data remains.

● A blank row of data causes all data after the blank row to be added in a new static data connector.

Tasks November 2007


d. Rename the static data connectors to give them more descriptive names, as required:

i. Select the connector to rename in the Connectors pane.

ii. Click the Rename Connector button or press F2 and enter a new name.

e. Click Next.

4. In the Define Input page, define the input ports for the service component and the types of data they can receive:

a. In the Input ports pane, click the Add Port button and choose the data type for the port from the dropdown list: Record or Record Set.

b. Click the Rename Port button or press F2 to enter a descriptive name for the port.

c. Add additional ports as required. You can select a port and click the Delete Port button or press the Delete key to delete it.

d. For each port, in the Fields pane, define the types of data that it can receive.

The options in the Fields pane are the same as in the Define Data dialog box. For more information, see Define Data Dialog Box [Page 236] in the Visual Composer Reference Guide.

e. Click Next.

5. In the Define Conditions page, define the guard condition for each static data connector:

a. Select the static data connector.

b. In the Guard Condition column, enter the condition according to which the data that the static data connector contains is output by the service component. You can either:

i. Enter a condition directly in the field.

ii. Click the fx button to define a condition using the Dynamic Expression Editor dialog box. For more information, see Defining Dynamic Expressions [Page 89].

6. Click Finish.

Result If you opened the wizard by dragging the Service Component icon to the Design board, the new service component is added to the currently open model. You can double-click the service component icon to open it in a new model tab.

If you opened the wizard using the Tools menu, the new service component is created in the specified development component and is opened in a new model tab.

The service component contains a Data In connector for each input port that you defined, a Static Data connector for each static data selection that you added, and a Data Out connector. Each of the Static Data connectors is connected to the Data Out connector using a data map line with the guard condition that you defined for it.

You can right-click each of the elements and choose Define Data to view or modify the data that you defined for each element using the wizard. You can modify the service component in the same way as you would modify any other service component (you cannot modify a service component using the wizard).

Tasks November 2007


4.5.7 Defining Validation Rules

Use You can define a set of validation rules to check the validity of the values of a specific control, and to respond in case of an invalid value. In the Validation Rules dialog box, you define the condition that the control must fulfill, and also the error message that is displayed if validation fails. If the runtime user enters a value that is defined as invalid for the control, the error message you define for the validation condition and value is displayed. For example, you can specify that a control should not be blank, and if it is blank, an error message should be displayed asking the user to specify a value.

In addition to the validation rules that you can define for a specific control, you can also define which controls to validate when a specific action is triggered. If validation fails for a control, the action defined for that control is not performed. You do this in the Validation tab of the Define Action dialog box. We recommend that you leave the default settings in this tab, unless you need to change the validation behavior for a specific control. For example, you may want to remove validation for a Cancel button.

Controls are validated at runtime when the control receives focus. If a control is bound to a data service, it is validated when the data is returned from the data service. If a control fails validation, it may affect its appearance at runtime, and also affect any actions defined for the control. The actual effect of validation failure is defined by a combination of the option selected in the Behavior field of the Configure task panel, and the Validation Behavior option selected in the Validation tab of the Define Action dialog box. For more information about these options, see Configure <Element> Task Panel [Page 156] and Define Action Dialog Box [Page 213] in the Visual Composer Reference Guide.

Prerequisites On the Layout board, you have selected a control with a field that is bound to it.

Procedure ...

1. In the Validation area of the Configure task panel, select the Required checkbox to specify that the control is mandatory and must have a value defined for it at runtime. You can also click the fx icon to open the Dynamic Expression Editor dialog box and define a condition that specifies when the control is mandatory. A control marked as Required shows a visual indication at runtime that it is mandatory.

2. In the Rules field, click the Browse button to open the Validation Rules dialog box. Define the Condition, Value, and Error Message for each validation rule that you create, and arrange the rules in the order that you want them to be performed. For more information, see Validation Rules Dialog Box [Page 223] in the Visual Composer Reference Guide.

3. From the Behavior dropdown list in the Configure task panel, select the way in which the control should report validation failures:

○ Normal: If the control validation fails, indicate this visually at runtime in a nonintrusive manner. For example, the control may be marked with a red border, or a tooltip may be displayed.

○ Severe: If the control validation fails, indicate this at runtime in a more intrusive manner. For example, an error message may be displayed in a modal dialog box, or the runtime user may be prevented from moving the focus to another control until the value is changed and the validation is successful.

Tasks November 2007


The actual behavior of the control at runtime is defined by the runtime environment. The previous descriptions are only examples of possible runtime environment implementations.

Result At runtime, the control is validated according to the settings you defined. If the validation fails, the failure is indicated according to the selections that you made. In addition, any actions defined for the control may not be performed.

4.5.8 Managing System Aliases

Use You can view the back-end systems from which you have added data services in a model and rename the system aliases if required. This may be useful when system aliases have been changed or when a model is moved between servers that have different aliases for the same back-end systems.

Prerequisites You have opened a model that contains at least one data service.

Procedure ...

1. Open the model or models whose system aliases you want to review and modify.

2. Choose Tools → Manage System Aliases. The Manage System Aliases dialog box opens.

3. Select the system(s) whose alias you want to change and click Replace.

You can select multiple systems using the Select All and Clear All buttons, or by clicking the Select button and choosing the alias you want to modify from the dropdown list. All systems with this alias are selected in the list.

4. In the New Alias Name dialog box, enter the new system alias that you want to use for the selected data services.

You can view and modify system aliases in all currently open models by selecting the Show aliases in all open models checkbox.

Result The selected back-end systems are accessed using the new system aliases. For more information, see Manage System Aliases Dialog Box [Page 139] in the Visual Composer Reference Guide.

Tasks November 2007


4.5.9 Preparing Models for Translation

Use To translate the text strings of a Visual Composer model using the standard SAP translation system, you need to store the strings in the appropriate format. At SAP, this format is the XML Localization Interchange File Format (XLIFF) format (file extension XLF), which Visual Composer generates automatically during the model compilation process. At compilation, a separate master language XLF file is created for each model. This XLF file can be used to translate the model to multiple languages. The text strings in your model will then appear at runtime in the logon language.

Static values defined for the following properties are automatically tagged for translation and entered automatically into the XLF file:

● Label property values

● Title property values

● Tooltip property values

● Category Axis and Value Axis title property values for charts

● Display Text values for static items in static and dynamic entry lists

Avoid using the TRANSLATE function for static values, because 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. Dynamic expressions containing strings are added to the XLF file if they use the TRANSLATE function.

For example, see the following possible values for a Label property value:

● Hello: Tagged automatically for translation

● ”The price is” & @Price: Not tagged for translation

● TRANSLATE(”The price is”)& @Price: Tagged for translation

You can use the FORMAT function to format a translatable output string by using variables. The FORMAT function does not tag the string for translation. If the string also needs to be translated, you should nest a TRANSLATE function within the FORMAT function. The following example tags the string for translation, and enables the translator to change the syntax of the string during the translation phase to “Herr {2} {1}”:

FORMAT(TRANSLATE (“Mr. {1} {2}”), @FirstName, @LastName)

For more information about the TRANSLATE and FORMAT functions, see Frequently-Used Functions [Page 90].

Tasks November 2007


Procedure

To prepare text within a dynamic expression for translation: ...

1. To the right of the field (in the Configure Element task panel) that contains the expression, click fx. The Dynamic Expression Editor dialog box is displayed.

2. Select the formula and enter the required fields, as needed.

3. Before entering the text string, expand the Text Functions node and double-click TRANSLATE.

4. In the parentheses after TRANSLATE, enter the text string and, optionally, the UI-string classification code.

For more information about the TRANSLATE function and the possible values for the UI-string classification code, see Frequently-Used Functions [Page 90].

Result At compilation, the XLF file is created, containing all standard static strings and those strings created in expressions that use the TRANSLATE function. The XLF file can then be used to translate the model into multiple languages. The text strings in your model will then appear at runtime in the logon language.

The following is an example of how strings appear in the XLF file:

For information on how to translate the contents of an XLF file, see SAP Note 939180. You can find the SAP Note at SAP Service Marketplace at: service.sap.com/notes.

Tasks November 2007


4.5.10 Modeling Composite Views for Use in Guided Procedures

You can expose composite views created in Visual Composer as callable objects in the Guided Procedures design time, and then attach the callable object to an action in a Guided Procedures process flow. In Guided Procedures, these Visual Composer applications are called Web Dynpro for Visual Composer (WD4VC) Application callable objects. More information: Exposing WD4VC Applications as Callable Objects [External].

Following are some general guidelines for modeling composite views for use as WD4VC application callable objects in a Guided Procedures process flow:

● Each WD4VC application callable object that passes data to and from Guided Procedures should contain at least a Start Point and an End Point, or a Data Bridge and an End Point depending on the use case:

○ Use a Start Point and End Point when the dataset is flat and there is no semantic relationship between the fields. For example, if the dataset includes a customer ID field and a purchase order ID field.

○ Use a Data Bridge in any of the following situations:

■ The dataset is clustered.

■ The dataset is flat, but there is a semantic relationship between the fields. For example, if the dataset includes an address consisting of 10 fields (such as street, zip code, country, and so on).

■ The structure of the dataset is based on a Web service, RFC, or similar.

More information: Transferring Data Using a Data Bridge [Page 121]

● Add an end point to each WD4VC application callable object to terminate the application.

● A WD4VC application callable object that does not pass any data to Guided Procedures does not need a Start Point or a Data Bridge, it only needs an End Point.

● In a WD4VC application callable object that uses a Data Bridge to communicate with Guided Procedures, and the component terminates with result states, you should model the mapping lines to the Data Bridge with the same events that are used to trigger the End Point connectors.

● In a WD4VC application callable object that uses a Data Bridge to communicate with Guided Procedures, a Start Point can be used to initialize the application (and not to pass data to Guided Procedures).

4.5.10.1 Transferring Data Using a Data Bridge

Use The Data Bridge connector enables you to pass a dataset from a Visual Composer component to a Guided Procedures process and vice versa. You should use a Data Bridge connector to pass a dataset when:

● The dataset is clustered

● The dataset is flat, but there is a semantic relation between the fields, for example, an address consisting of 10 fields (such as street, zip code, country, and so on)

Tasks November 2007


● The structure of the dataset is based on a Web service, RFC, and so on

You can automatically add data to the data bridge in one of two ways – either by connecting the data bridge to a data service, or by using the Data Bridge wizard. You can also manually add data to the data bridge using the Define Data dialog box. The dataset of the Data Bridge connector must have the same metadata and type information as the dataset of the element to which it is connected. Visual Composer does not check that the datasets match, so you must manually check that they match before creating the connection.

Prerequisites The component that you want to use in Guided Procedures is open.

Procedure ...

1. Add a Data Bridge connector to the component, in one of the following ways, as relevant:

○ Drag a Data Bridge connector icon from the Compose task panel to the Design board.

○ On the Design board, drag out from a clustered out port on a data service in the model, and choose Data Bridge from the context menu.

○ On the Design board, if the model contains a nested view with a Data Bridge connector, drag out from the data bridge port on the nested view icon, and choose Data Bridge from the context menu.

2. Add data to the Data Bridge connector. If you added a Data Bridge connector by dragging out from an element on the Design board, the data from the source element is automatically added to the Data Bridge connector. If you added a Data Bridge connector by dragging it from the Compose task panel, add data in one of the following ways:

○ Use the Data Bridge wizard to import data from a data service. The Data Bridge wizard enables you to add data from a data service without adding a dependency to the data service to your model.

i. Right-click the Data Bridge icon and choose Import from Service from the context menu. The Data Bridge wizard is displayed.

The Import from Service menu item is available only if data has not yet been added to the connector (including data that was added automatically by connecting the Data Bridge connector to a data service or nested view).

ii. In the Select Data Service step, search for the data service whose data you want to add to the connector. The search options in this step are the same as the options in the Search task panel. For more information, see Discovering Data Services [Page 54].

iii. In the Select Port step, choose the data service port whose data you want to import.

iv. Click Finish. The data is added to the connector and you can see it in the Define Data dialog box.

○ Use the Define Data dialog box to manually define data: ...

i. Right-click the Data Bridge icon and choose Define Data from the context menu.

Tasks November 2007


ii. Manually define the data for the connector in the Define Data dialog box. For more information, see Define Data Dialog Box [Page 236] in the Visual Composer Reference Guide.

3. Connect the Data Bridge connector to other elements, as required. The data bridge port can serve as an in port and an out port. You can connect a Data Bridge connector as follows:

○ Within a component, you can connect a Data Bridge connector to the in port or out port of any other element, by dragging from the Data Bridge connector port to the element port. You can connect the data bridge port to multiple elements, using multiple data bind, flow, and mapping connections.

○ For a nested view that contains a Data Bridge connector, in the parent component you can drag from the data bridge port of the nested view and connect it to an out port of a data service or another Data Bridge connector, using a single data bind connection.

Result The Data Bridge connector is added and configured to transfer data to and from Guided Procedures according to the definitions and connections you created.

Example The following example transfers data from a nested view into a parent composite view using two data bridge connectors. The parent composite view is then accessed from Guided Procedures via the data bridge port on the parent composite view.

Visual Composer Component

Guided Procedures

4.5.11 Creating an Error Report

Use You can generate a zip file containing a comprehensive report of system errors, which you can attach when reporting a product error or customer message to SAP Support.

The information saved in the error report depends on the settings specified in the Embedded Support group of the Options pane (Tools → Options). For more information, see Options Pane - Embedded Support Group [Page 137] in the Visual Composer Reference Guide.

Procedure ...

1. Choose Help → Create an Error Report. The File Download dialog box is displayed.

2. Click Save.

Tasks November 2007


3. Use the Save in dropdown list to navigate to the folder in which you want to save the error report and click Save.

Result A zip file is created in the specified location. The zip file contains files, or zipped sets of files, for each information type specified in the Embedded Support group of the Options pane.

4.6 Compiling and Deploying Models

Use The models that you create in Visual Composer are saved in Generic Modeling Language (GML) format, a proprietary format in which all Visual Composer models are saved. You can build models (a combination of compilation and deployment) on demand at any time (fast deployment), so that you can debug and review them during the modeling process.

In addition, your Visual Composer environment may be configured to automatically run nightly builds that build models that are checked in to the Design Time Repository (DTR). For more information, see Configuring Visual Composer to Work with NWDI [External].

When you compile your model, the code is converted from GML format into Executable GUI Language (XGL) format. When you deploy your model, the compilation process is performed, and then the XGL format is converted into a supported runtime language, such as Web Dynpro. When you build a model, all components stored in the current model’s development component are automatically built.

During deployment, the model is automatically deployed to the runtime environment required for the specific component type, according to the runtime specified in the Configure task panel for the specific component. You can view (read-only) the runtimes defined for each nested component type for a selected default runtime by clicking the View runtime configuration link in the Options pane. If the default runtime provider does not specify nested component runtime providers, all runtime providers are supported by default.

Each component is deployed in a specific format and to a specific location according to the selected runtime. If you choose to change the runtime for a specific component, it may cause an error at runtime. This is because the runtime engine may not support the selected runtime or may not be able to locate the deployed component, since it is not deployed to the format or location that was expected according to the default runtime configuration. Changing the runtime for a component may also affect any models in which the component is reused, for these same reasons. We recommend that you carefully consider all these potential issues before changing a runtime environment; in general, the default runtime settings should be sufficient.

During compilation and deployment, warnings and errors may be discovered, enabling you to check the model’s validity. After the model is deployed, you can check that the application behaves as expected at runtime. If you find problems with the runtime application, you can return to Visual Composer Storyboard and make modifications, then redeploy it and check it again, and so on, until you are satisfied with the result.

Prerequisites You have opened the model that you want to build.

Tasks November 2007


Procedure ...

1. Specify whether the component should be built as an application, in one of the following ways:

○ In the Options pane (Tools → Options), select the Define composite views as applications checkbox to specify that all composite view components should be built as applications by default. Even if you select this option, you can still change the setting for a specific component, as described in the following sentence.

○ In the Configure task panel for the specific component, select the Define as application checkbox.

A component defined as an application can be run by clicking the relevant link in the Applications group of the Results area in the Deploy task panel after deployment.

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

3. To build all components throughout the dependency chain, select the Include dependencies checkbox. This means that any components referenced from the current model, any components referenced from the referenced components, and so on, are all built, regardless of the development component in which they are located. Because of this, if a referenced model resides in another development component, all models in that development component are also deployed. Depending on the length of the dependency chain, the build process may take some time.

4. Click Compile to create the XGL code for the model and transfer it to the runtime provider to convert as needed, or click Deploy to perform the compilation process and then take the runtime format files and create an archive file that can be deployed to the AS Java.

Make sure that you have saved the current model (and any dependent models, if relevant) before compiling or deploying the model. If you have not saved the models, a message is displayed asking whether you want Visual Composer to save them before continuing with the selected operation. You can select the Automatically save models before build checkbox in the Compiler section of the Options pane (Tools → Options) to automatically save all open models before compilation or deployment operations.

Result All components in the current development component are built to the selected runtime environment. The Deploy task panel displays the following items:

● View source code: Click this link to display the compiled XGL source code.

● Development component nodes: A development component node is displayed for each development component that was deployed. Expand a development component node to see the runtime providers supported for the compiled applications.

The different runtime providers displayed depend on the runtime provider configuration for the component (Tools → Options → View Runtime Configuration). For Web Dynpro, deployed applications can be run in both Web Dynpro HTML and Web Dynpro Flex.

Within each runtime provider node, there are links to all the components defined as applications. You can click an application link to run the specific application in the selected runtime.

Tasks November 2007


If you deployed a model and there are no application links displayed, it means that there were no models defined as applications in the current development component (see step 1 in the procedure).

● Info/Warnings/Errors: Expand these groups to display informative messages, warnings, and errors that may have occurred during compilation and deployment. You can click a link in this group to highlight the problematic element on the Design board, where relevant.

4.7 Viewing Log Files You can use the Console at the bottom of the Storyboard desktop to view error and warning messages. For more detailed information, you can view the log files on the Composition Environment server.

Viewing Log Files in the Console You can show or hide the Console in Storyboard by choosing View → Console. Error and warning messages are displayed in the Console as they occur.

Viewing Log Files on the Composition Environment Server You can view the log files on the Composition Environment Server in one of the following ways:

● If you can access the log folder on the Composition Environment Server file system: ...

a. Navigate to the Composition Environment log folder (for example, c:\usr\sap\CE1\J01\j2ee\cluster\server0\log).

b. Open the latest defaultTrace and applications log files and check for related exceptions and error messages.

● If you cannot access the log folder on the Composition Environment Server file system:

...

a. Open NetWeaver Administrator on your NetWeaver Composition Environment server (http://<hostname>:<port>/nwa).

b. Choose Availability and Performance Management and then click Log Viewer.

c. In the Show dropdown list, select General View and SAP Logs (Java).

d. Check for related exceptions and error messages.

For general information about the log viewer, see Log Viewer [External].

Visual Composer Reference Guide November 2007


5 Visual Composer Reference Guide This reference guide should be used in conjunction with the Visual Composer Modeler's Guide for SAP NetWeaver Composition Environment.

The Visual Composer Reference Guide provides detailed descriptions of the available fields and options in Visual Composer for SAP NetWeaver Composition Environment. These descriptions are organized according to the various user interface elements in the Visual Composer application. The descriptions are needed to perform the tasks described in the Visual Composer Modeler's Guide.

The descriptions in this reference guide are organized into the following groups:

• Main Workspace Elements

• Configuration Dialog Boxes

• Model Menu Dialog Boxes

• Task Panels

• View Dialog Boxes

• Control Dialog Boxes

• Operator Dialog Boxes

• Data Dialog Boxes

• Expression Dialog Boxes

How to Use this Reference You should use this reference in conjunction with the other guides in the documentation set for Visual Composer. The Visual Composer Modeler’s Guide is intended to guide you through the general workflow tasks that you perform when creating and modifying models in Storyboard. This reference guide complements the Visual Composer Modeler’s Guide in that it provides the details for filling in the dialog boxes and defining the attributes of each model element.

The following documents are included in the Visual Composer documentation set:

• Visual Composer Modeler's Guide Describes how to use Visual Composer tools to model applications.

• Visual Composer Configuration Guide Describes how to configure certain items before you can start using Visual Composer to model applications.

• Visual Composer Security Guide Outlines security issues that are specific to running Visual Composer.

• Visual Composer Reference (this guide) Provides detailed descriptions of the available fields and options in Visual Composer.



Be sure to read SAP Note 1021219 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 http://service.sap.com/notes.

5.1 Main Workspace Elements The Storyboard desktop contains two main areas: the workspace area and the task panel area. Each model that you open is displayed in a separate tab in the workspace. The workspace contains the set of boards on which you design and lay out your model.

This section provides detailed descriptions of the following workspace areas:

• Main menu

• Main toolbar

• Workspace boards

• Board toolboxes

For information about the task panel area, see Task Panels.

5.1.1 Main Menu The main menu includes options for working with your models, customizing the Storyboard display, and defining general modeling options.

The following table describes each menu item:

Main Menu Menu Item Description

New

Displays the Create New Model dialog box, in which you specify information about the model that you want to create.

More information:

Create New Model Dialog Box

Creating a Model and Development Component

Open

Displays the Open Model dialog box, in which you select the model that you want to open.

More information:

Open Model Dialog Box

Opening a Model

Model

Close Closes the currently-active model. If there are unsaved changes in the model, you are prompted to save them before closing the model.

More information: Closing a Model

http://service.sap.com/notes




Save Saves the changes made to the currently-active model since the last save operation.

More information: Saving a Model

Save As

Displays the Save As Local Copy dialog box, in which you specify a new name under which to save a copy of the model in the local repository.

More information:

Save As Local Copy Dialog Box

Saving a Copy of a Model

Save All Saves the changes made to all open models since the last save operation.


Manage Models

Opens the Manage Models dialog box, in which you manipulate the models and development components in the Visual Composer development environment. For example, you can create new models and development components, and perform source control operations such as check in and check out.

More information:

Manage Models Dialog Box

Managing Models

Import

Imports a model from the file system to the local repository.

More information:

Import Dialog Box

Importing a Model

Export

Export a model from the local repository to a compressed zip file on the file system.

More information:

Export Dialog Box

Exporting a Model

Print Not currently supported.




Recently-Used Models

List of recently opened models. Choose a model to open it in Storyboard. You can define the number of models displayed in the list using the Options pane ( Tools Options ).

Log Off Closes Visual Composer. If there are unsaved changes in any open models, you are prompted to save them before exiting Visual Composer.

Cut Not currently supported.

Copy Not currently supported.

Paste Not currently supported.

Rename Activates edit mode for the name of the currently-selected element, so that you can change its name.

Delete Deletes the currently selected elements.

Duplicate Not currently supported.

Edit

Select All Selects all elements on the Design board.

Task Panel Displays the specific task panel that you choose from the Task Panel submenu.

Console Shows or hides the console area.

Show Task Panel Shows or hides the task panel area.

Zoom In Zooms in to display the model elements on the Design board at a greater magnification level.

Zoom Out Zooms out to display the model elements on the Design board at a smaller magnification level.

Fit Window Changes the magnification level of the Design board to fit all elements in the display.

View

Actual Size Changes the magnification level of the Design board to show elements at their original size.

Manage System Aliases

Displays the Manage System Aliases dialog box, for organizing and reassigning back-end systems from which data services have been added to the model.

More information: Manage System Aliases Dialog Box

Tools

Find All Searches for all expressions defined in the component.




Expressions More information: Find All Expressions Dialog Box

Service Component Wizard

Opens a wizard that enables you to model a service component and add data and input ports to it.

More information: Service Component Wizard

Customize Toolbars Not currently supported.

Options Displays the Options pane, for customizing the operation of Storyboard.

More information: Options Pane

SDN Online Displays the Visual Composer home page on SDN in a new browser window.

Modeler's Guide

Displays the Visual Composer Modeler's Guide in a new browser window.

Reference Guide

Displays the Visual Composer Reference Guide in a new browser window.

About Displays information about the currently-installed Visual Composer version.

Help

Create an Error Report

Generates a zip file containing a comprehensive report of system errors.

More information: Creating an Error Report



5.1.2 Main Toolbar The buttons in the main toolbar provide shortcuts to many of the most-commonly used functions in the main menu.

The following table describes each toolbar button:

Button Description

(New)


More information:

Create New Model Dialog Box

Creating a Model and Development Component

(Open)


More information:

Open Model Dialog Box

Opening a Model

(Close)

Closes the currently-active model. If there are unsaved changes in the model, you are prompted to save them before closing the model.

More information: Closing a Model

(Save)

Saves the changes made to the currently-active model since the last save operation.


(Save All) Saves the changes made to all open models since the last save operation.


(Manage Models)

Opens the Manage Models dialog box, in which you manipulate the models and development components in the Visual Composer development environment. For example, you can create new models and development components, and perform source control operations such as check in and check out.

More information:

Manage Models Dialog Box

Managing Models



5.1.3 Workspace Boards The Storyboard workspace contains a set of boards on which you design and lay out your model. You change the board displayed in the workspace by clicking the board name in the toolbox (displayed by default directly below the workspace).

The different boards are available according to the component that is currently active. For example, when modeling a composite view you can use the Design and Layout boards, and when modeling a service component, you can use only the Design board.

The workspace contains the following boards, each displaying a different view of the model and providing different modeling functionality:

Board Description

Design board Used to construct your model and define the flow between model elements.

Layout board

Used to lay out the UI controls in the views in your model (not applicable to service components).

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.

More information: Board Toolboxes

5.1.4 Board Toolboxes Storyboard provides a toolbox containing functions specific to the currently-displayed board. By default, the toolbox appears at the bottom of the workspace area. You can display it vertically at the side of the workspace area by right-clicking the toolbox and choosing Side from the context menu.

The following table describes each of the buttons in the toolbox:

Button Description Applicable Boards

(Design) Displays the Design board. Design, Layout

(Layout) Displays the Layout board. Design, Layout

(Zoom In) Zooms in incrementally to display the model elements on the Design board at a greater magnification level. Design

(Zoom Out) Zooms out incrementally to display the model elements on the Design board at a smaller magnification level. Design

(Actual Size) Changes the magnification level of the Design board to show elements at their original size. Design



Button Description Applicable Boards

(Fit Window) Changes the magnification level of the Design board to fit all elements in the display. Design

(Rotate Left) Rotates the selected element(s) on the Design board 90 degrees to the left. Design

(Rotate Right) Rotates the selected element(s) on the Design board 90 degrees to the right. Design

(Flip Vertical) Flips the selected elements on the Design board around their vertical axis. Design

(Flip Horizontal)

Flips the selected elements on the Design board around their horizontal axis. Design

(Show Grid) Shows or hides the positioning grid on the Design board. Design

5.2 Configuration Dialog Boxes Visual Composer provides the following dialog boxes and areas in which you can define general settings for Visual Composer and define configuration options for specific models:

• Options Pane

• View Runtime Configuration Dialog Box

• Manage System Aliases Dialog Box

5.2.1 Options Pane You use the Options pane to define a variety of settings related to the Storyboard appearance and behavior, model design and compilation. When you change a setting in the Options pane, it changes the setting for all models.

You can click the Reset button to reset all Visual Composer options to their predefined default settings.

You display the Options pane by choosing Tools Options .

The items in the Options pane are arranged in the following groups:

• Model

• Design

• Performance

• Compiler

• Embedded Support



5.2.1.1 Options Pane - Model Group The Model group of the Options pane ( Tools Options ) enables you to specify general settings that affect Visual Composer design-time behavior.

The Model group contains the following items:

Item Description

Perform background save every:

Interval at which to automatically save all open models: from five minutes to two hours. You can set this option to none to cancel automatic saves.

Background saves cannot be undone. If you choose to use background saves, take care not to accidentally make unwanted changes to your models.

Number of recent models to display:

Number of recently-used models to display in the Model menu and the Get Started task panel. You can then open these models directly from the Model menu and the Get Started task panel.

Prompt when number of ports exceeds:

Number of data service ports after which the Redefine Ports dialog box is automatically opened when adding a data service to the Design board. If the Redefine Ports dialog box is not opened automatically, you can open it by right-clicking the data service and choosing Redefine Ports from the context menu.

5.2.1.2 Options Pane - Design Group The Design group of the Options pane ( Tools Options ) enables you to specify settings that affect the way items are displayed on the Design board.

The Design group contains the following items:

Item Description

Avoid overlapping shapes

Prevents elements from overlapping when placing them on the Design board. If this option is selected, when you drag and drop an element on top of another element on the Design board, it is automatically placed next to the original element, not on top of it.

Use Unicode font Uses Unicode font to display all element text on the Design board.

Show borders Displays a visible border around the model elements on the Design board.

Show grid Displays horizontal and vertical grid lines on the Design board.

Snap to grid Aligns elements to the nearest grid line when dragging them on the Design board.

Select elements partially within area

Selects elements located within and only partially within a bounding rectangle that you create by dragging on the Design board.



Item Description

Line style Specifies the shape of the connecting line to display between elements on the Design board.

Prompt before rename/delete field

Specifies that a confirmation prompt be displayed when you rename or delete a field in the Define Data dialog box. The confirmation prompt also contains a link that enables you to search for references to the field before you rename or delete it.

5.2.1.3 Options Pane - Performance Group The Performance group of the Options pane ( Tools Options ) enables you to modify settings to improve Storyboard rendering and performance.

The Performance group contains the following items:

Item Description

Enable automatic scrolling

Automatically scrolls the Design board when you drag an element outside of the visible area, in the direction that you drag the element.

Show tooltips Shows tooltips on Design board elements when the mouse pointer hovers over them, for example, tooltips for names of elements, names of element ports, and other element items such as Transition from here and Add step.

Highlight containers

Changes the color of containers when dragging elements over them on the Design board, indicating where you can drop the element to place it in the container.

Highlight shapes

Changes the color of elements on the Design board when the mouse pointer moves over them, indicating where you can click to select them.

Enable transparency effects

Makes elements on the Design board transparent when you drag them over other elements, so you can still see the element that is underneath the element that you are dragging.

Enable component cache

Enables you to specify custom settings for the component cache. If you do not select this option, components are added continuously to the cache and are not discarded.

Cache algorithm

Algorithm that decides which items to remove from the cache when it is full:

• LFU: (Least Frequently Used) Counts how often a component is used, and discards the components that are used least often first from the cache.

• LRU: (Least Recently Used) Keeps track of which components were used when, and discards the least recently used components first from the cache.



Item Description

Cache size Number of components to store in the cache.

Cache reduction

Percentage by which to reduce the size of the cache when the maximum Cache size is reached. For example, if you define a Cache size of 20, and a Cache reduction of 20%, when the cache reaches 20 components the specified algorithm is used to discard four of the components from the cache.

5.2.1.4 Options Pane - Compiler Group The Compiler group of the Options pane ( Tools Options ) enables you to specify settings that are connected to model compilation.

The Compiler group contains the following items:

Item Description

Automatically save models before build

Automatically saves all open models before compiling or deploying a model. If you do not select this option, Visual Composer prompts you to save any models with unsaved changes when you click the Compile or Deploy buttons in the Deploy task panel.

Warn before changing runtime

Specifies that a confirmation prompt is displayed when you change the runtime provider for a specific component in the Configure task panel for the component. Changing the runtime provider for a component affects the runtime providers for all components in the dependency chain during the deployment process.

Define composite views as applications

Defines all composite view components as main applications, so they can be run directly from the Deploy task panel after deployment. If you do not select this option, you can choose to define individual composite view components as main applications in the Configure task panel.

Default runtime

Default runtime provider to which to compile and deploy all new models. The default runtime provider controls the runtime to which each component type is compiled. You can view the runtime associated with each component by clicking the View runtime configuration link, described below.

The runtime providers available in the dropdown list may vary according to the Visual Composer kits you have installed.

View runtime configuration

Displays the runtime used for each component type, according to the selected Default runtime. The default runtime configuration defines the deployment location in which each component type is accessed at runtime.

More information: View Runtime Configuration Dialog Box



5.2.1.5 Options Pane - Embedded Support Group The Embedded Support group of the Options pane ( Tools Options ) enables you to define the type of information that is included in the error report.

More information: Creating an Error Report

The Embedded Support group contains the following items:

Item Description

Trace information Specifies that trace information should be included in the error report.

Model information Specifies that model-specific information should be included in the error report.

List of development components deployed

Specifies that information about the deployed development components should be included in the error report.

Debug information from generation

Specifies that debug information should be included in the error report.

Include information from time period:

Specifies the time period (from 5 minutes to 2 hours) for which information should be included in the error report.



5.2.2 View Runtime Configuration Dialog Box You use the View Runtime Configuration dialog box to display the runtime that is used to compile each model type, according to the default runtime provider. The runtimes cannot be changed in this dialog box, and are simply retrieved according to set definitions in Visual Composer.

You display the View Runtime Configuration dialog box by clicking the View Runtime Configuration link below the Default runtime dropdown list in the Compiler group of the Options pane ( Tools Options ).

The View Runtime Configuration dialog box contains the following items:

Item Description

Default runtime

The default runtime that defines the runtime provider to be used for each model type during compilation. This is the runtime that was selected in the Default runtime dropdown list in the Compiler group of the Options pane ( Tools Options ).

Model Type

Lists the different types of components that you can compile, for example, Composite View or Service Component. The components displayed depend on the Visual Composer kits that are installed on your Visual Composer server.

Runtime The runtime provider used to compile each model type, according to the default runtime selected.

5.2.3 Manage System Aliases Dialog Box The Manage System Aliases dialog box displays a table that lists all the system aliases used in the model, along with their details. You use the Manage System Aliases dialog box to review the back-end systems from which you have added the data services in a model and rename the system aliases if required. To change a system alias, you check its row and click Rename.

You can use the Manage System Aliases dialog box when system aliases have been changed or when a model is ported between servers that have different aliases for the same back-end systems.

You display the Manage System Aliases dialog box by choosing Tools Manage System Aliases .

The Manage System Aliases menu item is available only when a model that contains at least one data service is open.



The Manage System Aliases dialog box contains the following items:

Item Description

Select Displays a menu containing a separate item for each alias listed in the table. You can choose an item from the menu to select all instances of the specified alias in the list.

Show aliases in all open models

Displays all aliases used in all open models, not only in the currently-active model.

Select All Selects all the aliases in the list.

Clear All Deselects all the aliases in the list.

Alias The alias currently defined for the system in NetWeaver Administrator.

Used in The name of the component that contains a data service within the named system.

Used by The name of the data service.

System The type of system that contains the data service.

Replace Displays a dialog box, in which you enter the new system alias with which you want to replace the selected system alias(es).

5.3 Model Menu Dialog Boxes This section describes the dialog boxes displayed when you choose a menu item from the Model menu in the Visual Composer main menu bar.

This section describes the following dialog boxes:

• Create New Model Dialog Box

• Open Model Dialog Box

• Save As Local Copy Dialog Box

• Manage Models Dialog Box

• Import Dialog Box

• Export Dialog Box



5.3.1 Create New Model Dialog Box You use the Create New Model dialog box to choose the component type, enter a name for the new model, and specify the location in which to save the model.

You display the Create New Model dialog box by choosing Model New or by clicking the New Model button in the main toolbar. You can also open the Create New Model dialog box by clicking the New Model button in the Manage Models dialog box. More information: Manage Models Dialog Box

The Create New Model dialog box contains the following items:

Item Description

Model Type

Lists the different types of components that you can create, for example, Composite View or Service Component. The components displayed depend on the Visual Composer kits that are installed on your Visual Composer server.

Name The name of the new model. The model name can contain only alphanumeric characters and underscores, and cannot exceed 40 characters.

Repository

The repository type in which to create the model. The following options may be available, depending on your system configuration:

• Shared Repository: Stores the model in a shared location where it can be accessed by other modelers. Models saved in this location are managed using basic source control features (check in and check out). When you create a model in the shared repository, it is automatically checked out to you that so you can start working on it. This option is available only if you do not have a source control system installed and configured for use with Visual Composer.

• Source Control Repository: Stores the model in the selected source control system. This option is available only if you have a supported source control system installed and configured for Visual Composer.

• Local Repository: Stores the model in a local repository with no source control. Models in the local repository can be accessed only by the user who created them.

Software component The software component in which to store the model.

Development component The development component in which to store the model.

New

Creates a new development component in which to store the model. The development component is created in the local repository, in the selected software component.

More information: Create New Development Component Dialog Box



5.3.2 Open Model Dialog Box The Open Model dialog box displays a hierarchical tree of models, arranged within their respective software component and development component nodes.

You display the Open Model dialog box by choosing Model Open or by clicking the Open Model button in the main toolbar.

The hierarchical model tree contains some of the following top-level nodes, depending on your system configuration:

Node Description

Shared Repository

Shared location in which models can be accessed by other modelers. Models in this location are managed using basic source control features (check in and check out). This node is available only if you do not have a source control system installed and configured for use with Visual Composer.

Source Control Repository

Central source control system location in which models are managed using full source control functionality. This option is available only if you have a supported source control system installed and configured for Visual Composer.

Local Repository

Per-user location (no source control) in which models can be accessed only by the user who created them.

5.3.3 Save As Local Copy Dialog Box You use the Save As Local Copy dialog box to save a copy of a model with a new name.

You display the Save As Local Copy dialog box by choosing Model Save As .

You can save a copy of a model in different locations in the local repository, depending on where the original model is located:

• If the original model resides in the local repository, you can save a copy only in the same development component

• If the original model resides in the shared repository or in a source-control system, you can save a copy in any development component in the local repository.

The Save As Local Copy dialog box contains the following items:

Item Description

Name The new name for the copy of the model.

Development component

The development component in the local repository in which to save the copy of the model. This option is only enabled when the source model is saved in the shared repository or source control system. If the original model resides in the local repository, this field displays the name of the development component in which it is located.



5.3.4 Manage Models Dialog Box You use the Manage Models dialog box to manipulate the models and development components in your Visual Composer development environment.

You display the Manage Models dialog box by choosing Model Manage Models .

The Manage Models dialog box contains the following items:

Item Description

Toolbar

Provides access to all the functionality of the Manage Models dialog box. The buttons in the toolbar are activated according to the type of model you select. For example, if you select a model residing in your local repository, buttons for source control functions, such as check in and check out, are not available.

See the following table for a description of each of the toolbar buttons.

Display Enables you to display either Visual Composer Models or Data Services used in the models in your development environment.

Repository pane

Displays a hierarchical tree of the software components, development components, and models in the local repository and shared repository or source control system.

Status pane

Displays information about the selected model. In addition, for models saved in the shared repository or in a source control system, this pane displays information such as the check-out status, check-out user, and sync status.

The Manage Models dialog box toolbar contains the following buttons:

Button Description

(New Development Component)

Creates a new development component in the local repository, in the selected software component.


(New Model)

Enables you to create a new model under the selected development component.

More information: Create New Model Dialog Box

(Rename) Enables you to rename an existing local model or development component.



Button Description

(Delete)

Deletes the selected model from the local repository.

Before you delete a model, you must make sure that it is not being referenced by any other model. Otherwise, the referencing model may not work as expected after you delete the referenced model.

If you chose Data Services in the Display filter (and not Visual Composer Models), this option enables you to delete the selected service component.

This option can be useful if you added a data service to a model, and then deleted the data service from the model. In this case, the reference to the data service is deleted, but the data service still remains in the development component. You can use this option to delete it from the development component.

(Export Software Component)

Exports the selected software component and all its models from the shared repository to a zip file at the location that you specify. You can then use this zip file when running a build using the offline build plug-in.

(Add to Source Control)

Enables you to tag a development component in the local repository for source control and check the development component and all of its models in to the shared repository or source control system.

More information: Add to DTR Details Dialog Box

(Check Out)

Checks out the selected model from the shared repository or source control system. This copies it to your local repository so you can work on it and prevents it from being modified by other users.

More information: Checking Out a Model

(Check In)

Checks in a model previously checked out from the shared repository or source control system. After a model is checked in, it can be used and modified by others.

More information: Checking In a Model

(Revert)

Cancels all changes to a model since it was last checked out or added to the shared repository or source control system. The current model is replaced by the previous version saved in the shared repository or source control system.

More information: Reverting to the Last Checked-In Version of a Model

(Sync)

Synchronizes a local version of the selected model with the latest version checked in to the source control system or shared repository.

More information: Synchronizing a Model

(Refresh) Updates the tree in the repository pane so that it displays the most current folder and model information.



5.3.4.1 Create New Development Component Dialog Box You use the Create New Development Component dialog box to specify information about the development component that you are creating in the local repository.

You display the Create New Development Component dialog box by clicking the New Development Component button in the Manage Models dialog box toolbar, or by clicking the New button in the Create New Model dialog box.

The New Development Component dialog box contains the following items:

Item Description

Repository The local repository in which the development component is being created.

Software component Software component in the local repository in which the development component is being created.

Master language Original language used to name elements belonging to the development component.

Development component Name of the development component being created.

5.3.4.2 Add to DTR Details Dialog Box You use the Add to DTR Details dialog box to specify information about the development component that you are adding to the DTR. When you add a development component to the DTR, it also automatically checks in all models in the development component.

You display the Add to DTR Details dialog box by clicking the Add to Source Control button in the Manage Models dialog box toolbar.

The Add to DTR Details dialog box contains the following items:

Item Description

Development component Name of the development component being added to the DTR.

Software component Software component in which to add the development component.

Vendor Globally unique vendor ID. We recommend that you derive this ID from the vendor’s Internet domain (for example, sap.com).

Prefix Prefix to use at the beginning of the development component name.



Item Description

Activity Description

Textual description that you want to include with the Add to DTR operation.

When you click in this field, the Activity Description dialog box opens, in which you can enter the description.

More information: Activity Description Dialog Box

Domain ID of the development area for which the new development component is to be created.

5.3.4.3 Activity Description Dialog Box The Activity Description dialog box is a text editor in which you enter information about the DTR operation that you are performing.

You display the Activity Description dialog box by clicking the Check Out button in the Manage Models dialog box toolbar, or by clicking the button next to the Activity description field in the Add to DTR Details dialog box.

The Activity Description dialog box contains the following items:

Item Description

Cut Removes the selected text from the editor area and places it on the clipboard.

Copy Copies the selected text to the clipboard.

Paste Inserts the contents of the clipboard at the selected location.

Undo Reverses the last action that you performed.

Redo Redoes the last Undo action.

Editor area

A text editing area in which you enter the textual description of the operation that you are about to perform.

5.3.5 Import Dialog Box You use the Import dialog box to import a previously-exported model to the local repository. A model can only be imported into a development component with the same name as the development component from which it was exported.

You display the Import dialog box by choosing Model Import .



The Import dialog box contains the following items:

Item Description

File name The name of the model to be imported. Use the Browse button to locate the file in your file system.

Open imported model

Opens the model in a separate tab in the Storyboard workspace, immediately after the import operation is performed.

5.3.6 Export Dialog Box You use the Export dialog box to export the currently-active model to a compressed zip file on the file system.

You display the Export dialog box by choosing Model Export .

The Export dialog box contains the following items:

Item Description

Model name

Displays the name of the active model to be exported, in the format <software component>/<development component>/<model name>.

Export Starts the export process, and opens a dialog box in which you specify the location in which to save the exported file.

5.4 Task Panels Task panels are the areas located on the side of the workspace. The task panels support the typical Visual Composer workflow process, with each step in the workflow using options from one of the task panels.

The tools on the task panels are dynamic and context-driven, meaning that each task panel provides options relevant only to the model element currently selected in the workspace.

You can display each tool set using the task-panel toolbar to the right of the panel. You can also display the different task panels using the View Task Panel menu options.

You show or hide the task panel using the View Show Task Panel menu option. You can choose on which side of the workspace to display the task panel by right-clicking the task-panel toolbar and choosing Switch Sides from the context menu.



The following task panels are available:

• Get Started Task Panel

• Compose Model Task Panel

• Configure <Element> Task Panel

• Search Task Panel

• Deploy Task Panel

Additional task panels may also be available to you depending on the Visual Composer kits that you have installed and loaded. For more information, refer to the relevant kit documentation.

5.4.1 Get Started Task Panel The Get Started task panel is displayed automatically when you open Visual Composer Storyboard. It enables you to open existing models, create a new model, or manage your models. You can use the options in the Get Started task panel as an alternative to the Model menu options.

The Get Started task panel contains the following items:

Item Description

Recently Used Models

Contains a list of recently-opened models. You can click a model name to open it in a separate tab in the workspace.

You can define the number of models displayed in the list using the Options pane ( Tools Options ).

Open Model


More information: Opening a Model

Create New Model


More information: Creating a Model and Development Component

Manage Models

Opens the Manage Models dialog box, in which you manipulate the models and development components in your Visual Composer development environment. For example, you can create new models and development components, and perform source control operations such as check in and check out.

More information: Managing Models



5.4.2 Compose Model Task Panel The Compose Model task panel serves as a repository of model elements and controls that you can drag and drop onto the workspace boards when creating a model.

The content of the Compose Model task panel changes according to the board that is currently displayed in the workspace. When working on the Design board, the Compose Model task panel provides model elements (views, containers, connectors, and operators) that you can use to compose the model logic and flow. When working on the Layout board, the Compose Model task panel provides controls that you can add to the view and container elements that you have already added to your model (using the Design board).

You can change the way in which items are displayed in the Compose Model task panel, by clicking the title bar of the Compose Model task panel and choosing one of the following options from the context menu:

• Icons: Displays an icon for each element together with the name of the element. You can display a tooltip for each element to view its description.

• Details: Displays an icon for each element together with the name and description of the element.

More Information Compose Model Task Panel (Design Board)

Compose Model Task Panel (Layout Board)

5.4.2.1 Compose Model Task Panel (Design Board) On the Design board, the Compose Model task panel serves as a repository of model elements that you can use to compose the model logic and flow. You build your model by dragging the required element icon from the Compose Model task panel onto the Design board. After you have placed elements on the Design board, you can also drag out from their input or output ports and use the options in the context menu to create a connected element.

The model elements in the Compose Model task panel are grouped into the following categories:

• Views: Standardized and reusable UI elements, such as forms, charts, and tables. You can add views directly to the Design board as top-level elements, or you can add them within a container.

• Containers: Enable you to group model elements to define which views are visible to users at specific times in the application, and to change the visible view elements according to user actions in the application. For example, you can use a wizard container to display view elements in numbered and layered boxes, as sequential steps to navigate between layers. You drag views and other elements into containers. You can use multiple container types in a model, and you can also nest containers of the same or different types within each other.

• Connectors: Points in the data flow that represent connections that channel data from/to points outside the open component. You can use connectors to bring parameters in from another component, send parameters at the end of the data flow to another component, define the component initialization or end value, and enhance the data flow within the component.



• Operators: Enable you to specify criteria by which to manipulate data returned from a data service, prior to displaying it in a view element. After you add an operator to the Design board, you define its parameters by right-clicking the operator icon and choosing Define Operator from the context menu.

The Compose Model task panel contains the following elements when working on the Design board:

Type Element Description

(Form View) A data view used by the runtime user to input data, to view data, and to select displayed data.

(Table View)

A tabular view used by the runtime user to view output data and/or to edit data. This view displays each record in the dataset in a separate row and each field in a separate column.

(Chart View) A view that displays data in a graphical chart format. A variety of chart types are available.

Views

(Nested View)

A component that is displayed at runtime within the current component. This option enables you to reference a new reusable component from within your model. After you add a Nested View to your model, you can double-click its icon to open the component in a new model tab and define its content.

(Panel)

A generic container used to create complex layouts. You can use Panel containers to assign different properties to content that is grouped in each panel. For example, you may want to arrange one set of view elements using a vertical flow, and another set of view elements using a horizontal flow. In this case, you could place each set of elements in a separate Panel container.

(Tabstrip)

A set of labeled tabs that enables navigation between content layers. Tabstrip containers enable you to group model elements into different tabs. The runtime user displays each content group by selecting the relevant tab.

(Wizard)

A container that uses sequential labeled steps to represent different content layers. The runtime user navigates between content layers using toolbar buttons or by clicking the step labels at the top of the Wizard container.

(View Switch)

A simple container that displays one content layer at a time, with no navigation selector. The View Switch container enables the runtime user to flip between views, depending on the current context.

Containers

(Popup) A container that displays its content in a popup window.




(Start Point)

Defines a value used to initialize the component execution. For example, in a component used to display a number of customer records, the initialization value defined in the Start Point could be 10.

You create one Start Point per component. To do so, you can create a single Start Point instance in the model, or, for convenience purposes, you can create multiple Start Point elements, all pointing to the same Start Point connector.

(End Point)

Defines a final value at the end of the component execution. For example, in a component that returns a value to another component, the value defined in the End Point could be the Customer Name field.

You create one End Point per component. To do so, you can create a single End Point instance in the model, or, for convenience purposes, you can create multiple End Point elements, all pointing to the same End Point connector.

(Navigate)

Defines the navigation to a referenced component that is opened in a new window. A component opened using the Navigate connector cannot output parameters to other components.

When you add a Navigate connector, the Create New Model dialog box opens, to enable you to create the referenced component. You can double-click the Navigate connector on the Design board to open the referenced component in a new model tab.

Connectors

(Signal In)

A collection point in a nested view that asynchronously receives parameters from another component. Use the Signal In connector only if you need to use asynchronous communication to transfer data to the nested view during runtime.

After you add a Signal In connector to a nested component, right-click the nested component icon in the parent component and choose Redefine Ports from the context menu. In the displayed dialog box, select the newly added ports and click OK to display the in port on the nested component icon.




(Signal Out)

Sends data asynchronously from a nested component to another component. Use the Signal Out connector only if you need to use asynchronous communication to transfer data from the nested view during runtime.

After you add a Signal Out connector to a nested component, right-click the nested component icon in the parent component and choose Redefine Ports from the context menu. In the displayed dialog box, select the newly added ports and click OK to display the out port on the nested component icon.

(Data In)

Receives data from another component. This connector is available only when creating a service component.

After you add a Data In connector to a service component that is referenced from another component, right-click the service component icon in the parent component and choose Redefine Ports from the context menu. In the displayed dialog box, select the newly added ports and click OK to display the in port on the service component icon.

(Data Out)

Sends data from a service component to another component. This connector is available only when creating a service component.

After you add a Data Out connector to a service component that is referenced from another component, right-click the service component icon in the parent component and choose Redefine Ports from the context menu. In the displayed dialog box, select the newly added ports and click OK to display the out port on the service component icon.

(User Data)

Contains the personal data of the user, retrieved from the runtime environment. The User Data fields can be referenced in any dynamic expression, thereby personalizing the component by creating dynamic attributes that depend on the current user data and preferences. For example, you might use the User Data connector as input to an Employee GetInfo data service.




(Data Store)

Temporarily stores data for later use. Each model uses a single Data Store. To make it easier to connect elements to the Data Store, you can add multiple Data Store elements to the Design board. However, these multiple Data Store elements all represent the same Data Store (data stored in one element is visible in the other elements). 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 dynamic expressions.

More information: Storing Data in a Data Store

(Data Bridge)

Enables a dataset to be passed from Visual Composer to a Guided Procedures process.

More information: Transferring Data Using a Data Bridge

This connector is available only when creating a composite view component.

(Static Data)

Stores static flat data for use by a service component. You can create multiple Static Data connectors per component. You can manually define data for a Static Data connector and use it to output data from the service. When you use the Service Component Wizard to add data to a service component, a Static Data connector is created for each data selection that you add.

More information: Creating a Service Using the Service Component Wizard.

This connector is available only when creating a service component.

(Filter)

Defines selection criteria for retrieving and displaying records in a dataset. For example, you can filter documents by Creation Date so that only documents created on the specified date are displayed.

(Sort)

Sorts data in ascending or descending order according to a specified field. For example, you may want to alphabetically sort a list of records by Name, with a secondary sort according to Date, newest to oldest.

Operators

(Aggregate)

Aggregates the values of all the records of a specified field into a single record. For example, you may want to create an output record that totals the values of all the material orders.




(Distinct)

Omits records containing duplicate data from the dataset. Note that the fewer fields marked as distinct, the fewer records are returned. For example, a data service returns the following fields: Bank Country, Bank Key, and Bank Name. If only Bank Country is marked as distinct, the first appearance of a value, such as France, in the combination of Bank Country–Bank Key–Bank Name is returned. Any subsequent combination containing France is not returned. If, on the other hand, all three fields are marked as distinct, each combination is considered distinct, so that the potential list of results is greater.

(Union)

Merges the data of multiple datasets into a new dataset. For example, you may have a field in one data service called FirstName and a field in another dataset called FName. You can use the Union operator to combine the data from these two fields into a single field called Name. You can select the Key column to specify that the entries merged into the new Name field are unique (any duplicate entries from the source fields are not added to the target field).

(Switch)

Defines multiple execution flows. You can use the Switch operator to receive input from multiple sources (such as a data service and a form view) and pass the received data as input to a single model element.

(Service Component)

Creates a new data service component. You can use this option to create a new empty service component, or use a wizard that assists you in creating a service component that contains ports and static data. You can use this operator to model a customized data service that performs data processing that a group of operators or an advanced service might otherwise perform.

More information: Creating Service Components

5.4.2.2 Compose Model Task Panel (Layout Board) On the Layout board, the Compose Model task panel serves as a repository of controls that you can use to create the UI of your model.

Controls are either created automatically and bound to a field when a view element is created by dragging out from an element on the Design board, or you can add them by dragging the required control icons from the Compose Model task panel onto the required views on the Layout board.

If you add controls by dragging them from the Compose Model task panel, you can bind them to a field using the Configure task panel. You also use the Configure task panel to configure the control properties.

More information: Configure <Element> Task Panel



The Compose Model task panel contains the following controls when working on the Layout board:

Control Description

(Button) A control used to trigger actions when it is clicked with the mouse or activated using the keyboard.

(Calendar) A date selection control that allows the user to select a date or a range of dates using a navigable monthly calendar.

(Checkbox) A dual-state selection control used for setting or clearing Boolean (yes/no) fields.

(Combo Box) A combination dropdown list and input field, enabling the user to choose an option from a dropdown list or else enter values not available in the list.

(Date Picker) A date selection control that allows the user to select a date using a dropdown calendar.

(Dropdown List)

A list showing the possible values that can be selected and also the currently-selected value.

(Horizontal Separator)

A horizontal line that visually groups items or separates content areas.

(Hyperlink) An unbound control that triggers a specific action when clicked.

(Image) A control used to display an image by specifying its URL.

(Input Field) A single-line text box that supports all data types.

(Melting Group)

A control that can be used to group other controls, enabling more layout flexibility.

More information: Adding Controls in a Melting Group

(Plain Text) A control used to display a text message with uniform formatting.

(Progress Bar) A read-only control for displaying numeric values using a bar that is filled to display the current value relative to the total size of the bar.

(Radio Group) A selection control consisting of radio buttons, one for each value that a user can select. Only one radio button can be selected at any time.

(Text Editor) A multi-line text editing control with support for line breaks, word wrapping and scrolling.



Control Description

(Toggle Button)

A dual-state selection control used to set or clear Boolean fields using a button.

(Vertical Separator)

A vertical line that visually groups items or separates content areas.

5.4.3 Configure <Element> Task Panel The Configure <Element> task panel enables you to configure the properties of each model element on the Design board and Layout board. The name of the task panel and the properties it displays differ according to the currently selected model element.

In addition to displaying the Configure <Element> task panel in the same ways as you display the other task panels (more information: Task Panels), you can also display the Configure <Element> task panel for a specific element in the following ways:

• Right-click an element and choose Configure from the context menu

• Double-click an element

5.4.3.1 Configure Button Task Panel The Configure Button task panel enables you to define attributes for a button control.

The following table describes the properties and attributes of this model element:

Group Property Description

Label The label text to be displayed to the left of the control. You can either enter the text directly in the Label field, or click the fx button to define the label text using the Dynamic Expression Editor dialog box.

Text

The text to be displayed on the control.

You can either enter the text directly in the Text field, choose a field from the dropdown list, or choose Define expression from the dropdown list to specify the text using the Dynamic Expression Editor dialog box.

General

Enabled

Indicates whether the control is enabled or disabled at runtime. A disabled control is displayed, but is grayed out, and cannot be activated by the runtime user.

You can select or deselect the checkbox to specify whether the control is enabled or disabled, or click the fx button to define the expression that specifies under which condition the control is enabled or disabled at runtime.




Visible

Indicates whether the control is hidden or displayed at runtime.

You can select or deselect the checkbox to specify whether the control is hidden or visible, or click the fx button to define the expression that specifies under which condition the control is displayed or hidden at runtime.

Indent

Defines the alignment of the control within the layout column.

You can select or deselect the checkbox to specify whether the control is indented or left-aligned, or click the fx button to define the expression that specifies under which condition the control is indented at runtime.

For some control types, left-aligning the control hides the label and stretches the control to fill the entire column width; for other control types, it hides the label and left-aligns the control (without changing the control width).

Tooltip

Text to be displayed in a tooltip over the element at runtime.

You can either enter the tooltip text directly in the Tooltip field, or click the fx button to define the tooltip using the Dynamic Expression Editor dialog box.

Action

The event to be triggered or action to be executed when the control is clicked at runtime.

You can either enter the name of a custom action directly in the Action field, or you can click the browse button to open the Define Action dialog box and define an action. More information: Define Action Dialog Box.

Button style

Type of button:

• Default button: The button that is triggered automatically when the runtime user presses the ENTER key after the application window opens, without navigating to a different control in the view. You should define only one default button for each runtime window.

• Normal button: A standard button (not a default button).



5.4.3.2 Configure Calendar Task Panel The Configure Calendar task panel enables you to define attributes for a calendar control.



Label

The label text to be displayed to the left of the control.

You can either enter the text directly in the Label field, or click the fx button to define the label text using the Dynamic Expression Editor dialog box.

Value

The field to which the control is bound. You can either enter the field data directly in the Value field, choose a field from the dropdown list, or choose Define expression from the dropdown list to specify a field value using the Dynamic Expression Editor dialog box.

Specify the field using one of the following formats:

• A field in the same view element: =@BANK_CTRY

• A field in a different view element within the same component: =BANK_LIST@BANK_CTRY

• A field in a view element within a different component: =[bapi_bank_getlist.Input]@BANK_CTRY

Read-only

Indicates whether the control is read-only or editable at runtime. A read-only control is displayed at runtime, but its value cannot be modified by the runtime user.

You can select or deselect the checkbox to specify whether the control is read-only or editable, or click the fx button to define the expression that specifies under which condition the control is read-only or editable at runtime.

This option is relevant only when the control is bound to a local data field.

General

Enabled

Indicates whether the control is enabled or disabled at runtime. A disabled control is displayed, but is grayed out (including the label), and cannot be activated by the runtime user.





Visible



Indent




Tooltip



Action

The event to be triggered or action to be executed when a control value is entered at runtime.

You can either enter the name of a custom action directly in the Action field, or you can click the browse button to open the Define Action dialog box and define an action.

More information: Define Action Dialog Box

Required

Indicates whether the control is mandatory. A mandatory control must be filled in or selected at runtime, otherwise an error message is displayed.

On the Design board, a Required field is displayed with a red asterisk. At runtime, the appearance of a Required control depends on the runtime implementation.

You can select or deselect the checkbox to specify whether the control is mandatory or optional, or click the fx button to define the expression that specifies under which condition the control is mandatory or optional at runtime.

Validation

The options in this group are only available if the control is bound to a field.

Rules

Enables you to open the Validation Rules dialog box (by clicking the browse button), in which you can define rules that check the validity of values entered into the control at runtime and display error messages when the validation fails.

More information: Validation Rules Dialog Box




Behavior

Specifies the behavior of the runtime application if the control does not pass validation. The following options are available:

• Normal: A validation error on the control is indicated in a nonintrusive manner, for example, by using a red border and/or a tooltip. The actual behavior depends on the runtime implementation.

• Severe: A validation error on the control is indicated in an intrusive manner, for example, by using a modal dialog box. The actual behavior depends on the runtime implementation.

The specified validation behavior can also affect whether an action on a control is performed if validation fails.


5.4.3.3 Configure Chart View Task Panel The Configure Chart View task panel enables you to define attributes for a chart view element.



Title

The title of the chart, to be displayed at the top of the chart.

You can either enter a title in the field, or click the browse button to open the Edit Title dialog box and specify a title using a dynamic expression.

More information: Edit Title Dialog Box

Show title Defines whether the chart title bar is displayed at the top of the chart.

Show toolbar Defines whether to add a toolbar to the chart.

Toolbar If a toolbar is added to the chart, defines whether it is located at the Top or Bottom of the chart.

General

Visible

Defines whether the chart is hidden or displayed at runtime.

You can select or deselect the checkbox to specify whether the chart is hidden or visible, or click the fx button to define the expression that specifies under which condition the chart is displayed or hidden at runtime.




Frame style

The color scheme used for the top border and content frame at runtime. The following options are available:

• Primary: Top border in standard color and content frame in white.

• White: Top border and content frame in white.

• Neutral color: Top border and content frame in lighter color.

• Dark color: Top border and content frame in darker color.

• No frame: Top border and content frame do not have a specific color scheme (the default window color is used).

Pie label

For pie and doughnut charts, specifies the location of the labels for the various segments. The following options are available:

• Auto: Places the value inside the pie or doughnut segment where possible; otherwise, places it outside.

• Inside: Places the value inside the pie or doughnut segment.

• Outside: Places the value outside the pie or doughnut segment.

• Callout: Places the value outside the pie or doughnut segment and draws a line from the segment to the value.

• Hide labels: Does not add labels to the pie or doughnut segments.

Pie radius The inner radius (in pixels) of the pie or doughnut chart.

Chart type

The type of chart. The following types are available:

• Area: Calculates the interception point of the X value and the Y value, filling in the area below it, displaying the trend of each value over time or category.

• Bar: Compares values across categories, in a horizontal display, with the category given in the vertical (Y) axis.

• Column: Compares values across categories in a vertical display, with the category given in the horizontal (X) axis.

• Line: Displays the results of a data series as a continuous line drawn from point to point (value to value) on the X axis.

• Pie: Shows how the values in a single data series relate to the sum of the results, with each value depicted as a percentage of the total value.




• Doughnut: Shows how the values in multiple data series relate to the sum of the results, with each value depicted as a percentage of the total value. Data is displayed in rings, where each ring represents a single data series.

• Combo: A combination of two different chart types (see Chart style below) that shows two different kinds of information.

Data Definition

Data series

Opens the Edit Data Series dialog box in which you can define the data series for the chart. You can define one or more data series for a chart. Pie charts can display only one data series.

More information: Edit Data Series Dialog Box

X title The label to display on the category axis. Category Axis

X value The field whose values to use as the categories of the chart.

Y title The label to display on the value axis.

Value Axis Y ticks The number of minor ticks (marks) between major ticks (marks) to be

indicated on the value axis.

Chart Formatting Chart

style The style of the chart, based on the chart type. The following styles are available:

• Clustered: For bar or column charts, compares the values across categories, by depicting one category next to the other.

• Overlaid: For area or line charts, overlays the values of a category to show the relationship of each value to the whole.

• Stacked: For bar, column, line or area charts, shows the relationship to the whole of each value of a category, as a part of a single bar or line.

• 2-D: Displays the pie or doughnut chart with a 2-D visual effect.

• 3-D: Displays the pie or doughnut chart with a 3-D visual effect.

• 3-D clustered: Adds a third dimension to the clustered display.

• 3-D overlaid: Adds a third dimension to the overlaid display.




• Column+Lines: For a Combo chart, shows two different data series using a single column overlaid with a multiple lines.

• Area+Columns: For a Combo chart, shows two different data series using an area chart overlaid with a multiple columns.

• Area+Lines: For a Combo chart, shows two different data series using an area chart overlaid with a multiple lines.

Legend

Location of the chart legend (box that identifies the patterns or colors that are assigned to the data series or categories in the chart), in relation to the chart. Choose Hide to remove the legend from the chartdisplay.

Contour For Area and Line charts, indicates the type of line to use to connect data points.

Effect

Animation to apply whenever chart data changes. The following options are available:

• Interpolate: Calculates how to connect data points, in order to fill in gaps and create a continuous line or series of values.

• Slide: Displays the chart data in a sliding motion, according to the selected direction and speed.

• Fold: Displays the chart data in an unfolding motion, according to the selected speed.

• None: Chart data is not animated.

Animation by

The items according to which to perform the animation. The following options are available:

• Charts: Animates the entire chart.

• Series: Animates the data series (categories).

• Points: Animates the data points (values).

• None: Does not perform animation.

• Mixed: Animates the data series (categories) and points (values).

Direction For the Slide animation effect, defines the direction in which to animate the data.

Data Animation

Speed Speed at which to perform the selected animation.



5.4.3.4 Configure Checkbox Task Panel The Configure Checkbox task panel enables you to define attributes for a checkbox control.



Label

The label text to be displayed for the control.


Value






Read-only




Enabled



General

Visible






Indent




Tooltip



Action




Entry list

Enables you to create a predefined list of entries to be used as input for the control at runtime.

You can click the browse button to open the Entry List wizard or Edit Entry List dialog box and create or modify the entry list for this control.

More information: Entry List Wizard

Required




Validation


Rules Enables you to open the Validation Rules dialog box (by clicking the browse button), in which you can define rules that check the validity of values entered into the control at runtime and display error messages when the validation fails.





Behavior






5.4.3.5 Configure Combo Box Task Panel The Configure Combo Box task panel enables you to define attributes for a combo box control.



Label

The label text to be displayed for the control.


General

Value









Read-only




Enabled



Visible



Indent




Tooltip



Action







Entry list


You can click the browse button to open the Entry List wizard or Edit Entry List dialog box and create or modify the entry list for this control.


Required




Rules



Validation


Behavior








5.4.3.6 Configure Composite View Task Panel The Configure Composite View task panel enables you to define attributes for a composite view.



Name The name of the composite view, in read-only format.

Runtime The runtime provider to be used when deploying this composite view.

Define as application

Specifies whether the component can be run directly from the Deploy task panel after deployment.

Keywords Free text that describes the component, to be used for searching and grouping purposes.

General

Categories Category entries used to group similar components together.

Title

The title of the component, to be displayed at the top of the component.



Show title Defines whether a title bar is displayed at the top of the component.

Show toolbar Defines whether to add a toolbar to the component.

Toolbar If a toolbar is added to the component, defines whether it is located at the Top or Bottom of the component window.

Main window

Layout

Defines the method used to arrange elements within the component. The following options are available:

• Horizontal flow: Arranges the component elements side-by-side in the component window.

• Vertical flow: Arranges the component elements one above the other in the component window. This is the default layout option.




Scale mode

Defines how to scale the component and its contents. The following options are available:

• Fixed scale: Displays the elements of the component according to their defined sizes. If an element is larger than the component window, scroll bars are added.

• Auto-fit to width: Changes the width of the elements in the component to fit them within the width of the component window.

• Auto-fit to height: Changes the height of the elements in the component to fit them within the height of the component window.

• Auto-fit: Changes the size of the elements in the component to fit them within the size of the component window.

5.4.3.7 Configure <Connecting Line> Task Panel The Configure <Connecting Line> task panel enables you to define attributes for a connecting line of type Data Flow, Data Map, or Transition (between two layers or between a popup and a layer). These connecting line types have similar attributes. The Data Bind connecting line type does not have any attributes.



General Guard

Specifies the condition that must be satisfied in order for the event to be activated.

You can enter a condition directly in the relevant row, or click fx to define a condition in the Dynamic Expression Editor dialog box.

Event name

The name of the action that raises the event for transferring or maps the data between the elements joined by the connecting line.

You can either choose an existing custom event name, or select a predefined event name from the list.




Select mode

Specifies which data rows should be transferred or mapped between elements on the connecting line. The following options are available:

All data rows: Transfers or maps all rows of data.

Current data row: Transfers or maps only the single row of data that is highlighted by the user at runtime (the data row that in which the cursor is positioned).

Selected data rows: Transfers or maps only the rows of data selected by the user at runtime.

This property is available only for connecting lines of type Data Flow and Data Map.

5.4.3.8 Configure <Connector> Task Panel The Configure <Connector> task panel enables you to define attributes for a connector. All connector types have the same attributes.



General Name The name of the connector, to be displayed on the Design board and used when creating references to the connector.

5.4.3.9 Configure Data Service Task Panel The Configure Data Service task panel enables you to define attributes for a data service.



Name The name of the data service. General

Runtime The runtime provider to be used when deploying this data service.

Configuration Auto Commit

For function calls that modify the database, a second “commit” call is automatically sent to confirm the database update.

This option is only available for data services of type BAPI/RFC.

Auto Convert

Indicates that a conversion BAPI is required, to convert values in one unit of measurement to another.

This option is only available for data services of type BAPI/RFC.



5.4.3.10 Configure Date Picker Task Panel The Configure Date Picker task panel enables you to define attributes for a date picker control.



Label



Value






Read-only




General

Enabled






Visible



Indent




Tooltip



Action




Required




Validation


Rules






Behavior






5.4.3.11 Configure Dropdown List Task Panel The Configure Dropdown List task panel enables you to define attributes for a dropdown list control.



Label



General

Value









Read-only



Enabled



Visible



Indent




Tooltip



Action







Entry list


You can click the browse button to open the Entry List Wizard or Edit Entry List dialog box and create or modify the entry list for this control.


Required




Rules



Validation


Behavior








5.4.3.12 Configure Form View Task Panel The Configure Form View task panel enables you to define attributes for a form view.



Title

The title of the form view, to be displayed at the top of the form.



Show title Defines whether the form view title bar is displayed at the top of the form.

Show toolbar Defines whether to add a toolbar to the form view.

Toolbar If a toolbar is added to the form view, defines whether it is located at the Top or Bottom of the form.

Editable

Indicates whether users can enter data into the form and change displayed data at runtime.

If the form view is editable, you can still make specific controls in the view read-only.

You can select or deselect the checkbox to specify whether the form view is editable, or click the fx button to define the expression that specifies under which condition the form view is editable at runtime.

Visible

Indicates whether the form view is hidden or displayed at runtime.

You can select or deselect the checkbox to specify whether the form view is hidden or visible, or click the fx button to define the expression that specifies under which condition the form view is displayed or hidden at runtime.

General

Frame style










Labels

Defines the location of labels for all controls in the form view. The following options are available:

• Before controls: Places each label to the left of its control in the form.

• Above controls: Places each label above its control in the form.

• Hide: Hides all labels in the form.

Scale mode

Defines how to scale the form view and its contents. The following options are available:

• Fixed scale: Displays the controls of the form according to their defined widths and the defined column widths. If the form is wider than the parent container, horizontal scroll bars are added.

• Auto-fit: Changes the width of the controls and columns in the form to fit them within the width of the parent container.

The Scale mode setting of the parent container, for example the window or panel in which the form view is located, affects the resizing of the views that it contains, as follows:

• If the parent Scale mode is set to Auto-fit, then any views in the container are automatically set to Auto-fit, regardless of their individual settings.

• If the parent Scale mode is set to Fixed scale, then any views in the container are sized according to their individual settings.

Columns Defines the number of columns in which to lay out the controls of the form.

Layout

Col. widths

Displays the width of each column in the form as a percentage of the total width, if the form contains more than one column. Click the browse button to open the Customize Column Widths dialog box, in which you can specify the width of each column in the form.

More information: Customize Column Widths Dialog Box



5.4.3.13 Configure Horizontal Separator Task Panel The Configure Horizontal Separator task panel enables you to define attributes for a horizontal separator control.



Visible



General

Indent




5.4.3.14 Configure Hyperlink Task Panel The Configure Hyperlink task panel enables you to define attributes for a hyperlink control.




Text



General

Enabled

Indicates whether the control is enabled or disabled at runtime. A disabled control is displayed, but is grayed out, and cannot be activated by the runtime user.





Visible



Indent




Tooltip



Action

The event to be triggered or action to be executed when the control is clicked at runtime.

You can either enter the name of a custom action directly in the Action field, or you can click the browse button to open the Define Action dialog box and define an action. More information: Define Action Dialog Box.

5.4.3.15 Configure Image Task Panel The Configure Image task panel enables you to define attributes for an image control.



Label



General

URL

The static or dynamic URL of the image to be displayed in the control. You can either enter the URL directly in the URL field, choose a field from the dropdown list, or choose Define expression from the dropdown list to specify a URL using the Dynamic Expression Editor dialog box.




Read-only




Enabled



Visible



Indent




Tooltip



Action







Scale mode

Defines how the external image is displayed within the control. The following options are available:

• Original size: The image is displayed at its original size. Its edges are cut off if the control size is smaller than the image dimensions.

• Auto-fit: The image is resized to fill the control (the height/width ratio is not maintained).

• Fit width: The image is resized so that the width fits in the control and the height/width ratio is maintained.

• Fit height: The image is resized so that the height fits in the control and the height/width ratio is maintained.

• Proportional fit: The image is resized proportionally, so that the entire image fits in the control and the height/width ratio is maintained.

5.4.3.16 Configure Input Field Task Panel The Configure Input Field task panel enables you to define attributes for an input field control.



Label



General

Value









Read-only




Enabled



Visible



Indent




Tooltip



Action







Length Maximum number of characters that can be entered into the control.

Zero fill

Fills an integer string of a given length with zeros to reach the defined string length.

You can select or deselect the checkbox to specify whether zeros should be added to the string, or click the fx button to define the expression that specifies under which condition zeros are added to the string.

Formatting

Password Indicates whether characters entered into the control should be displayed as asterisks.

Required




Rules



Validation


Behavior








5.4.3.17 Configure Layer Task Panel The Configure Layer task panel enables you to define attributes for a layer in a container (for example, a page in a Wizard container, a tab in a Tabstrip container, or a view in a View Switch container).



Title

The title of the layer, to be displayed at the top of the layer.



Layout

Defines the method used to arrange elements within the layer. The following options are available:

• Horizontal flow: Arranges the layer elements side-by-side.

• Vertical flow: Arranges the layer elements one above the other. This is the default layout option.

General

Scale mode

Defines how to scale the layer contents. The following options are available:

• Fixed scale: Displays the elements of the layer according to their defined sizes. If an element is larger than the layer, scroll bars are added.

• Auto-fit to width: Changes the width of the elements in the layer to fit them within the width of the layer.

• Auto-fit to height: Changes the height of the elements in the layer to fit them within the height of the layer.

• Auto-fit: Changes the size of the elements in the layer to fit them within the size of the layer.

Caption

The text to display for the layer in the wizard roadmap.

You can either enter the caption text directly in the Caption field, or click the fx button to define the caption using the Dynamic Expression Editor dialog box.

This option is only available for layers in a Wizard container.

Default transition

The target layer to which this layer should transition, if no other transition is specified. Select the target layer from the dropdown list.

This option is only available for layers in a Wizard container.



5.4.3.18 Configure Nested View Task Panel The Configure Nested View task panel enables you to define attributes for a nested view.



Title

The title of the nested view, to be displayed at the top of the nested view.



Show title Defines whether the nested view title is displayed in a title bar at the top of the nested view.

Visible

Indicates whether the form view is hidden or displayed at runtime.

You can select or deselect the checkbox to specify whether the form view is hidden or visible, or click the fx button to define the expression that specifies under which condition the form view is displayed or hidden at runtime.

Frame style







General

Activate on

Indicates when to activate and deactivate the nested view at runtime. The following options are available:

• Component startup: The nested view is activated when its parent component is started (the component in which the nested view is embedded), and remains active until its parent component is terminated.

• First appearance: The nested view is activated the first time it becomes visible, and remains active until its parent component is terminated.

• Every appearance: The nested view is activated whenever it becomes visible, and is deactivated whenever it becomes hidden.



5.4.3.19 Configure Note Task Panel The Configure Note task panel enables you to define attributes for a note (added to the Design board by right-clicking and choosing Annotate from the context menu).



General Note The textual content of the annotation. Click the Note field to enter or modify the note text.

5.4.3.20 Configure <Operator> Task Panel The Configure <Operator> task panel enables you to define attributes for an operator. All operator types (except for Service Component) have the same attributes.



Name The name of the operator.

General Configuration

Enables you to open the Define <Operator> dialog box to define the properties of the selected operator.

More information: Operator Dialog Boxes

5.4.3.21 Configure Panel Task Panel The Configure Panel task panel enables you to define attributes for a panel container.



Title

The title of the panel, to be displayed at the top of the panel.



Show title Defines whether the panel title bar is displayed at the top of the panel.

Show toolbar Defines whether to add a toolbar to the panel.

General

Toolbar If a toolbar is added to the panel, defines whether it is located at the Top or Bottom of the panel.




Visible

Indicates whether the panel is hidden or displayed at runtime.

You can select or deselect the checkbox to specify whether the panel is hidden or visible, or click the fx button to define the expression that specifies under which condition the panel is displayed or hidden at runtime.

Frame style







Layout

Defines the method used to arrange elements within the panel. The following options are available:

• Horizontal flow: Arranges the panel elements side-by-side.

• Vertical flow: Arranges the panel elements one above the other. This is the default layout option.

Scale mode

Defines how to scale the panel and its contents. The following options are available:

• Fixed scale: Displays the elements of the panel according to their defined sizes. If an element is larger than the panel container, scroll bars are added.

• Auto-fit to width: Changes the width of the elements in the panel to fit them within the width of the panel container.

• Auto-fit to height: Changes the height of the elements in the panel to fit them within the height of the panel container.

• Auto-fit: Changes the size of the elements in the panel to fit them within the size of the panel container.



5.4.3.22 Configure Plain Text Task Panel The Configure Plain Text task panel enables you to define attributes for a plain text control.




Text



Visible



Indent




Tooltip



General

Text style

The appearance of the text displayed on the control. The following options are available:

Default: Displays the text in regular font.

Bold: Displays the text in bold font.



5.4.3.23 Configure Popup Task Panel The Configure Popup task panel enables you to define attributes for a popup container.



Title

The title of the popup window, to be displayed at the top of the popup window.



Show title Defines whether the popup title bar is displayed at the top of the popup window.

Show toolbar Defines whether to add a toolbar to the popup.

Toolbar If a toolbar is added to the popup, defines whether it is located at the Top or Bottom of the popup window.

Layout

Defines the method used to arrange elements within the popup. The following options are available:

• Horizontal flow: Arranges the popup elements side-by-side.

• Vertical flow: Arranges the popup elements one above the other. This is the default layout option.

General

Scale mode

Defines how to scale the popup and its contents. The following options are available:

• Fixed scale: Displays the elements of the popup according to their defined sizes. If an element is larger than the popup container, scroll bars are added.

• Auto-fit to width: Changes the width of the elements in the popup to fit them within the width of the popup container.

• Auto-fit to height: Changes the height of the elements in the popup to fit them within the height of the popup container.

• Auto-fit: Changes the size of the elements in the popup to fit them within the size of the popup container.

Centered

Specifies whether the popup window should be centered over its parent window when opened at runtime.

You can select or deselect the checkbox to specify whether the popup is centered or not at runtime, or click the fx button to define the expression that specifies under which condition the popup is centered at runtime.




Resizable

Specifies whether the popup window can be resized by the end-user at runtime.

You can select or deselect the checkbox to specify whether the popup can be resized at runtime, or click the fx button to define the expression that specifies under which condition the popup can be resized at runtime.

Close action

Opens the Define Action dialog box, in which you can specify an action to be performed when the popup window is closed at runtime.

OK button

Adds an OK button with an associated Close action to the popup container toolbar.

This option is only available if the Show toolbar checkbox is selected.

Cancel button

Adds a Cancel button with an associated Cancel action to the popup container toolbar.

This option is only available if the Show toolbar checkbox is selected.

5.4.3.24 Configure Progress Bar Task Panel The Configure Progress Bar task panel enables you to define attributes for a progress bar control.




Value

The field to which the control is bound. You can either enter the field data directly in the Value field, choose a field from the dropdown list, or choose Define Expression from the dropdown list to specify a field value using the Dynamic Expression Editor dialog box.

General

Visible






Indent




Tooltip



Minimum Lowest numerical value in the range.

Min. label

Defines the label for the low end of the range.

You can either enter the label text directly in the Min. Label field, or click the fx button to define the label using the Dynamic Expression Editor dialog box.

Maximum Highest numerical value in the range.

Max. label

Defines the label for the high end of the range.


Step size The value into which to divide up the range.

Range

Ticks

Number of tick marks displayed on the control.




5.4.3.25 Configure Radio Group Task Panel The Configure Radio Group task panel enables you to define attributes for a radio group control.



Label



Value






Read-only



Enabled



General

Visible






Indent




Tooltip



Action




Entry list


You can click the browse button to open the Entry List Wizard or Edit Entry List dialog box and create or modify the entry list for this control.


Columns The number of columns in which to display the radio buttons in the control.

Validation


Required







Rules



Behavior






5.4.3.26 Configure Service Component Task Panel The Configure Service Component task panel enables you to define attributes for a service component.



Name The name of the service component, in read-only format.

Runtime The runtime provider to be used when deploying this service component.

Define as application

Specifies whether the service component can be run directly from the Deploy task panel after deployment.

Keywords Free text that describes the service component, to be used for searching and grouping purposes.

General

Categories Category entries used to group similar service components together.



5.4.3.27 Configure Table View Task Panel The Configure Table View task panel enables you to define attributes for a table view.



Title

The title of the table view, to be displayed at the top of the table.



Show title Defines whether the table view title bar is displayed at the top of the table.

Show toolbar Defines whether to add a toolbar to the table view.

Toolbar If a toolbar is added to the table view, defines whether it is located at the Top or Bottom of the table.

Selectable

Indicates whether users can select table rows at runtime.

You can select or deselect the checkbox to specify whether the table view is selectable or not, or click the fx button to define the expression that specifies under which condition the table view is selectable at runtime.

Editable

Indicates whether users can enter data into the table and change displayed data at runtime.

If the table view is editable, you can still make specific controls in the view read-only.

You can select or deselect the checkbox to specify whether the table view is editable, or click the fx button to define the expression that specifies under which condition the table view is editable at runtime.

General

Visible

Indicates whether the table view is hidden or displayed at runtime.

You can select or deselect the checkbox to specify whether the table view is hidden or visible, or click the fx button to define the expression that specifies under which condition the table view is displayed or hidden at runtime.




Frame style







Scale mode

Defines how to scale the table and its contents. The following options are available:

• Fixed width: Displays the columns of the table according to their defined widths. If the table is wider than the parent container, horizontal scroll bars are added.

• Auto-fit: Changes the width of the columns in the table to fit all the columns within the width of the parent container.

The Scale mode setting of the parent container, for example the window or panel in which the table view is located, affects the resizing of the views that it contains, as follows:

• If the parent Scale mode is set to Auto-fit, then any views in the container are automatically set to Auto-fit, regardless of their individual settings.

• If the parent Scale mode is set to Fixed scale, then any views in the container are sized according to their individual settings.

Table colors

The color scheme for the table rows. The following options are available:

• Same color: The background color of all rows is white.

• Alternating colors: The background color of rows is alternated between colored and white.

• Transparent: The background color of all rows is colored.

Table rows Defines the number of rows to display per page of the table.

Multi-selection Defines whether runtime users can select multiple rows in the table.

Header row

Defines whether the header row of the table (the column headings) is displayed for the table view.



5.4.3.28 Configure Tabstrip Task Panel The Configure Tabstrip task panel enables you to define attributes for a tabstrip container.



Name

The name of the tabstrip, to be displayed at the top of the tabstrip container.

You can either enter a name in the field, or click the browse button to open the Edit Title dialog box and specify a name using a dynamic expression.


Show toolbar Defines whether to add a toolbar to the tabstrip.

Toolbar If a toolbar is added to the tabstrip, defines whether it is located at the Top or Bottom of the tabstrip.

Visible

Indicates whether the tabstrip is hidden or displayed at runtime.

You can select or deselect the checkbox to specify whether the tabstrip is hidden or visible, or click the fx button to define the expression that specifies under which condition the tabstrip is displayed or hidden at runtime.

Frame style







General

Default layer

The tab layer to be displayed by default when the tabstrip container is first displayed.



5.4.3.29 Configure Text Editor Task Panel The Configure Text Editor task panel enables you to define attributes for a text editor control.



Label



Value






Read-only




General

Enabled






Visible



Indent




Tooltip



Action




Required




Validation


Rules






Behavior






5.4.3.30 Configure Toggle Button Task Panel The Configure Toggle Button task panel enables you to define attributes for a toggle button control.



Label

The label text to be displayed on the control.


Value






General

Read-only Indicates whether the control is read-only or editable at runtime. A read-only control is displayed at runtime, but its value cannot be




modified by the runtime user.



Enabled



Visible



Indent




Tooltip



Action







Required




Rules



Validation


Behavior








5.4.3.31 Configure Vertical Separator Task Panel The Configure Vertical Separator task panel enables you to define attributes for a vertical separator control.



Visible



General

Indent




5.4.3.32 Configure View Switch Task Panel The Configure View Switch task panel enables you to define attributes for a view switch container.



Name

The name of the view switch, to be displayed at the top of the view switch container.



Show title

Defines whether the view switch title bar is displayed at the top of the view switch container.

Show toolbar Defines whether to add a toolbar to the view switch container.

General

Toolbar If a toolbar is added to the view switch, defines whether it is located at the Top or Bottom of the tabstrip.




Visible

Indicates whether the view switch is hidden or displayed at runtime.

You can select or deselect the checkbox to specify whether the view switch is hidden or visible, or click the fx button to define the expression that specifies under which condition the view switch is displayed or hidden at runtime.

Frame style







Default layer

The view switch layer to be displayed by default when the view switch container is first displayed.

5.4.3.33 Configure Window Task Panel The Configure Window task panel enables you to define attributes for an application window.



Title

The title of the window, to be displayed at the top of the window.



Show title Defines whether the window title bar is displayed at the top of the window.

Show toolbar Defines whether to add a toolbar to the window.

General

Toolbar If a toolbar is added to the window, defines whether it is located at the Top or Bottom of the window.




Layout

Defines the method used to arrange elements within the window. The following options are available:

• Horizontal flow: Arranges the window elements side-by-side.

• Vertical flow: Arranges the window elements one above the other. This is the default layout option.

Scale mode

Defines how to scale the window and its contents. The following options are available:

• Fixed scale: Displays the elements of the window according to their defined sizes. If an element is larger than the window, scroll bars are added.

• Auto-fit to width: Changes the width of the elements in the window to fit them within the width of the window.

• Auto-fit to height: Changes the height of the elements in the window to fit them within the height of the window.

• Auto-fit: Changes the size of the elements in the window to fit them within the size of the window.

5.4.3.34 Configure Wizard Task Panel The Configure Wizard task panel enables you to define attributes for a wizard container.



Name

The name of the wizard, to be displayed at the top of the wizard container.



Show toolbar Defines whether to add a toolbar to the wizard.

General

Toolbar If a toolbar is added to the wizard, defines whether it is located at the Top or Bottom of the wizard.




Visible

Indicates whether the wizard is hidden or displayed at runtime.

You can select or deselect the checkbox to specify whether the wizard is hidden or visible, or click the fx button to define the expression that specifies under which condition the wizard is displayed or hidden at runtime.

Frame style







Default layer

The wizard step to be displayed by default when the wizard container is first displayed.

Roadmap style

Defines the appearance of the wizard roadmap displayed at the top of the wizard container. The following options are available:

• Full: Displays main and substeps of the wizard in the roadmap.

• Top level only: Displays only main steps of the wizard in the roadmap.

• None: Does not display a roadmap for the wizard.

5.4.4 Search Task Panel The Search task panel enables you to locate and import data services required as the sources of information processed in a component, for example, BAPIs, RFCs, Web services, and SAP enterprise services. You can also use the Search task panel to locate existing components to reuse them in your model. You search for the required data service or component, and then drag it onto the Design board from the Search task panel.

When searching for enterprise services, you can search for an operation in a specific enterprise service, or you can search through the entire service repository, filtering by classification to locate the required enterprise service.



The Search task panel contains the following items:

Item Description

Search in The system in which you want to search, for example, R3, Web Service, Service Registry, or Visual Composer Models.

Search for The name of the data service or component that you want to locate. You can use an asterisk (*) in the string as a wildcard to search for a partial match.

Type

The type of data service, for example, Bapi/RFC, WSDL, or Service Registry. You can also choose DC to search for a development component or Model to search for a specific named component. The available types depend on the option you selected in the Search in field.

Advanced Search

Opens the Select Classifications dialog box, in which you can specify additional criteria to fine-tune the search parameters.

More information: Select Classifications Dialog Box

Results

Displays the items that match the search criteria. Depending on the search criteria, the Results area may show data services, models, or development component and model hierarchy. You can then drag an item from the Results area onto the Design board for use in your model. The Results area also displays any errors that occur during the search operation.

5.4.4.1 Select Classifications Dialog Box You use the Select Classifications dialog box to fine-tune your enterprise service search in the service registry.

You display the Select Classifications dialog box by clicking the Advanced Search link in the Search task panel (available only when you select Service Registry in the Search in dropdown list).

The Select Classifications dialog box contains the following items:

Item Description

Classification list

A hierarchical list of classification types. Expand the nodes and select the checkbox next to each classification category in which you want to search. You can search in multiple categories simultaneously (multiple selections are defined with an AND relationship).

Type Type information for the selected category.

Name Descriptive name of the selected category.



5.4.5 Deploy Task Panel The Deploy task panel enables you to compile and deploy your model on-demand so you can check it.

The Deploy task panel contains the following items:

Item Description

DC The development component in which the active model is stored. When you choose to compile or deploy a model, all models stored in this development component are compiled or deployed.

Include dependencies

Compiles or deploys all the models used throughout the dependency chain of the active model.

This means that any components referenced from the current model, any components referenced from the referenced components, and so on, are all compiled or deployed, regardless of the development component in which they are located (meaning that if a referenced model resides in another development component, all models in that development component are also deployed). Depending on the length of the dependency chain, this may take some time.

Compile Creates the XGL code for the active model (and other models, if applicable) and passes it to the runtime provider to convert as needed.

Deploy

Performs the compilation process (see above) and then takes the runtime format files and creates an archive file that can be deployed to the AS Java.

If the Deploy button is disabled, verify that you have selected a runtime environment (not XGL) in the Runtime field.

Make sure that you have saved the current model (and any dependent models, if relevant) before compiling or deploying the model. If you have not saved the models, a message is displayed asking whether you want Visual Composer to save them before continuing with the selected operation. You can select the Automatically save models before build checkbox in the Compiler section of the Options pane ( Tools Options ) to automatically save all open models before compilation or deployment operations.

Results pane Displays information regarding the compilation or deployment process, as described below.

View source code Displays the compiled XGL source code.



Item Description

<Development Component>

Each development component that was deployed is displayed in the results pane. You can expand each development component to display links to all the components defined as applications in the development component that was deployed (and also in any development components in the dependency chain, if the Include dependencies checkbox was selected). You can click an application link to run the specific application in the runtime environment to which it was deployed.

If you deployed a model and there are no application links displayed, it means that there were no models defined as applications in the current development component.

Info/Warnings/Errors

Displays groups of informative messages, warnings, and errors that may have occurred during compilation and deployment. You can click a link in this group to highlight the problematic element on the Design board, where relevant.

5.5 View Dialog Boxes The following dialog boxes enable you to define information relevant to a specific Visual Composer view element, such as a form or chart, or a connecting line:

• Customize Column Widths Dialog Box

• Edit Data Series Dialog Box

• Edit Title Dialog Box

• Select Event Dialog Box

5.5.1 Customize Column Widths Dialog Box The Customize Column Widths dialog box enables you to define the width of each column in a form view as a percentage of the total form width. You can only define the column widths when the form is set up with more than one column (using the Columns dropdown list in the Configure task panel for the form view).

You display the Customize Column Widths dialog box by right-clicking a form on the Layout board and choosing Customize Columns from the context menu.



The Customize Column Widths dialog box contains the following items:

Item Description

Column width area

Enables you to view or modify the percentage width for each column in the form (you cannot modify the width of the last column because it is calculated automatically based on the width remainder).

A column width must be greater than 0%, and the sum of all the column widths cannot exceed 100%.

Default Automatically assigns equal widths to each column in the form.

5.5.2 Edit Data Series Dialog Box The Edit Data Series dialog box enables you define the data series to display in the chart. A data series is a set of related data points from a data source that are plotted in a chart. Each data series is automatically assigned a unique default color at runtime. You can plot one or more data series in a chart. Pie charts have only one data series.

You display the Edit Data Series dialog box by clicking the browse button next to the Data series field in the Configure Element task panel.

The Edit Data Series dialog box contains the following items:

Item Description

Add Row Adds a data series to the list.

Delete Row Deletes the selected data series.

Move Up Moves the selected data series one place up in the list (one place left in the chart).

Move Down

Moves the selected data series one place down in the list (one place right in the chart).

Data Series

The name of the data series you are defining. You can accept the default name, or enter a new name.

Pie charts support only a single data series; any additional data series that you define are ignored. Other chart types support the use of multiple data series.



Item Description

Formula

The data source to be displayed in the chart for the selected data series. Click the field and choose Define expression from the context menu to open the Dynamic Expression Editor dialog box. Use the Dynamic Expression Editor dialog box to select the data fields to use as the data source. You can also define a formula that combines data fields, functions, and operators to create the required data source for the data series.

More information: Working with Dynamic Expressions

5.5.3 Edit Title Dialog Box The Edit Title dialog box enables you to define a title for the model element that will be used at design time and at runtime.

You display the Edit Title dialog box by clicking the browse button next to the Title field in the Configure Element task panel.

The Edit Title dialog box contains the following items:

Item Description

Default title

The static title for the model element. The default title is displayed for the element on the Design board. It is also displayed for the element on the Layout board, if a custom title is not defined.

At runtime, the default title is used if you do not define a custom title.

Custom title

The title for the model element. A custom title can contain dynamic expressions and is created dynamically at runtime. It is used at runtime as the element title.

If you define a custom title, the title [Custom] is used for the element on the Layout board. The custom title is not used for the element on the Design board; in this case, the default title is used.

5.5.4 Select Event Dialog Box You use the Select Event dialog box to choose a predefined event that must be triggered to execute the action on the connecting line. You can also define whether the event should be triggered on its own, or together with other events of the same name.

You display the Select Event dialog box by selecting a connecting line with an event on the Design board and choosing Predefined events from the Event name dropdown list in the Configure task panel.



The Select Event dialog box contains the following items:

Item Description

Event list

List of predefined events from which you can select an event to use for the connecting line.

Event scope

Defines the scope of the event, meaning whether the event is triggered on its own, or together with other events of the same name. The following scope options are available:

• Source element: The event is triggered by the element from which the event line is drawn.

• Any element: Adds an asterisk (*) to the event name. If any event of the same name (without an asterisk) is raised, this event is triggered as well.

You can also define this behavior type by adding an asterisk to any event name directly in the Event name field in the Configure task panel.

5.6 Control Dialog Boxes The following dialog boxes enable you to define information relevant to a specific Visual Composer control, including actions, entry lists, and validation rules:

• Define Action Dialog Box

• Edit Entry List Dialog Box

• Entry List Wizard

• Validation Rules Dialog Box

5.6.1 Define Action Dialog Box The Define Action dialog box contains two tabs:

• Actions: Enables you to define one or more actions to be performed by the selected control, and the properties of each action.

• Validation: Enables you to define which controls are validated when an action is performed, and how the controls behave when validation fails.

You display the Define Action dialog box by selecting a control on the Layout board and clicking the browse button next to the Action field in the Configure Element task panel, or by right-clicking a control and choosing Action from the context menu. You can also display the Define Action dialog box by selecting a Popup container on the Design board and clicking the browse button next to the Close action property in the Configure task panel.



The Define Action dialog box contains the following items:

Tab Item Description

Add Action

Opens a list from which you can choose a predefined action. You can also choose Custom Action to define a custom action.

For a description of the predefined actions and their properties, see Predefined Actions and Properties below.

Remove Action Removes the currently selected action from the list.

Move Up Moves the selected action up one place in the list (up one place in the priority order).

Move Down

Moves the selected action down one place in the list (down one place in the priority order).

Rename Action

Renames the currently selected action. You can rename only custom actions and the Submit action.

# The number of the action in the list. The number defines the priority for each action in a compound action.

Action Name

The name of the action. For a custom action, you specify the action name in this column. When you rename an action, you enter the new name in this column.

Actions

Execution mode

When more than one action is defined for a control, specifies when they should be performed. You can choose one of the following options:

• Sequence: When the compound action is triggered, perform each action in the order it is defined in the list.

• Switch: When the compound action is triggered, perform the first action in the list that matches the defined condition. After one action has been performed, do not continue with the remaining actions in the list.



Tab Item Description

Action Properties

The properties for the currently selected action. All actions have the following properties:

• Action name: The name of the predefined or custom action, in read-only format.

• Condition: The condition that must be met for the action to be performed. Click the fx button to open the Dynamic Expression Editor dialog box in which you can define the condition.


In addition to these properties, some action types have additional properties. For more information, see Predefined Actions and Properties, below.

Validation scope

Defines the controls that will undergo validation when the action is triggered:

• None: No validation occurs. For example, you may want to use this scope for a Cancel button, since no validation is needed when a Cancel Window action is triggered.

• Control: The control for which this action is defined is validated.

• Element: All controls in the view in which the action is defined are validated.

• Window: All controls in the window in which the action is defined are validated. For example, if a component contains views such as forms and tables, all of their controls are validated, but not controls in nested components or popups.

Validation

Validation Behavior

Defines whether the action should be performed if a control fails validation:

• Normal: An invalid control prevents the action from being performed, irrelevant of any validation defined for the control in the Behavior field of the Validation group in the Configure task panel.

• Permissive: An invalid control may or may not prevent the action from being performed, depending on the value defined for the control in the Behavior field of the Validation group in the Configure task panel.



Predefined Actions and Properties Visual Composer provides a number of predefined actions; each predefined action triggers a specific behavior. The properties displayed in the Action Properties area of the Define Action dialog box differ according to the currently selected action type. The Action name and Condition properties are applicable for all predefined action types (as described in the previous table). Following is a description of each of the actions and their specific properties:

Predefined Action Properties Description

Submit No additional properties

A predefined custom action with no specific behavior. You can use it to perform whichever operation you want.

Back No additional properties

Navigates to the previously displayed view/layer (before the last transition was performed).

Assign Takes the specified value from the specified view and assigns it to the specified field in the specified view.

From The view in which the source value is located.

Value The value to take from the source view and transfer to the target field. The value is an expression and can be composed of multiple fields.

To The view in which the target field is located.

Target field The field to which to assign the specified value.

Copy Row(s)/Move Row(s) Copies or moves the specified row(s) from one view to another.

From The view from which to copy or move the specified row(s).

To The view to which to copy or move the specified row(s).

Scope The rows to be copied or moved. You can choose to copy or move the Current row (the row in which the cursor is located), the Selected rows (the currently highlighted rows), or All rows.

Insert The location at which to insert the row. You can choose to insert the row Before or After the currently selected row at runtime, or insert it as the First or Last row in the table.

Map Data

Opens the Map Data dialog box so you can map the data between the source and target views. Mapping between fields with identical names is performed automatically.

More information: Map Data Dialog Box




Hyperlink Opens a specified URL in a new window.

URL The URL address to open. The URL must start with http:// or https://, for example, http://www.sap.com.

Clear Resets the values in the current row of the specified view to the default values.

Apply to The view in which to reset the current row values to the default values.

Delete Row(s) Deletes the specified row(s) from the table.

From The view from which to delete the row(s).

Delete

The rows to delete. You can choose to delete the Current row (the row in which the cursor is located), the Selected rows (the currently highlighted rows), or All rows.

Find Row Finds the next row in the view that matches the specified condition. The search starts from the current cursor location, and then continues in a cyclic manner.

Find in The view in which to search for the row.

Find what

The condition that specifies the search criteria. You can either enter a string or click the fx button to open the Dynamic Expression Editor dialog box and define an expression as the criteria.


Insert Row Inserts a row at the specified location in the table.

To The view in which to insert the row.

Insert

The location at which to insert the row. You can choose to insert the row Before or After the currently selected row at runtime, or insert it as the First or Last row in the table.

Sort Rows Sorts the rows in the view according to a specified criteria.

Apply to The view whose rows you want to sort.

Sort by

The condition by which to sort the rows. You can either enter a string or click the fx button to open the Dynamic Expression Editor dialog box and define an expression as the condition.





Cancel Window/Close Window/Open Window

Closes, opens, or cancels (closes and discards any changes) the specified window.

Window The window on which to perform the specified action.

Prompt Displays a message in a modal dialog box.

Message

The message text to display. You can either enter a string or click the fx button to open the Dynamic Expression Editor dialog box and define the message using an expression.


Trigger Transition Performs a transition from one view or layer to another.

From The source view or layer from which to perform the transition.

To The target view or layer to which to perform the transition.

5.6.2 Edit Entry List Dialog Box The Edit Entry List dialog box enables you to modify an existing list of entries to be used as input for the control at runtime.

You display the Edit Entry List dialog box by selecting a control on the Layout board that has an entry list defined for it and clicking the browse button next to the Entry list field in the Configure Element task panel, or by right-clicking the control and choosing Entry List from the context menu.

The Edit Entry List dialog box contains the following items:

Item Description

Name The name of the entry list. The name can be used to provide additional descriptive information about the entry list.

Type

The type of entry list being created:

• Static: An entry list in which you predefine each item as a static value.

• Dynamic: An entry list that is populated dynamically from a data service at runtime, according to the input fields selected and the corresponding values that you assign.

Delete Entry List Deletes the entry list that was defined for the control.



Depending on the type of entry list you are editing, the Edit Entry List dialog box contains different options:

Static Entry List Options

The options in the Edit Entry List dialog box are the same as the options in the Define List Items step of the Entry List wizard.

More information: Entry List Wizard: Define List Items

Dynamic Entry List Options

Item Description

Data Service

The data service used to populate the items in the entry list. This option is only relevant for dynamic entry lists.

The data service cannot be changed when modifying an existing entry list. If you need to change the data service, delete the entry list and create a new one using the Entry List wizard.

Inputs The options in the Inputs tab of the Edit Entry List dialog box are the same as the options in the Configure Input step of the Entry List wizard.

More information: Entry List Wizard: Configure Input

Outputs The options in the Outputs tab of the Edit Entry List dialog box are the same as the options in the Configure Output step of the Entry List wizard.

More information: Entry List Wizard: Configure Output

5.6.3 Entry List Wizard The Entry List wizard enables you to create predefined lists of entries to be used as input for certain controls at runtime.

You display the Entry List wizard by selecting a control that supports entry lists on the Layout board and clicking the browse button next to the Entry list field in the Configure Element task panel, or by right-clicking the control and choosing Entry List from the context menu.

The wizard steps displayed depend on the type of entry list you are creating:

• Static entry list: An entry list in which you predefine each item as a static value.

• Dynamic entry list: An entry list that is populated dynamically from a data service at runtime, according to the input fields selected and the corresponding values that you assign.

When creating a static entry list, the following pages are displayed:

1. Select Entry List Type

2. Define List Items



When creating a dynamic entry list, the following pages are displayed:

1. Select Entry List Type

2. Select Data Service

3. Configure Input

4. Configure Output

More information: Creating Entry Lists

5.6.3.1 Entry List Wizard: Select Entry List Type The Select Entry List Type step of the Entry List wizard enables you to define a name for the entry list and specify the type of entry list you are creating. The Select Entry List Type step contains the following items:

Item Description

Name A descriptive name for the entry list. This name is displayed in the Edit Entry List dialog box, but is not used for any other purpose.

Static The type of list being created. A static list is an entry list in which you predefine each item as a static value.

Dynamic The type of list being created. A dynamic list is an entry list that is populated dynamically from a data service at runtime, according to the input fields selected and the corresponding values that you assign.

Wizard roadmap

The wizard roadmap displays the steps required to create the entry list, and changes according to the type of list you are creating. The current step is highlighted in the roadmap.

5.6.3.2 Entry List Wizard: Define List Items The Define List Items step of the Entry List wizard enables you to define the static items for your entry list. The Define List Items step contains the following items:

Item Description

Value The unique field value that is transferred at runtime.

Display Text The value that is displayed in the control for selection at runtime.

Add Row Adds another entry to the list.

Delete Row Removes the highlighted row from the list.



Item Description

Move Up Moves the highlighted item one place up in the list.

Move Down Moves the highlighted item one place down in the list.

5.6.3.3 Entry List Wizard: Select Data Service The Select Data Service step of the Entry List wizard enables you to specify which data service to use when populating a dynamic entry list with items.

The Select Data Service step contains the following items:

Item Description

Search for The name of the data service that you want to locate. You can use an asterisk (*) in the string as a wildcard to search for a partial match.

Search in The system in which you want to search, for example, R3, Web Service, or Service Registry.

Type The type of data service, for example, Bapi/RFC, WSDL, or Service Registry. The available types depend on the option you selected in the Search in field.

Search Performs the search according to the specified parameters.

Cancel Cancels the search currently being performed.

Advanced Search

Opens the Select Classifications dialog box, in which you can specify additional criteria to fine-tune the search parameters.

More information: Select Classifications

Results

Displays the data services that match the search criteria. Select the data service that you want to use as input for the entry list items.

The Results area also displays any errors that occur during the search operation.

The items in the Select Data Service step are the same as the items in the Search task panel.

More information: Search Task Panel

5.6.3.4 Entry List Wizard: Configure Input The Configure Input step of the Entry List wizard enables you to specify the values required by the selected data service to retrieve the output for the entry list.



The Configure Input step contains the following items:

Item Description

Mapping area

Displayed only when there are multiple input ports on the selected data service. The left side of the mapping area displays the output port of the UI element, and the right side displays the input ports of the selected data service.

You map the output port of the UI element to the input port of the data service by dragging from the port on the left to the relevant port on the right. You can map the output port to multiple input ports.

You can delete a mapping by right-clicking the relevant mapping line and choosing Delete Mapping from the context menu.

Target Field

Displays the list of fields for which the data service requires input. The fields displayed depend on the input port selected in the mapping area (if the data service has multiple input ports).

The field type (for example, string or date) is indicated by an icon next to the field name. More information: Define Data.

Assigned Value

Enables you to enter the values required by the data service to retrieve the values used to populate the entry list. If the data service has multiple input ports, you can only enter values for input ports that you have mapped in the mapping area.

You can enter values in one of the following ways:

• Enter free text: Type a value directly in the Assigned Value field of the relevant row.

• Assign a field value: Select a field from the dropdown list in the Assigned Value field of the relevant row. The dropdown list contains fields of the same type as the target field type, which are located in the same UI element as the control for which you are defining the entry list.

• Define a dynamic expression: Select Define expression from the dropdown list in the Assigned Value field of the relevant row. Use the Dynamic Expression Editor dialog box to define an expression that returns a value of the same type as the target field type.

More information: Dynamic Expression Editor Dialog Box



5.6.3.5 Entry List Wizard: Configure Output The Configure Output step of the Entry List wizard enables you to select the data service port and fields that provide the items for the entry list. It also enables you to add additional static items to the list.

The Configure Output step contains the following items:

Item Description

Output port The port of the data service that returns the values you want to use to populate the entry list.

Cluster node

The source node of the clustered dataset that contains the field whose values you want to use for the entry list. You can either select a specific node, or select [root] to use the root node of the dataset.

This option is only displayed if the selected output port contains a clustered dataset.

Output Field Displays the VALUE and the TEXT rows to define the two fields that correspond to the actual value returned and the text to be displayed in the list.

Assigned Value

The fields used to provide the items for the entry list. The VALUE row is the field from which the value should be taken and the TEXT row is the field from which the item display text should be taken.

Additional entries

Enables you to define additional static entries to be added above the dynamic entries in the entry list. When you select this checkbox, the items listed below are displayed.

Value The unique field value that is transferred at runtime.

Display Text The value that is displayed in the control for selection at runtime.

Add Row Adds another entry to the list.




5.6.4 Validation Rules Dialog Box You use the Validation Rules dialog box to define rules that check the validity of values entered into specific controls at runtime and display error messages when the validation fails.

You display the Validation Rules dialog box by selecting a control on the Layout board and clicking the browse button next to the Rules field in the Validation group in the Configure Element task panel.



The Rules field in the Validation group in the Configure Element task panel is enabled only when you have selected a control that is bound to a field. You bind a control to a field in the Define Data dialog box.

More information: Define Data Dialog Box

The Validation Rules dialog box contains the following items:

Item Description

Add Row

Adds another row to the list. You can then define the condition and value against which you want to validate the control at runtime.

The control value must pass all the validation conditions defined in all the rows of the Validation Rules dialog box to be successfully validated.


Move Up Moves the highlighted item one place up in the list, changing the order in which the validation rules are applied.

Move Down Moves the highlighted item one place down in the list, changing the order in which the validation rules are applied.

The condition according to which to validate the field value. The available conditions depend on the field type. Condition

String

• Is equal: The field value exactly matches the value defined in the Value field

• Is blank: The field value is empty

• Contains: The field value contains the value defined in the Value field

• Starts with: The field value starts with the value defined in the Value field

• Ends with: The field value ends with the value defined in the Value field

• Not equal: The field value exactly matches the value defined in the Value field

• Not blank: The field value is not empty

• Does not contain: The field value does not contain the value defined in the Value field

• User defined: The field value is validated according to the condition defined in the Value field



Item Description

Boolean

• Is true: The field value is true

• Is false: The field value is false


Number

• Is equal: The field value is the same as the value defined in the Value field

• Is smaller: The field value is less than the value defined in the Value field

• Is greater: The field value is greater than the value defined in the Value field

• Not smaller: The field value is equal to or greater than the value defined in the Value field

• Not greater: The field value is equal to or less than the value defined in the Value field

• Not equal: The field value is not the same as the value defined in the Value field


Date/Time

• Is equal: The field value is the same as the value defined in the Value field

• Is earlier than: The field value is chronologically earlier than the value defined in the Value field

• Is later than: The field value is chronologically later than the value defined in the Value field

• Not equal: The field value is not the same as the value defined in the Value field


Value

The value against which to validate the control at runtime. You can enter a value, select a field from the dropdown list, or choose Define expression from the dropdown list to define a value using the Dynamic Expression Editor dialog box.

The Value field is not relevant if the selected condition is Is blank, Not blank, Is true, or Is false.

Error Message The error message to be displayed at runtime if the control fails validation. The way in which the error message is displayed depends on the specific runtime implementation.



5.7 Operator Dialog Boxes The following dialog boxes enable you to configure operator elements, such as filter, sort, and aggregate, in a model:

• Define Aggregate Dialog Box

• Define Distinct Dialog Box

• Define Filter Dialog Box

• Define Sort Dialog Box

• Define Switch Dialog Box

• Define Union Dialog Box

The following wizard enables you to create a new service component that contains static data:

• Service Component Wizard

5.7.1 Define Aggregate Dialog Box You use the Define Aggregate dialog box to aggregate the values of a specified field into a single field, according to the specified operation.

You display the Define Aggregate dialog box by selecting an Aggregate operator icon on the Design board and clicking the browse button next to the Configuration field in the Configure Element task panel, or by right-clicking the Aggregate operator icon on the Design board and choosing Define Operator from the context menu.

The Define Aggregate dialog box contains the following items:

Item Description

Add Row Adds another row to the list. You can then define how to aggregate the data.


Move Up Moves the highlighted item one place up in the list, giving it higher priority.

Move Down Moves the highlighted item one place down in the list, giving it lower priority.

Field

The field whose values you want to aggregate. In the dropdown list, you can select a field from the data source connected to the operator, or you can select Define expression to define a field using the Dynamic Expression Editor dialog box.

Operation

The aggregate operation to perform on the field values. You can choose from the following operations:

• Average: Returns the average (arithmetic mean) of the field values. Available only for fields of type Number.

• Count: Returns the total number of field values that are not blank.



Item Description

• Max: Returns the greatest field value.

• Min: Returns the lowest field value.

• Median: Returns the median field value. The median is the number in the middle of a set of numbers.

• Sum: Returns the sum of all field values. Available only for fields of type Number.

• Std dev: Estimates the standard deviation based on the field values. The standard deviation is a measure of how widely values are dispersed from the average value (the mean). Available only for fields of type Number.

• Variance: Estimates the variance based on the field values. The variance is a measure of the squared distance of the possible field values from the expected value (the mean). Available only for fields of type Number.

• Group by: Groups the field values by the specified field name, in ascending or descending order.

Condition

The criteria that must be met for the aggregate operation to be performed. You can enter a condition, or click the fx button to define a condition using the Dynamic Expression Editor dialog box.

This option is not relevant for the Group by operation.

Direction

The direction in which to group the data. For example, you can group text, numbers, or data in ascending (Up) order (A to Z, zero to 9, or earliest to latest date). Or, you can group values in descending (Down) order (Z to A, 9 to zero, or latest to earliest date).

This option is only relevant for the Group by operation.

Field Name The name of the new data field to which to assign the result of the aggregate operation.

Description area

Displays a description of the selected aggregate definition, in plain-language sentence format. For example, Return Count of =@CITY as City, group by =@BANK_CTRY as Country Ascending.

5.7.2 Define Distinct Dialog Box Note that the fewer fields marked as distinct, the fewer records are returned. For example, a data service returns the following fields: Bank Country, Bank Key, and Bank Name. If only Bank Country is marked as distinct, the first appearance of a value, such as France, in the combination of Bank Country–Bank Key–Bank Name is returned. Any subsequent combination containing France is not returned. If, on the other hand, all three fields are marked as distinct, each combination becomes distinct, so that the potential list of results is greater.



You display the Define Distinct dialog box by selecting a Distinct operator icon on the Design board and clicking the browse button next to the Configuration field in the Configure Element task panel, or by right-clicking the Distinct operator icon on the Design board and choosing Define Operator from the context menu. You use the Define Distinct dialog box to omit records containing duplicate data in the selected fields.

The Define Distinct dialog box contains the following items:

Item Description

Add Row Adds another row to the list. You can then define the field according to which to omit any records with duplicate values.


Distinct Field

A field whose values should be returned only once. In the dropdown list, you can select a field from the data source connected to the operator, or you can select Define expression to define a field using the Dynamic Expression Editor dialog box.

Field Name The name of the new data field to which to assign the distinct field values.

Description Displays a description of the selected distinct definition, in plain-language sentence format. For example, Return distinct =@BANK_CTRY as BANK_CTRY..

5.7.3 Define Filter Dialog Box You use the Define Filter dialog box to filter data by specific field values.

You display the Define Filter dialog box by selecting a Filter operator icon on the Design board and clicking the browse button next to the Configuration field in the Configure Element task panel, or by right-clicking the Filter operator icon on the Design board and choosing Define Operator from the context menu.

The Define Filter dialog box contains the following items:

Item Description

Add Row

Adds another row to the list. You can then define the field according to which you want to filter the data.

Data must match all the conditions defined in all the rows of the Define Filter dialog box to be passed through the filter.


Field

The data field by which you want to filter the data. In the dropdown list, you can select a field from the data source connected to the operator, or you can select Define expression to define a field using the Dynamic Expression Editor dialog box.



Item Description

Condition

The condition by which to filter the field values. You can choose from the following conditions:

• Is equal to: Value of the field exactly matches the value defined in the Expression field

• Starts with: Value of the field starts with the value defined in the Expression field

• Ends with: Value of the field ends with the value defined in the Expression field

• Contains: Value of the field contains the value defined in the Expression field

Expression The filtering expression by which to filter the data. You can enter an expression, or click the fx button to define an expression using the Dynamic Expression Editor dialog box.

Description area

Displays a description of the selected filter definitions, in plain-language sentence format. For example, Filter by =@BANK_CTRY is equal to DE, and by =@CITY starts with Be OR Fr.

5.7.4 Define Sort Dialog Box You use the Define Sort dialog box to sort output data according to the values in a specified field.

You display the Define Sort dialog box by selecting a Sort operator icon on the Design board and clicking the browse button next to the Configuration field in the Configure Element task panel, or by right-clicking the Sort operator icon on the Design board and choosing Define Operator from the context menu.

The Define Sort dialog box contains the following items:

Item Description

Add Row

Adds another row to the list. You can then define the field according to which you want to sort the data.

The data is sorted according to the values of the field defined in the first row of the Define Sort dialog box, and then the sorted data is further sorted according to the second row, and so on.


Move Up Moves the highlighted item one place up in the list, changing the sorting priority.

Move Down Moves the highlighted item one place down in the list, changing the sorting priority.



Item Description

Sort By

The data field according to which you want to sort the output data. In the dropdown list, you can select a field from the data source connected to the operator, or you can select Define expression to define a field using the Dynamic Expression Editor dialog box.

Direction

The direction in which to sort the data. For example, you can sort text, numbers, or data in ascending (Up) order (A to Z, zero to 9, or earliest to latest date). Or, you can sort in descending (Down) order (Z to A, 9 to zero, or latest to earliest date).

Display all rows At runtime, shows all returned and sorted data.

Number of rows At runtime, shows only the specified number of sorted data records.

Description area

Displays a description of the selected sort definitions, in plain-language sentence format. For example, Sort by =@BANK_CTRY Ascending, then by =@CITY Ascending. Keep the first 30 record(s).

5.7.5 Define Switch Dialog Box You use the Define Switch dialog box to define multiple execution flows, by specifying the input from multiple sources (such as a data service and a form view) to be passed by the Switch operator as input to a single model element.

You display the Define Switch dialog box by selecting a Switch operator icon on the Design board and clicking the browse button next to the Configuration field in the Configure Element task panel, or by right-clicking the Switch operator icon on the Design board and choosing Define Operator from the context menu.

The Define Switch dialog box contains the following items:

Item Description

Add Row

Adds another row to the list. For each row, you define the fields whose data is received as input from the different data sources and passed through the operator. Note that in each row, the data type must be the same for the defined fields.






Item Description

<Port Name>

A <Port Name> column is displayed for each data source output port that is connected to the Switch operator. For each connected port, specify the field that contains the data that you want to output from the operator to the target field.

In the dropdown list, you can select a field from the output port connected to the operator, or you can select Define expression to define a field using the Dynamic Expression Editor dialog box.

You connect each data source output port that you want to merge (for example, data service, view element, or other operator) to a separate input port on the Switch operator. You add and remove ports on the operator by right-clicking the operator icon on the Design board and choosing Add Port or Remove Port from the context menu. You can add an unlimited number of ports.

Field Name The name of the new target data field to which to assign the source field values.

5.7.6 Define Union Dialog Box You use the Define Union dialog box to merge the data of multiple datasets into a new dataset. For example, you may have a field in one data service called FirstName and a field in another dataset called FName. You can use the Union operator to combine the data from these two fields into a single field called Name.

You display the Define Union dialog box by selecting a Union operator icon on the Design board and clicking the browse button next to the Configuration field in the Configure Element task panel, or by right-clicking the Union operator icon on the Design board and choosing Define Operator from the context menu.

The Define Union dialog box contains the following items:

Item Description

Add Row

Adds another row to the list. For each row, you define the fields whose data you want to merge.




Item Description

<Port Name>

A <Port Name> column is displayed for each output port that is connected to the Union operator. For each connected port, specify the field that contains the data that you want to merge.

In the dropdown list, you can select a field from the output port connected to the operator, or you can select Define expression to define a field using the Dynamic Expression Editor dialog box.

You connect each data source output port that you want to merge (for example, data service, view element, or other operator) to a separate input port on the Union operator. You add and remove ports on the operator by right-clicking the operator icon on the Design board and choosing Add Port or Remove Port from the context menu. You can add an unlimited number of ports.

Field Name The name of the new target data field to which to assign the merged field values.

Key

Specifies that the entries merged into the new field are unique (any duplicate entries from the source fields are not added to the target field). To define a field as a Key field, click the Key cell for a specific row. A checkmark is displayed in the cell. Click the Key cell again to remove the checkmark and allow duplicate fields to be added to the target field.

5.7.7 Service Component Wizard The Service Component wizard enables you to model a service component and add static data and input ports to it. This may be useful if you are modeling an application and the services you need to use do not yet exist in the back-end system. In this way, you can model the application, and then later replace the service created by the wizard with the real back-end service when it exists.

More information: Creating a Service Using the Service Component Wizard

You display the Service Component wizard by choosing Tools Service Component Wizard or by dragging a Service Component icon from the Compose task panel to the Design

board and choosing Use Wizard from the context menu.

When creating a service component using the wizard, the following pages are displayed:

1. Define Service Name

2. Define Data

3. Define Input

4. Define Conditions

When using the wizard to create a service component, you can click Finish at any point to create the service component – you do not need to complete all the steps of the wizard.



After you create a service component (with or without the wizard), you cannot modify its data or definitions using the wizard. If you want to modify a service component, you need to manually modify its elements individually in the Design board.

5.7.7.1 Service Component Wizard: Define Service Name The Define Service Name step of the Service Component wizard enables you to define a name for the service component. If you opened the wizard from the Tools Service Component Wizard menu item, you can also specify the location in which to create the service component. Otherwise, the service component is automatically created in the same location as the currently active component.

The Define Service Name step contains the following items:

Item Description

Name The name of the new service component. The name can contain only alphanumeric characters and underscores, and cannot exceed 40 characters.

Repository

The repository type in which to create the service component. This option is enabled only if you opened the wizard from the Tools Service Component Wizard menu item.

The following options may be available, depending on your system configuration:

• Shared Repository: Stores the service component in a shared location where it can be accessed by other modelers. Models saved in this location are managed using basic source control features (check in and check out). When you create a model in the shared repository, it is automatically checked out to you that so you can start working on it. This option is available only if you do not have a source control system installed and configured for use with Visual Composer.

• <Other source control system>: Stores the service component in the selected source control system. This option is available only if you have a supported source control system installed and configured for Visual Composer.

• Local Repository: Stores the service component in a local repository with no source control. Models in the local repository can be accessed only by the user who created them.

Software component

The software component in which to store the service component. This option is enabled only if you opened the wizard from the Tools Service Component Wizard menu item.

Development component

The development component in which to store the service component. This option is enabled only if you opened the wizard from the Tools Service Component Wizard menu item.



Item Description

New

Creates a new development component in which to store the service component. The development component is created in the local repository, in the selected software component. This option is enabled only if you opened the wizard from the Tools Service Component Wizard menu item.


5.7.7.2 Service Component Wizard: Define Data The Define Data step of the Service Component wizard enables you to add static data to the service component. You can drag-and-drop or copy and paste data from a spreadsheet application. Each data selection that you add is added to a new Static Data connector.


The Define Data step contains the following items:

Item Description

Connectors Displays any Static Data connectors that you added using the Service Component wizard. Each time you add data to the Data pane, it is added to a new Static Data connector.

Delete Connector Deletes the selected Static Data connector.

Rename Connector Enables you to enter a new name for the selected Static Data connector.

Data Displays the data added to the selected Static Data connector. Drag-and-drop or copy and paste data to the Data pane to automatically add it to a new Static Data connector.

Paste from Clipboard

Pastes data from the Windows clipboard to the Data pane. Data fields must be separated by a tab character, and each record must be separated by a newline character.

Each data selection is added to a new static data connector. A blank row of data causes all data after the blank row to be added in a new static data connector.

Header row

Specifies whether the first row of the data you are adding is a header row.

This option is available for selection only before you add the first data selection. The choice you make automatically applies to all subsequent data selections you add to further Static Data connectors in this step of the wizard.



5.7.7.3 Service Component Wizard: Define Input The Define Input step of the Service Component wizard enables you to define input ports and their types for the service component. For each input port, you can also define its fields. You can then use these fields when defining the conditions that result in different output (in the next step of the wizard).


The Define Input step contains the following items:

Item Description

Input Ports

Enables you to define and modify input ports and their types for the service component.

Add Port Enables you to add an input port to the service component. You can add a port that contains either a Record or Record Set.

Delete Port Deletes the currently selected port.

Rename Port Enables you to enter a new name for the selected port.

Name Displays the name of the ports. By default, the ports are named in1, in2, and so on.

Type Displays the type of port, either Record or Record Set.

Fields

Enables you to define fields for the currently selected input port. You can use these fields when defining the conditions that specify when each Static Data connector is activated.

The options in the Fields area are the same as the options in the Define Data dialog box. More information: Define Data Dialog Box

5.7.7.4 Service Component Wizard: Define Conditions The Define Conditions step of the Service Component wizard enables you to define the guard conditions that specify when each of the Static Data connectors is activated.


The Define Conditions step contains the following items:

Item Description

Connector Displays the Static Data connector added for each data selection you added in the Define Data page of the Service Component wizard.

Guard Condition

Specifies the condition under which the selected Static Data connector is activated. You can enter a condition directly in the relevant row, or click fx to define a condition in the Dynamic Expression Editor dialog box.



5.8 Data Dialog Boxes The following dialog boxes enable you to define, manipulate, and test the data used in a model:

• Define Data Dialog Box

• Initialize Data Dialog Box

• Map Data Dialog Box

• Redefine Ports Dialog Box

• Test Data Service Dialog Box

5.8.1 Define Data Dialog Box You use the Define Data dialog box to choose the data service fields for an element, and specify their default values. For UI elements, the Define Data dialog box also enables you to choose the control to display for each field, or whether to hide the control (and thereby remove the field from the UI element).

You display the Define Data dialog box by right-clicking a view or connector element on the Design board or Layout board and choosing Define Data from the context menu.

The Define Data dialog box contains the following items:

Item Description

Add Field Opens a list from which you can choose the type of field to add.

Delete Field Removes the currently selected field from the list.

Rename Field

Renames the currently selected field.

Field names are case-insensitive and can contain only ASCII characters, digits, and underscores. They cannot contain spaces, cannot start with a digit, and must be unique within the same data structure level.

Find References

Searches the current component for any references to the selected field. Any references to the field are displayed in the Find Field References dialog box, so you can modify them as required.

More information: Finding References

Initialize Data

Opens the Initialize Data dialog box, in which you can define initialization values for each of the fields in the dataset. This option is available only when defining fields for clustered datasets and for connectors. More information: Initialize Data Dialog Box



Item Description

Select All

Creates controls for all fields in the list, based on the field type. This is equivalent to clicking the Add/Remove Controls column and adding a checkmark for each field.

You can change the control by clicking it to display a list of controls of the same type, and choosing a new control from the dropdown list.

Deselect All Hides controls for all fields in the list. This is equivalent to clicking the Add/Remove Controls column and removing the checkmark for each field.

(Add/Remove Controls)

Shows or hides the control in the UI element for the selected field. When the control is shown, a checkmark appears in this column and the control type is indicated in the Control column.

Field Name Displays the name of the field. You can change the name by clicking the Rename Field button.

Field Label Displays the field label value, if it is defined in the back-end system.

This column is displayed only when the Show field labels checkbox is selected.

Control

The control to be displayed for this field in the UI element. You can change the control by clicking it to display a list of controls of the same type, and choosing a new control from the dropdown list.

You can also choose Hide from the dropdown list to remove the control from the UI element (the field and its data still remain). This is equivalent to clicking the Add/Remove Controls column and removing the checkmark for the field.

Default Value Enables you to enter a default value for the field that is used at runtime. You can either enter a value in the field, or click the fx button to define a value using the Dynamic Expression Editor dialog box.

Show field labels Displays the Field Label column in the Define Data dialog box, as described above.



5.8.2 Initialize Data Dialog Box You use the Initialize Data dialog box to define initialization values for each of the fields in a dataset for a connector (such as Start Point, End Point, User Data, and Data Store.

You display the Initialize Data dialog box by clicking the Initialize Data button in the Define Data dialog box for a connector.

The Initialize Data dialog box contains the following items:

Item Description

Dataset tree

The dataset tree displays the record sets, records, nested fields, and fields of the dataset. Each node in the tree has an icon that indicates the node type. Each field has an icon that indicates the field type.

For each field in the dataset, you can define the value with which it should be initialized.

You can right-click a record set in the tree and choose Add Record to '<record set name>' to add a new record to the tree.

Reset Deletes all user-defined data from the Initialize Data dialog box, for example, any manually added records and any defined field values.

5.8.3 Map Data Dialog Box You use the Map Data dialog box to map the data fields from an input element to the fields of the data service. When working with a clustered dataset, you also map the nodes of the dataset. You map data fields to define which fields of the input data are the correct sources of data for the fields of the data service.

You display the Map Data dialog box by right-clicking a connecting line between an input element and the input port of a data service on the Design board and choosing Map Data from the context menu.

The Map Data dialog box contains the following items:

Item Description

Toolbar

Displayed only when mapping data in a clustered dataset.

The Map Data dialog box toolbar contains the following buttons:

• Unmap: Deletes the currently selected mapping. If you delete a parent node mapping, any relevant child node mappings are also deleted. If you delete a child node mapping, the parent node mappings are not deleted.

• Map All: Automatically maps all child nodes of the selected mapped node, if the names are the same. (If you map a child node, the parent nodes are mapped automatically.)



Item Description

Mapping area

Displayed only when mapping data in a clustered dataset.

The Source side of the mapping area displays the output node(s) of the input element, and the Target side displays the input node(s) of the selected data service.

You map the output node(s) of the input element to the input node(s) of the data service by dragging from the Source node(s) to the Target node(s). You can map multiple nodes in this way.

A mapping between nodes is indicated by a mapping line. The appearance of the mapping line changes according to whether the fields are mapped automatically or manually (a manual mapping has a diamond shape at the center of the line).

Target Field

Displays the list of fields for which the data service requires input. When working with a clustered dataset, the fields displayed depend on the mapping selected in the mapping area.

The field type (for example, string or date) is indicated by an icon next to the field name. More information: Define Data Dialog Box.

Assigned Value

Enables you to enter the values required by the data service as input. If the dataset is clustered, you can only enter values for nodes that you have mapped and selected in the mapping area.

You can enter values in one of the following ways:

• Assign a field value: Select a field from the dropdown list in the Assigned Value field of the relevant row. The dropdown list contains fields of the same type as the target field type, which are located in the element used for input to the data service.

• Define a dynamic expression: Select Define expression from the dropdown list in the Assigned Value field of the relevant row. Use the Dynamic Expression Editor dialog box to define an expression that returns a value of the same type as the target field type.

More information: Dynamic Expression Editor Dialog Box

• Enter free text: Type a value directly in the Assigned Value field of the relevant row.

5.8.4 Redefine Ports Dialog Box You use the Redefine Ports dialog box to choose the ports that you want to display on a data service or a nested component, so that you can connect to and from the ports when defining the data flow between elements. In addition, you can open the Redefine Ports dialog box at any time to change the ports that are displayed on the component. If new ports have been added to the component since you referenced it from your model, you can see them, and optionally select them, in the Redefine Ports dialog box.



If the component was created using Visual Composer, the latest port information is automatically retrieved from the cache of the latest checked-in version of the component and displayed in the Redefine Ports dialog box. If the component was created outside Visual Composer, the Redefine Ports dialog box automatically shows the ports from the component version in the cache.

You display the Redefine Ports dialog box by right-clicking a data service icon on the Design board and choosing Redefine Ports from the context menu. The Redefine Ports dialog box may also open automatically when you drag a data service, which contains a large number of ports, to the Design board.

You can define the number of ports required to open the Redefine Ports dialog box automatically in the Model group of the Options pane ( Tools Options ).

More information: Options Pane - Model Group

The Redefine Ports dialog box contains the following items:

Item Description

Select All Selects all the input and output ports in the list.

Deselect All Deselects all the input and output ports in the list.

Input Ports Lists the names of all ports used as input to the data service.

Output Ports Lists the names of all ports used as output from the data service.

Reimport

For components created outside of Visual Composer, copies the latest version of the component into the cache and displays the updated port information in the Redefine Ports dialog box. If you modify a component (outside of Visual Composer) and then want to see those changes reflected in models that use the modified component, you must use this option to reimport the component.

5.8.5 Test Data Service Dialog Box You use the Test Data Service dialog box to test the functionality of the selected data service. You enter values into the relevant field(s) for the input port(s) of the data service, and click Test to display the results retrieved from the data service.

You display the Test Data Service dialog box by right-clicking a data service icon on the Design board and choosing Test Data Service from the context menu.



The Test Data Service dialog box contains the following items:

Item Description

Port tree Hierarchical tree containing the input ports, record sets, and records of the data service. Each node type is identified by a different icon in the tree.

Field/Value area

List of fields in the record that is currently selected in the port tree. For each field, you can enter a value that is required by the data service to retrieve data.

Results area Displays the data retrieved from the data service using the specified input field values.

Test Sends the specified field values to the data service and retrieves the results from the data service.

Reset Deletes any entered field values together with any manually added records and any displayed results.

Add

Adds a new record to the record set selected in the port tree. You can then define values for the fields of the new record.

You can also add a new record by right-clicking a record set in the port tree and choosing Add item to <recordset name> from the context menu.

5.9 Expression Dialog Boxes The following dialog boxes enable you to create, locate, and modify dynamic expressions:

• Dynamic Expression Editor Dialog Box

• Find All Expressions Dialog Box

• Find Element References Dialog Box

• Find Field References Dialog Box

5.9.1 Dynamic Expression Editor Dialog Box You use the Dynamic Expression Editor dialog box to define dynamic field values used to define specific behavior in a property of a model element. More information: Defining Dynamic Expressions

You access the Dynamic Expression Editor dialog box by clicking the function (fx) icon displayed to the right of an attribute or property field that supports dynamic expressions, or choosing the Define expression option from a dropdown list (where available).



The Dynamic Expression Editor dialog box contains the following items:

Item Description

Expression pane

The area on the top left of the dialog box that enables you to construct dynamic expressions. You can write an expression as free text, or you can create it by dragging functions from the Function pane to the Expression pane. When you define a dynamic expression, prefix it with an equal (=) symbol. In certain cases, the equal (=) symbol is added automatically when you drag an item to the Expression pane.

Function pane

The area on the right of the dialog box that displays a list of functions you can use when writing a dynamic expression. A descriptive tooltip is provided for each function. In addition, the icon to the left of each function represents the data type returned when the function is evaluated.

Functions are grouped into the following categories:

• Data Fields, which contains all of the fields available from the data services in your model. This can be useful if, for example, you want a particular action type, such as a hyperlink, to represent a specific output in a query.

• Recently Used, which provides easy access to the functions you use often, up to a maximum of eight functions.

• All available functions, divided into the following categories: Text Functions, Numeric Functions, Date Functions, Time Functions, Quantity Functions, Conditional Functions, and Scientific Functions.

• Operators, which lists all the mathematical, logical, and comparison operators available for use in the expression.

Description field

The area below the Expression pane that enables you to add any text related to the current expression, such as a reminder or a note to other users. Click anywhere in the field to open a Description dialog box in which you can enter, view, or modify descriptive text.

Message pane

The area below the Description field that displays the validation results returned for the expression when you click the Check button. More information: Messages in the Dynamic Expression Editor Dialog Box

5.9.2 Find All Expressions Dialog Box You use the Find All Expressions dialog box to search for all expressions in a component. For example, expressions defined using the Dynamic Expression Editor dialog box, values entered in fields that can be edited using the Dynamic Expression Editor dialog box, references to fields and views (tables and forms) defined in the Define Action dialog box, conditions defined in an operator dialog box, and so on. After displaying the list of expressions, you can sort them, review them, modify them, look for errors, and locate them on the Design board and Layout board.

More information: Finding and Modifying References



You display the Find All Expressions dialog box by choosing Tools Find All Expressions .

The Find All Expressions dialog box contains the following items:

Item Description

Search result

Displays the name of the model in which the search was performed, and the number of expressions that were found in the search. For example, Found 35 references in Scenario10.

Refresh Searches through the open model for expressions and updates the list accordingly.

Element The name and icon of the element that contains the expression. You can click the element name to highlight it on the Design board or Layout board.

Property The name of the element property whose value is defined as an expression or reference.

Expression The expression or reference string.

Edit Expression

Opens the relevant editor (for example, the Define Action dialog box, the Define Filter dialog box, or the Dynamic Expression Editor dialog box), so you can modify the expression.

If you modify an expression in the Dynamic Expression Editor dialog box, the change is automatically reflected in the Find All Expressions dialog box. If you modify an expression in any other dialog box, the item is marked in gray. Click Refresh to update the Find All Expressions dialog box with the modified expression.

5.9.3 Find Element References Dialog Box You use the Find Element References dialog box to search for references to a table, form, or connector. For example, a form may be referenced in a dynamic expression or in an action. This enables you to see where an element is in use, before you decide whether to delete it.


You display the Find Element References dialog box by right-clicking a table, form, or connector icon on the Design board and choosing Find References from the context menu.

The Find Element References dialog box contains the following items:

Item Description

Search result

Displays the name of the element for which you are searching, and the number of references that were found. For example, Found 2 references to Sales_Order.

Refresh Searches through the open model for references to the selected view or connector and updates the list accordingly.



Item Description

Element The name and icon of the element that contains the reference. You can click the element name to highlight it on the Design board or Layout board.

Property The name of the element property whose value contains the reference.

Expression The reference string. The reference to the element is displayed in bold, for example, Customer_Data@address or =in2@origin=="add".

Edit Expression

Opens the relevant editor (for example, the Define Action dialog box, the Define Filter dialog box, or the Dynamic Expression Editor dialog box), so you can modify the reference.

If you modify a reference in the Dynamic Expression Editor dialog box, the change is automatically reflected in the Find Element References dialog box. If you modify a reference in any other dialog box, the item is marked in gray. Click Refresh to update the Find Element References dialog box with the modified reference.

5.9.4 Field References Dialog Box You use the Find Field References dialog box search for references to a specific field. This search is useful to perform before you rename or delete a field, so you can first check where it is being used. After you find the references, you can choose to rename the field and update selected references with the new name, replace the field name in selected references with a different field name, or delete the field together with selected references.


You display the Find Field References dialog box by selecting a field in the Define Data dialog box and clicking the Find References button. You can also display the Find Field References dialog box by clicking the Find References link in the message that is displayed when you edit or delete a field in the Define Data dialog box.

The Find Field References dialog box contains the following items:

Item Description

Search result

Displays the name of the field for which you are searching, and the number of references that were found. For example, Found 3 references to Address.

Select All Selects the checkbox next to each of the references in the Find Field References dialog box. You can then perform a rename, delete, or replace operation on the field in the selected references.

Deselect All Deselects the checkbox next to each of the references in the Find Field References dialog box.

Refresh Searches through the open model for references to the selected field and updates the list accordingly.



Item Description

Element The name and icon of the element that contains the reference. You can click the element name to highlight it on the Design board or Layout board.

Property The name of the element property whose value contains the reference.

Expression The reference string. The reference to the field is displayed in bold, for example, Customer_Data@address or =@name.

Edit Expression

Opens the relevant editor (for example, the Define Action dialog box, the Define Filter dialog box, or the Dynamic Expression Editor dialog box), so you can modify the reference.

If you modify a reference in the Dynamic Expression Editor dialog box, the change is automatically reflected in the Find Field References dialog box. If you modify a reference in any other dialog box, the item is marked in gray. Click Refresh to update the Find Field References dialog box with the modified reference.

Rename field

Enables you to rename the specified field and update selected references with the new name.

New name The name to which you want to rename the field.

Rename Renames the field with the specified name, and replaces the old field name with the new one in any references whose checkbox is selected.

Delete field Enables you to delete the specified field and delete the field name from selected references.

Delete Deletes the field with the specified name, and deletes the field name in any references whose checkbox is selected. Make sure that the expressions are still valid after deleting the field name.

Replace references

Enables you to replace the specified field with a different field in selected references.

Replace with

The field you want to use to replace the specified field. The fields in the dropdown list are those in the same dataset and of the same type as the current field.

Replace Replaces the specified field with the new field in any references whose checkbox is selected.

Visual Composer for SAP NetWeaver Composition Environment · Modeler's Guide and Reference Guide...

Documents

Transcript of Visual Composer for SAP NetWeaver Composition Environment · Modeler's Guide and Reference Guide...