Visual Composer s Control Types Applies to: Visual Composer for CE. For more information, visit the Portal and Collaboration homepage. Summary The document will discuss Control types and their properties Author: Offer Shostak Company: SAP Created on: 21 July 2009 Author Bio Offer is a developer working for Visual Composer development group 2009 SAP AG 1
Table of Contents Overview... 3 Input Controls... 4 1. Input Field Control... 4 2. Text Editor Control... 4 3. Combo Box Control... 5 Selection Controls... 6 1. Checkbox Control... 6 2. Toggle Button Control... 6 Layout Controls... 7 1. Melting Group... 7 2. Image Control... 7 Common Attributes for Controls... 9 Visible attribute... 9 Indent attribute... 9 Enabled attribute... 9 Tooltip Attribute... 9 Related Content... 10 Copyright... 11 2009 SAP AG 2
Overview Controls represent the elements of user interface, such as a button, an input field, or a combo box. Most controls are bound to data fields and are used for displaying or editing field values. Controls are always placed inside tables or forms, which arrange their layout and govern their behavior. The type of an interactor (form or table) dictates the types of controls that can be placed in it. 2009 SAP AG 3
Input Controls Input controls are used by the user to enter data. 1. Input Field Control The Input Field control is used to enter plain data. Line breaks in input fields are ignored. In addition to standard formatting, input field also provides support for password character masking. Input field actions are triggered upon value changes. The actions are not continuously triggered while the user is typing in the control, but only once the changes are committed, for example, by tabbing out of the control or by pressing Enter. 2. Text Editor Control The Text Editor control is a multi-line text editing control with support for line breaks, word wrapping, and scrolling. Can be used for writing descriptions and long text strings Supports addition of a tooltip Example: This example shows a tooltip that can be added to the Text Editor control. 2009 SAP AG 4
3. Combo Box Control The Combo Box control is a combination of the Dropdown List control and the Input Field control. Like the Dropdown List control, it consists of a dropdown list and a selection field. The list presents the possible values from which a user can select, and the selection field displays the current value. Unlike a simple dropdown control, the selection field is editable and can be used to enter values not available in the list. Unlike selection controls, the Combo Box values are not restricted by the enumeration and can be freely modified by the user. Also unlike selection controls, the Combo Box displays the enumeration items values rather than their display texts. Line breaks in the Combo Box values are ignored. Combo Box action triggering follows the same rules as described for Input Field. Example: This example shows a combo box based on a static entry list that contains 3 fields 2009 SAP AG 5
Selection Controls Selection controls enable the user to select a value from a predetermined set of possible values, which are defined using an enumeration. Selection controls are restricted and cannot contain values that are not predefined. 1. Checkbox Control The main purpose of the Check Box control { XE "CheckBox" }is a dual-state selection control used for setting of theboolean fields. Example: This example shows a checkbox that propose what to do today. When a box is checked, its value becomes True. 2. Toggle Button Control The purpose of the Toggle Button control { XE "CheckBox" }is a dual-state selection control used for setting of the Boolean fields. The Toggle Button control resembles the Check Box control in its behavior, but differs in its visual appearance. Also unlike selection controls, the Combo Box displays the enumeration items values rather than their display texts. The Toggle Button controls are usually associated with actions that are triggered when the toggle state is changed. Example: This example shows a Toggle button that, when pressed, initiates a process. 2009 SAP AG 6
Layout Controls 1. Melting Group This control can be used to group controls aiding in the layout. Example: 1. Create a form and, using the Define Data action, add to it two fields Date and String, call them Date and Status respectively. 2. Switch to the Layout view add a new Melting Group control to your form. 3. Choose Configure, and set its label to Reporting Date/Time. 4. Add a Date Picker control to the Melting Group and set its value to DATE. 5. Deploy. The result should look as follows: 2. Image Control Embedded images are images that are already known at design time and thus can be included directly within the document. In addition to embedded images, there are external images that are located outside of the document and are referenced by URLs. External image URLs can be specified using dynamic expressions, and thus can only be resolved and downloaded at runtime. To add an image from URL, we select the image and then enter the URL parameter in the Configure pane. This opens the Image Browser: 2009 SAP AG 7
We can assign multiple images per image control in order to change it dynamically at runtime according to specific condition. We can take for example a traffic light that contains several images one with red, yellow and green. Thus per condition the image will change. The Image control supports three scale modes: 1. Original size the image original size 2. Auto-fit can extend the image vertically and horizontally to fit 3. Proportional fit Keeps the image size proportionally when extended 2009 SAP AG 8
Common Attributes for Controls Visible attribute This attribute determines the visibility state of the control. It can be set to a simple true/false value or to a dynamic expression that is evaluated at runtime according to some logical expression. You set this attribute by clicking on the Configure pane button and selecting the control. Indent attribute All controls of Visual Composer enable a label part. When indent is set to false, the control starts from the most left margin of its parent, i.e. the label is not shown. When indent is set to true, the label is be shown and the input field itself is shown after the label. Enabled attribute This attribute determines whether the control can be used. It can be set to a simple true/false value or to a dynamic expression that is evaluated at runtime according to some logical expression. You set this attribute by clicking on the Configure pane button and selecting the control. Tooltip Attribute Displays a tooltip related to the control when the user hovers over it. It can be set as simple true/false value or as a dynamic expression that is evaluated on runtime according to some logical expression. You set this attribute by clicking on the configure pane button and selecting the control. 2009 SAP AG 9
Related Content Visual Composer Controls Overview Configuring Visual Composer Controls Visual Composer SDN page For more information, visit the Portal and Collaboration homepage. 2009 SAP AG 10
Copyright Copyright 2009 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, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation. IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iseries, pseries, xseries, zseries, eserver, z/vm, z/os, i5/os, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation. Linux is the registered trademark of Linus Torvalds in the U.S. and other countries. Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries. Oracle is a registered trademark of Oracle Corporation. UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group. Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc. HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C, World Wide Web Consortium, Massachusetts Institute of Technology. Java is a registered trademark of Sun Microsystems, Inc. JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape. SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, 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 other countries. Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects S.A. in the United States and in other countries. Business Objects is an SAP company. 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. 2009 SAP AG 11