Dell One Identity Manager 7.0. Web Designer Reference Guide

Transcription

1 Dell

2 2015 Dell Inc. ALL RIGHTS RESERVED. This guide contains proprietary information protected by copyright. The software described in this guide is furnished under a software license or nondisclosure agreement. This software may be used or copied only in accordance with the terms of the applicable agreement. No part of this guide may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying and recording for any purpose other than the purchaser s personal use without the written permission of Dell Software Inc. The information in this document is provided in connection with Dell Software products. No license, express or implied, by estoppel or otherwise, to any intellectual property right is granted by this document or in connection with the sale of Dell Software products. EXCEPT AS SET FORTH IN DELL SOFTWARE S TERMS AND CONDITIONS AS SPECIFIED IN THE LICENSE AGREEMENT FOR THIS PRODUCT, DELL SOFTWARE ASSUMES NO LIABILITY WHATSOEVER AND DISCLAIMS ANY EXPRESS, IMPLIED OR STATUTORY WARRANTY RELATING TO ITS PRODUCTS INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTY OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR NON-INFRINGEMENT. IN NO EVENT SHALL DELL BE LIABLE FOR ANY DIRECT, INDIRECT, CONSEQUENTIAL, PUNITIVE, SPECIAL OR INCIDENTAL DAMAGES (INCLUDING, WITHOUT LIMITATION, DAMAGES FOR LOSS OF PROFITS, BUSINESS INTERRUPTION OR LOSS OF INFORMATION) ARISING OUT OF THE USE OR INABILITY TO USE THIS DOCUMENT, EVEN IF DELL SOFTWARE HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. Dell Software makes no representations or warranties with respect to the accuracy or completeness of the contents of this document and reserves the right to make changes to specifications and product descriptions at any time without notice. Dell Software does not make any commitment to update the information contained in this document. If you have any questions regarding your potential use of this material, contact: Dell Software Inc. Attn: LEGAL Dept 5 Polaris Way Aliso Viejo, CA Refer to our web site ( for regional and international office information. Patents This product is protected by U.S. Patent # 8,639,827 and # 8,601,539. Additional patents pending. Trademarks Dell, the Dell logo, and Dell One Identity Manager, Dell Dell Active Roles, Dell One Identity Password Manager, and Dell One Identity Cloud Access Manager are trademarks of Dell Inc. and/or its affiliates. Microsoft, Outlook, Active Directory, SharePoint, SQL Server, Forefront, Internet Explorer, Visual Studio, Windows Server, Windows PowerShell, Windows Vista and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. SAP, SAP R/3, SAP NetWeaver Application Server, and BAPI are trademarks or registered trademarks of SAP AG (or an SAP affiliate company) in Germany and other countries. IBM, Lotus Notes and LotusScript are registered trademarks of International Business Machines Corporation. Linux is the registered trademark of Linus Torvalds in the U.S. and other countries. Oracle and Java are registered trademarks of Oracle and/or its affiliates. UNIX is a registered trademark of The Open Group. Mono, and SUSE are registered trademarks of Novell, Inc. Apache and Apache HTTP Server are trademarks of The Apache Software Foundation. Firefox is a registered trademark of the Mozilla Foundation. Safari is a registered trademark of Apple Inc. Chrome and Google are trademarks or registered trademarks of Google Inc., used with permission. Other trademarks and trade names may be used in this document to refer to either the entities claiming the marks and names or their products. Dell disclaims any proprietary interest in the marks and names of others. Legend CAUTION: A CAUTION icon indicates potential damage to hardware or loss of data if instructions are not followed. WARNING: A WARNING icon indicates a potential for property damage, personal injury, or death. IMPORTANT NOTE, NOTE, TIP, MOBILE, or VIDEO: An information icon indicates supporting information. One Identity Manager Updated - July 2015 Software Version - 7.0

3 Contents The Web Designer Editor 7 Before Starting 7 Web Designer Structures and Functions 7 Introduction 8 Installing or Selecting a Web Application 8 Start Page 10 Title Bar 11 Status Bar 11 Menu Bar 12 Toolbar 14 Navigation View 17 Definition Tree View 19 The Web Designer Object Model 19 Web Application 20 Web Project 20 Modules 21 Start Module 21 Session module 21 Menu Structure 21 Structure of Breadcrumb Navigation 22 Current User 22 Components 22 Form Types 22 Local Components 23 Controls 23 Functions 23 Layout Objects 23 Working with the Web Designer 23 Search and Replace in the Web Designer 24 Editing 25 Context Menu Functions 26 Working with the Preview 28 Viewing Generated Code 32 Bookmarks 33 Command List 34 Properties 35 3

4 Multilingual Captions 36 Object Properties 39 Change Labels for Web Projects 40 Web Project Configuration Options 42 Project Configuration - Web project 42 Parameter Type "Boolean Value" 44 Parameter Type "SQL filter condition" 44 Parameter Type "Selection from value list" 45 Parameter Type "Free text" 46 Parameter Type "Property list" 46 Parameter Type "Image" 47 Parameter Type "Configuration Object" 48 Parameter Type "Color value" 49 Parameter Type "Color dictionary" 49 Project Configuration - Customization 50 Project Configuration - Search Fields 51 Column-Dependent References 52 Using a Column-Dependent Reference 53 Defining a new Column-Dependent Reference 53 Dynamic References 54 Customizing the Web Portal 57 Creating a New Project 57 Creating a New Module 60 Adding New Components 65 Customizing Object Definitions 67 Creating Object Copies with the Wizard 68 Extensions 69 How Extensions Work 69 Creating New HyperViews 72 Adding New Nodes 73 Create Data Display 74 Displaying Single Objects 75 Grid Display for Collection Data 76 Generating Mapping Definitions 81 Embedding Reports 81 Linking to a Page 84 Basics of Web Designer Programming 85 Node Types 85 WebSQL Definitions 85 4

5 Loading Collections 85 Querying Data from a Collection 86 Filtering Data from a Collection 87 Functions 88 Collections 89 Database Objects as Collection 89 Working with a Database based Collection 90 Loading Database Object through Relations 91 Loading Database Objects from Multiple Tables 92 Using the Database Query Wizard 92 Loading a Historical Object State 94 Loading a Change History 94 View Definitions 95 Collections as Data Sources for Controls 95 Collection Events 95 Assigning Collections to Components 96 Declaring Configuration Keys in Modules and Components 97 Declaring Context Parameters 98 Executing Microsoft.NET Framework Code 99 Runtime API 99 Integrating Code in Object Definitions 100 Integrating C# code into a WebSQL Expression 100 Access to Environmental Data 101 Referencing Controls 101 Referencing Collections 102 Customizing Documentation 102 Compiling and Debugging 104 Compiling a Web Application 104 Compiling with the Database Compiler 104 Tasks 105 Working with a Web Application 107 Querying a Web Application 107 Monitoring 109 Status 109 Sessions 110 Assemblies 110 Log Files 111 Exceptions 111 Frequent Tasks in the Web Portal 111 5

6 Editing Captions 111 Adding Functions 112 Pasting in Texts or Captions 113 Pasting in Grids 114 Presets for Grouping Grids 115 Visualizing Exceptions in the Web Portal 115 Replacing Images from Resource Files 116 About Dell Software 119 Contacting Dell Software 119 Technical support resources 119 6

7 The Web Designer Editor The Web Designer is a development environment for One Identity Manager web applications. The resulting web application is based on the ASP.NET. However, the Web Designer uses a simplified development model with whose help you can develop a robust web application without any prior knowledge in Microsoft.NET Framework. Before Starting The development module use by the Web Designer forms the basis of the web project. A web project represents the later web application and is made up of reusable modules and components amongst others. The installation already contains numerous default modules and components as well as a default web project that uses them. You can configure and extend the default web project to create your own web application. You can also add a new web project where you can reuse default modules and components. The Web Designer development environment contains an editor with which you can program your web application. In addition, the Web Designer has a compiler to compile your web project. This is a prerequisite so that the web project can run as a web application. You can debug a running web project with help of the integrated debugger in the Web Designer. Detailed information about this topic The Web Designer Object Model Customizing the Web Portal Web Designer Structures and Functions Compiling and Debugging Web Designer Structures and Functions In this section, we will discuss the Web Designer's interface and its functions. Each element and its functions are described in detail in the following chapters. 7

8 Introduction To start the Web Designer 1. Start WebDesigner.exe in you directory. 2. Select the connection of your choice. Click - OR - Add new connection to create a new connection. 3. Select the authentication module for database connection from the menu Login as Enter your full user name in User. 5. Enter your personal password in Password. 6. Click Log in. Installing or Selecting a Web Application NOTE: Certain specific Web Designer functions, such as the preview or debugging, can only work if a web project is installed. An important prerequisite for ensuring that the web application will work, is a functioning WCF connection. To set up a web application 1. Open the Web Designer. 2. Select a database connection in the menu. - OR - Set up a new connection. 3. Select an authentication method from the menu if required. 4. Enter a user and password, if required. 5. Click Log in. The Web Designer start page is opened. Select one of the following options: Install a new web application Select a web application To install a new web application 1. Select Web applications Install new web applications on the left of the start page. This displays the window User account control with the question whether you want to install WebDesignerInstaller.exe. 2. Click Yes to install the file. This opens the One Identity ManagerWeb Installer window. 3. Select a database connection. 8

9 4. Click Next. 5. Select an install destination by entering an application name in the text box. 6. Click Next. The installation is executed. 7. Click Next. 8. Select the application you entered in Change in. 9. Click Next. 10. Click Finish after successful installation to close the wizard. NOTE: After you have created a new web application, important settings must be made in the database. You can configure the settings in the Web Designer. The exact procedure is explained in To edit web application settings. You can also configure the setting in the Web Designer Configuration Editor. For more information about about these settings, see the Dell One Identity Manager Installation Guide. To select a web application 1. Select Web applications Select web application. This displays a list of existing web applications. 2. Select the web application of your choice from the list. The selected web application is loaded and display under Manage your web portal environment on the start page. To edit web application settings NOTE: A web application must be selected. 1. Click Edit web application settings. This opens the dialog box Edit web application settings. NOTE: The text box URL shows you the address where the web application can be found. This value cannot be edited and serves as a key for the matching set in the database. 2. Select in Web project the web project to be shown in your web application. WARNING: The project you selected in "Web project" must be stored in the database. Otherwise, you cannot select it. Ensure that you have saved the web project. The selected web shown in the menu. 3. Select the module the web application user will use for authentication in future in Authentication module. 4. Select a module in Try single sign-on, use the following module if single sign-on fails:. NOTE:If the module selected under Authentication module supports Single sign-on, you have the option to enter alternative authentication method. This is used as a fall-back if single sign-on fails for any reason. For more information about authentication modules, see the Dell One Identity Manager Installation Guide. 9

10 5. Click the Debugging check box if you want to enable debugging. You can use debugging. NOTE: Before you compile the web project for release, it is recommended you test your web project with these settings. NOTE: If you use OAuth-Authentication, you can enter the this ID in the text box provided. This automatically identifies the web application. Start Page You can control the Web Designer graphical user interface with a mouse and key combinations. A minimum screen resolution of 1280 x 1024 pixels is recommended with at least 16 bit color in order to optimize the user interface graphics. A display size of at least 9.7 inches is recommended for mobile displays, for example, when using a tablet. NOTE: You can customize the Web Designer's default layout, as in the other Manager tools, by moving, closing or hiding to suit your requirements. You can set the hide mode with the Auto Hide button. After you have logged in, you are presented with an empty start page. This contains a title bar, status bar, menu bar, toolbar and various working areas. NOTE: In the middle area of the start page, you can see various information about the status and functionality of the currently selected web project and for other web projects. For more information, see Web Project on page 20. Also about the current state of the preview in the form of a prompt. The following list of working areas contains references to the corresponding sections in the guide with detailed information: 1. Web application Install new web applications Select web application For more information, see:. Installing or Selecting a Web Application 2. Configuration Web project Customizations Search fields Column-dependent references Object reference For more information, see: Web Project Configuration Options 3. Edit Add new Edit texts 10

11 For more information, see: Customizing the Web Portal Figure 1: The Web Designer Start Page To reopen a closed start page Select Start page in the View menu. The Start page tab is displayed as an empty page with the usual selection options and settings. Title Bar In the title bar you can see the program icon, program name and connected database in the following notation: Web Designer - <user>@<database server>\<database (description)> -...project Status Bar The status bar shows the linked database in the following notation: 11

12 <server>\<database (description)> and the connected user or system user. When Web Designer launches a database activity (such as loading or saving a database object) the status icon is activated in the left corner of the status bar. A gray icon means no activity. Menu Bar You can use the menus in the menu bar to call up submenus and quickly reach many of the Web Designer's functions and execute them. The menus are described in more detail in the following table. Excluding the Edit menu. This menu is explained in detail in Editing on page 25. Figure 2: Menu Bar Table 1: Menu Items in the "Connection" Menu Menu Item Settings... Exit Description Use the Settings... item to open the Global Settings dialog box. Here you can change Web Designer settings or reset your setting to the default set. Click Apply to save the changes. Use this menu item to close the Web Designer. Table 2: Menu Items in the "View" Menu Menu Item Windows... Description Use this item to open the Windows... dialog box. This provides you with an overview of windows open in the Web Designer. To get an overview of open tabs 1. Select Window from the View menu in the menu bar. This opens the dialog box Windows... with a list of open tabs. 2. Mark the tab in the list you want to edit and click Activate. This selects the tab on the start page. - OR - 3. Mark the tab in the list you want to save and click Save. This saves the marked tab. - OR - 4. Mark the tab in the list you want to close and click Close tab(s). TIP: You can use multi-select by selecting items in the list whilst holding the CTRL key. 5. Click OK to close the dialog box. Restore default layout Use this item to restore the default layout. 12

13 Menu Item Restore default layout (size inclusive) Restore saved layout Save layout home page Object state Node editor Tasks Command list Bookmarks Description This item has the same function as the Restore default layout item described above. The size of the window is also adjusted. Use this item to restore the layout that you have previously modified and saved. Use this item to save the Web Designer layout after you have modified it. If you have closed the start page once, you can open it again by using this item. For more information, see Start Page on page 10. Use this item to open the Object state view. This view is displayed on a tab in the same area as the preview. The database objects are listed with information about their database state and local state. You can mark database objects in this view and refresh them. Or mark all modified files to be refreshed. You can update the database object list with another button. Use this item to open the Node editor view. This is open by default and is displayed in the lower area of the Web Designer. You can view entries such as error messages and warning in Tasks, which is in the lower area of the Web Designer. For more details about messages, click on the entry, You can use this menu item to reopen the view. This view is also open by default. The view Command list, is also open in the lower area of the Web Designer. Here you can undo actions not yet saved in the web project or redo them. Open this view with this menu item. Use the Bookmarks menu item to open the view of the same name. This is displayed in the lower area of the Web Designer. All bookmarks are listed in this view and you can edit them. The following actions are available: Delete all bookmarks Edit description Delete current bookmark Group by module/component Show bookmarks for current web project only Navigation Use the Navigation menu item to open the navigation view. You can also reach the navigation view through the Navigation category on the left sidebar of the program. You will probably use open the navigation view from the menu, left sidebar is not visible. This can happen, if you have previously closed the navigation view. For more information, see Navigation View on page 17. Table 3: Menu Items in the "Debug view" Menu Menu Item Monitor page Preview Description This opens the monitor page. It is opened as a tab in the same area as the preview. For more information, see Monitoring on page 109. This opens the preview. The view is open by default. For more information, see Working with the Preview on page

14 Menu Item Properties query Call stack Compiling Compiled objects Description The Properties view is displayed in the lower area of the Web Designer. The view is open by default. You can use this menu item to reopen the view. For more information, see Properties on page 35. This view is display in the same way as the previous view in the lower area of the Web Designer. The view is open by default. You can use the menu item Query to reopen the view. For more information, see Querying a Web Application on page 107. You can use the menu item Call stack to open the Call stack view. The view is not open by default. This view is also opened in the lower area of the Web Designer. Use the menu item Compilation to open the Compilation view. This view is opened in the lower area of the Web Designer. You can view the compilation log here. The view is open by default. This view is also opened in the bottom area of the Web Designer. Use the menu item Compiled objects to open the view. All compiled objects are listed in with more details. Table 4: Menu Items in the "Help" Menu Menu Item Info Description Use this item to open a dialog box with several tags, which contains detailed information about the Web Designer, like version number, third party contributions, installed modules and such like. Toolbar The Web Designer has a toolbar. This toolbar cannot be configured. Figure 3: Toolbar Table 5: Toolbar Functions Icon Change Label: Description You can select a change label in the menu. Changes in the Identity Manager database are stored under the change labels that are selected here. Change label administration This function opens the standard dialog for inserting, editing, or deleting change labels. For more information about working with target system types, see "Setting Up Target System Types" in the configuration. 14

15 Icon Description Uses the current change label as default and selects it automatically later. This function sets the currently selected change label as a default label that will be selected automatically when Web Designer is restarted. The selection is client-specific and has no impact on other Identity Manager database users. Applies a change label to the entire web project. Use this button to open a dialog box for assigning a special change label to all referenced object of a web project. Some web projects can be moved completely and independently of previously selected assignments. Configure project Use this button, you can configure your web project. This function is also available in the definition tree view and on the start page. However, you must have previously selected a database object, like, a component or a module. The difference being that, if you configure your project here, you can make global changes affecting the entire web project. The following options are available: Web project Customizations Search fields Column-dependent references Object reference For more information, see Web Project Configuration Options on page 42. Captions Use this button to open the Multilingual Captions dialog box. You can add, delete and edit captions here. 15

16 Icon Description Control text Use this button to open the Control texts... dialog box. You can add and save or delete custom text for controls in the Web Designer for all languages stored in the Language menu. To add custom text for a control 1. Click the Control texts... button in the Web Designer toolbar. Opens the Control text dialog box. 2. Select the key for the control in the Key column enter part or all of the key name in Enter search text. The control text translation is displayed under Text: in the Edit area, if it exists. 3. Select the language you want use for the translation from the Language menu. 4. Enter your text in Customized text:. Once you have entered the text, the Save button is enabled. To enter text for the key in other languages, select the previous step. 5. Click OK. NOTE: You delete customized text in the same way as you added it. After selecting the key you want, click Delete custom value. Editing Hyperviews Use this button to edit the HyperView Wizard dialog box. You can also create HyperViews or import existing ones. For more information,, see Creating New HyperViews on page 72. Suppress background actions Use this button to start and stop actions running in background. These actions are defined through nodes of type Timer. This results in the web application executing these actions are regular intervals. The behavior may be disturbing when debugging. Save This button is enabled if you have modified a database object. Use this button to save changes to the current database object. If you want to save changes to other database objects, you must select the corresponding tab in the definition tree view and press the button again. Save all Use this button to save changes to all database object at the same time. One node back/forward Use this button to navigate back or forwards in the history of the selected object. This displays the selected object in the definition tree view. If an object or node was delete, the next existing object is shown. If an object is selected in the history which no longer exists, the previous object is shown. The number of objects displayed in the history can be specified in the settings in the menu bar under Connection Global settings. You can delete the history using Delete history in the context menu. 16

17 Navigation View The navigation view is on the left edge of the default view and is divided into the follow categories, after which database objects are named: Modules Components Web projects Project files Form types Layout definitions Test scripts NOTE: The navigation view is hidden at all times, if you are not using it. This feature is designed to provide ease of use. To show and hide the navigation view. 1. Click or mouse over the Navigation control in the left sidebar. - OR - 2. Select in the Navigation from the View menu in the menu bar. NOTE: Use Auto Hide in the navigation toolbar to fix the navigation view. NOTE: If the Navigation control is not visible on the sidebar as described, you can only make it visible from the View menu. Alternatively, you can select Restore default layout or Restore saved layout instead of Navigation. This opens the navigation view. 3. Click or mouse over outside the navigation view to close it again. Now, only the Navigation control is visible in the program's sidebar. Select the database objects you want to edit with the Web Designer in navigation view. The various categories have different functions, which you see depending on what you selected. Database objects are displayed in a tree view in the Modules category. There are two root nodes in this view. Defined database objects are grouped under each root node. These objects cannot be edited in a One Identity Manager custom installation. You have the option to copy these objects and extensions. Each second root node has the prefix custom. All custom objects are grouped under this. This root node is displayed in the navigation view through the root node containing database objects, which belong to the default installation of the Web Designer. The Components and Layout definitions categories group other different database objects in the navigation view. The objects are not grouped within root nodes but form one group of objects. Each group of objects can contain custom as well as default objects. These objects can only be copied and not edited. You can also group database objects for using the options Search results and Recent files. How to search in the navigation view, is explained at the end of this chapter. Modules, that are added to a custom installation are automatically groups under these root nodes. 17

18 Extensions are displayed as subnodes for the module or component for which they were created. You will also see these subnodes under groups, search results and recent files. For more information, see Extensions on page 69. Figure 4: Navigation View Toolbar Table 6: Toolbar functions in the navigation view Icon Description To execute a function 1. Mark either a module, component, project file, form type, layout definition or test script in the category you want. NOTE: You cannot add a web project through this context sensitive submenu. You can also add new modules using the corresponding wizards. Other functions including Add.. are available in the context sensitive submenu depending on your choice. 2. Click the arrow next to Add Select the function you want from the submenu. You can execute the following functions in the Project files category. Add project files Import files Export files Add help archive To delete a database object 1. Select the database object of your choice in the navigation view. 2. Click Delete This deletes the selected object after confirming the security prompt from the database. NOTE: The Delete button is only enabled of you have selected a database object. NOTE: The delete process cannot be undone. To load new database objects Click the database objects in the appropriate category to refresh the database. 18

19 Icon Description To view database object properties Mark the database object in the navigation view and click Properties. This display the database object properties. To search in the navigation view 1. Select in the category in which you want to search for the object in the navigation view. This displays the selected category in the navigation view. 2. Enter the search term in the box and click RETURN. The search results are listed under the text box. Definition Tree View Each web project has a dedicated node hierarchy. This hierarchy or tree is edited and its nodes configured using the Web Designer GUI. Web projects, modules and components obtain a minimum number of node in the object definition when added. All other nodes are inserted through the context menu. While a specific web application is in use, the user is always located at a defined position in the definition tree view. The definition tree view provides the user with the following views or dialog boxes, which can be opened using the buttons in the view's menu bar. Object definition: This view is mainly used to view existing database object nodes. This view is preset when you switch to the definition tree view. If the database object comes from the Web Designer default installation, the view is called Object definition (read-only). For more information, see Customizing Object Definitions on page 67. Configuration: For more information, see Web Project Configuration Options on page 42. Generated Code: For more information, see Viewing Generated Code on page 32. Settings...: For more information, see Project Configuration - Web project on page 42. Show item help: Use this button to open the help for the selected node. You will find more information in the dialog box. Search and replace: For more information, see Search and Replace in the Web Designer on page 24. Copy object: For more information, see Customizing Object Definitions on page 67. The Web Designer Object Model The Web Designer is used to configure and expand a Web Portal. It integrates an extensive GUI in which the web application functions can be clicked together. In the Web Designer, database objects, such as modules, components, styles and others, are saved as XML files in the database. They are displayed graphically in a hierarchy in the Web Designer view. Nodes in the hierarchy are labeled with icons to provide a better overview and to distinguish between them more easily. 19

20 For more information, see the Dell One Identity Manager Web Designer Object Model Documentation. Web Application A web application is a published and live website on a web server, which interacts with the Manager database. This functions, such as editing or saving employees or request data are available. Each web application has a dedicated intranet or internet address. Web Project You can define several web projects in the database and one resulting web application. The web projects VI_ StandardWeb and VI_RegistrationWeb are already in the database and are part of the business workflow. Normally, only one web project is in the web application. A special case represent represents the link between the web projects VI_StandardWeb and VI_RegistrationWeb named above. VI_ RegistrationWeb becomes a subproject of VI_StandardWeb and is published separately. Modules with and without parameters are linked in the web project. To assign a web project to a web application that is on the web server, use the web application configuration file (see Web Portal Installation Guide). There is a series of specific data to maintain in the definition tree view for each web project (for more information, see Definition Tree View on page 19). NOTE: New web projects cannot be added using the navigation menu bar. Such projects are created through the Create new project wizard. For more information, see Creating a New Project on page 57. To select a web project Double-click the web project of your choice in Web Projects in the navigation view. Subprojects The selected database object is displayed as a tab in the definition tree view. You can also select another web project as additional web project. You can update or compile this project on the start page in the same way as the web project VI_StandardWeb. To select an additional web project NOTE: Your web project must already be selected and open in the definition tree window. 1. Open the node Display settings in the Object definition view. This displays subnodes. 2. Mark the subnode Subprojects1 and select Web project from the context menu. This jumps to the Configuration view in the definition tree view and marks the node Web project. 3. Select the subproject you want in Identifier* in the Node editor. This selects the subproject of your choice. 20

21 Modules A module can be accessed as a logical closed unit within a web project. A module, therefore, can only contain one website with a short welcome text (as in the start page) but can also map a comprehensive workflow, which stretches over several web pages (such as, requesting products). Modules contain at least one form or main page respectively. They can contain components, which are required for defining nodes visible in the browser. This allow the contents of a form to be rendered in a start up module or on the browser's start page if the user see the start page. The size of the module or number of modules is not limited. The option Allow direct navigation to this module with an URL parameter allows you to navigate directly to a specific module. For example, with help of defined passing parameters, you can navigate directly to the overview page of a particular database object or a approve a request. Quick navigation can, for example, be used for opening a link in an . NOTE: A good and structured mapping of a web application's target functionality in modules, makes any eventual debugging and later implementation of other function more easy. Start Module The start module for a web project is a special module. It can configured and is called VI_Start. It specifies which main content page is displayed first. Each module can have a start module, assuming the check box Allow quick navigation to this module with a URL parameter is set. You cannot pass any parameters. Session module The session module is a special module. Exactly one session module is used in each web project. It can be used by several web projects. The lifetime of a module is a deciding factor. As long as the session is valid on the web server, you can always access the session module data. This module contains data about the current user and other session related data. A session module is initially loaded at the start of a session and retains its data during the entire lifetime of the session. A session module must contain information about the current user. To do this, a session module must contain: Collections with the name User UserRuntimeModule UserMenu You can define your own user groups for the web application, for example, by assigning an employee to an organization. These current users assignments are determined once in the session module after logging into the web application and are available for the period of the session thereafter, to hide or show menu items or parts of forms. Menu Structure The collection UserMenu contains data about the user's enabled menu items. Data in this collection may not be changed because changes can be overwritten on recalculation. 21

22 Structure of Breadcrumb Navigation The collection UseNavigation contains information about the user's navigation breadcrumb trail. Each entry corresponds to a generated form object. The following collection properties are available: UID_RuntimeForm: Use this property to enter the primary key. UID_RuntimeContext: References the entry in the collection <UserRuntimeModule> containing the associated module entry. UID_RuntimeFormPrevious: References the entry in the collection <UserNavigation> corresponding to the previous form. This information is used for building up the breadcrumb trail. Title: Provides the form title. CanReturnToThis: Provides the Boolean value specifying whether this form can be opened or not. SkipInNavigation: Boolean value specifying whether the breadcrumb trail should be skipped. Number: Specifies the sequential number of this form in the breadcrumb trail. FormID: The property specifies the form identifier. Current User The collection User contains the database of type Person that corresponds to the current user. Components A component is a part of a module, which has been separated out. The module references these component using cross-references. It can be use by several modules and components and rendered multiple times in a browser, simultaneously. Instances arise from components that are used more than once. To differentiate various instances from each one another, each instance is given an automatically generated suffix at runtime. All nodes of this instance have the same suffix. Apart from that, components are part of the definition tree and keep it free from redundancies. This property reduces the effort of programming and ensure a uniform appearance as well as homogeneous functionality of the web application. Another feature is the different component type. The position of the component in the definition tree determines, which component type can be referenced. Form Types A form type specifies the structure of HTML pages, which are rendered in the browser. You define the available form parts and their positions in the HTML tree. Form types are found in the navigation view and form definitions as DialogAEDS objects in the database. The default version supplies four different VI_Objects as templates. To edit a form type, you must make a copy of the object. For more information, see Creating Object Copies with the Wizard on page 68. Each form type is made up of the form parts Title and Main and other output nodes. Use the context menu to add custom parts 22

23 of form and nodes in the definition tree edit window. You can edit the added elements in the Node editor. You can also add talking selectors. Form types are often differentiated by mobile and desktop view. Local Components A local component is a node in the XML tree of a module and a component. It provides a better overview for programming and can be referenced in other modules and components. Controls The same applies to a control as to a local component. They are defined within a module and are only found there. Hence, a reference to a control can only be set in the module in which the control was defined. A benefit of controls is simple referencing. Functions A function provides a better overview and is suited to checked readability. That ensures increased quality. Function are available in the respective module or component. NOTE: Function defined in a session module are an exception. These functions can be implemented everywhere. Layout Objects Layout objects are layout definitions and describe the appearance of display nodes (nodes of type View) which are rendered in the browser. There is at least one layout variation defined for each display node where possible. Layouts with the ending default are used by the associated node type without having to be entered on individual nodes. Each object in the layout definition list corresponds to a CSS class and is linked ot a node type. This layout definition is therefore available for each node of a particular node type. You can set up more new layout definitions in this list. A wizard is available to you to customize a default layout definition. For more information, see Project Configuration - Customization on page 50. For a better overview, layout definitions are divided into type and group in the navigation view. Working with the Web Designer In the following, you will be shown in detail, how to work with the Web Designer. 23

24 Search and Replace in the Web Designer To run a search 1. Select the menu item Edit Search in the menu bar. NOTE: You will also find the search in the definition tree view. This opens a dialog box with search options. 2. Enter a search term in Search. 3. Select the item of choice in the menu Search as to refine the search. 4. Enter the item of choice in Replace by. 5. Select the item of choice in the menu, Search scope. You will find the following items: a. Current document b. Current document and its extensions c. Current web project d. Below the selected object e. All Web Designer objects 6. Enable your preferred criteria under Search options as required: - Case sensitive - Whole word - Match entire word. 7. Enable the check box Filter by type under Search options, if required, and select your preferred options. TIP: Select node types, to filter the search by the selected node types. 8. Click Search or Search all. The search results are displayed. 9. Double-click a result in the result list. This marks and displays the corresponding nodes in the definition tree view. - OR - Mark the result in the result list you want to replace. 10. Click Replace or Replace all. 24

25 Figure 5: Dialog box "Replace" Editing Table 7: Functions of the "Edit" Menu Menu Item Refresh preview Publish function Use this menu item up update the preview Opens a submenu with other options. The following options are available: Debug Release The web applications for the current web project are listed and published for either debugging or release. 25

26 Menu Item Configure project function Opens a submenu with other configuration functions. The following options are available: Web project Customizations Search fields Column-dependent references Object reference Copy objects Create new module Create new project search Search next Captions Control text Import object Related applications Check model integrity Check accessibility Opens the Copy objects dialog box. The wizard creates the copies. For more information, see the chapter Creating Object Copies with the Wizard on page 68. Opens the Create new module dialog box. The wizard creates the new module. For more information, see Creating a New Module on page 60. The wizard create a new project. For more information, see Creating a New Project on page 57. Opens a search dialog box with different search options to set. For more information, see Search and Replace in the Web Designer on page 24. Continues searching with the search parameters given in the dialog box. The search continues without reopening the dialog box. Use F3 to continue searching. Opens the Create new module dialog box. You can insert, delete and edit captions here. For more information, see Multilingual Captions on page 36. Opens the Control text dialog box. Here you can edit existing keys by adding your own text to describe the key. You can also add new key in any language. There is a menu available to select another language. Use this function to import module and components into the Web Designer. to using the standard Windows file import dialog. The function recognizes alone whether complete modules or components are being dealt with and imports them as such. In all other cases the selected file is loaded as a project file. Opens the Related applications dialog box. This function can insert, delete and edit external applications, which are shown Web Portal of the in the menu bar under Applications. For any application you have to define a clear name, the display name, the description, the basis URL, the parent application (for a direct entry in subforms of one main application) and a picture (optional). This function check references, function calls and other details of the current web project. Any errors found do not result in compiler errors but should be corrected for the sake of the web applications s stability. This function checks the web project to ensure rules meet current standards for web application accessibility. A rule violation example is, when no alternative text is given for missing visuals. If there is inconsistency with this function, a detailed warning is shown. Violations of accessibility rules do not engender compilation errors. Context Menu Functions To call up the context menu, right-click any node. The content of the menus depends heavily on the type of the node clicked ("context sensitive"). The top section of the context menu contains the node types and all 26

27 available wizards that can be inserted into the currently selected node type. The following wizards are available: Insert bundling node Eases the task of structuring nodes hierarchically later on. A container node is generated above the currently selected node and the currently marked node is pasted into the new container. Create data display This wizard creates forms, form elements, or grid views from available data. You will find this wizard on a node of type container, for example. For more information, see Create Data Display on page 74. Embed Report Generates views from previously generated reports that are stored in the database. This wizard is available on action nodes For more information, see Embedding Reports on page 81. If a defined number of node types is exceeded, the nodes will be re-bundled beforehand. Some node types do not allow pasting of additional node types. In such cases, the context menu begins with the Cut function. All other functions are either available or grayed out, depending on the type of node and its position in the definition tree view. Table 8: Functions in the Context Menu function Cut Copy Paste Delete Set breakpoint Set bookmark Export Import Move up and Move down Undo and Redo Description This function is available insofar as the node in question was not added automatically to the definition tree. All nodes that are subordinate to the selected node are likewise cut. This function is always available. All subordinated nodes are likewise copied. This function is available if the clipboard contains a node that is also in the list of nodes that can be inserted in the currently selected node. This function is available insofar as the node in question was not added automatically to the definition tree. All nodes that are subordinate to the selected node are likewise deleted. You can multi-select nodes with the CTRL key to apply the function just once to all selected nodes. This function is available for controls and action nodes. Use this function in debugger mode to halt rendering at the selected points. You can multi-select nodes with the CTRL key to apply the function just once to all selected nodes. This function opens a dialog box, in which to add a description of the bookmark. The object is then labeled with a bookmark in the definition tree view. For more information, see the chapter Bookmarks on page 33. This function opens the Save as dialog box. In this process, the xml definition of the selected node and all of its subordinate nodes are saved along with the file. This function opens the File selection dialog box. where a previously exported definition tree structure can be selected. If the structure that is to be imported is compatible with the selected node, the structure will be inserted below the selected node. This functions shift the position of the selected node within its branch. These functions are available if the node in question was not inserted automatically and if the current position of the selected node allows for the realization of the relevant action. This functions are available if the relevant actions were carried out. The Undo function undoes the previous action, whereas the Redo function restores the state that existed prior to the realization of the Undo action. 27

28 function Search object references search Search next Description Search all references, which reference the current object. If the search is successful, the object references are displayed with position, module and object type. This function opens a dialog in which various search parameters can be entered (CTRL + F). For more information, see Search and Replace in the Web Designer on page 24. This function continues the current search using the current search parameters and in so doing marks the next relevant node. The search can also be carried out without opening the Search dialog box. Working with the Preview The preview window shows how a specific web application will look and respond in the browser. This means that the preview window can be used to test out the entire functionality of all buttons, links and so on. The displayed view is rendered using Internet Explorer, which is installed in the current client. NOTE: Other browsers or other versions of the same browser may generate views that differ from the preview. Therefore, it is advisable to perform an extensive layout test of the web application with the previously predefined browser versions. 28

29 Figure 6: Preview in the Web Designer The preview function also writes data to the database or deletes database objects if this function is activated by the user. Hence caution should be exercised when testing this function. The preview window integrates a toolbar of its own, most of whose functions are used to manage debugging mode. These icons are listed in a separate table in this chapter. When the debugger is activated, program functions are realized step by step rather than dynamically, thus enabling you to see which program step is actually being realized and the results yielded by the step. In addition, with the debugger activated, you can navigate at will to the query or data schema window. The toolbar is explained in the following tables. NOTE: A WCF connection must be created for functions which support debug mode. 29

30 Table 9: Function Supporting Debug Mode in the Preview Icon Function Updating the preview. The Web Portal start page is displayed on update. This button has varying displays. The following visuals are possible: If the button is displayed in combination with the start icon, modifications made to the web project in the definition tree view have not been compiled. After you click the button, the modifications are compiled and displayed in the preview. The button is combined with a question mark if it is unsure whether modifications have been made to the web project. You can use the arrow next to this button to select other menu items. The following menu items are available: Create new predefined connections: You can add any amount of login data for different users. Predefined login data is listed under this menu item. If you are one of the users in this list, you can login simple by mouse click. You save yourself the work of entering your login name and password on the start page of the preview window. Predefined connections are deleted the moment you close the Web Designer. Copy to clipboard: If you select this menu item, you copy the link to your web project start page that you see in the preview. The browsers you use on your computer are automatically inserted into the menu as extra menu items. The preview is displayed with the browser you choose. Suppress action Use this button to prevent executing actions in the preview. This can be helpful if you want to view a certain node in the definition tree view in more detail. To display a node in the definition tree view, select Show definition object in the Properties window. This highlights the select node in the Properties window in blue. One node back / One node forward Use the Forward and Back buttons to navigate backward or forward through the sequence of objects selected in the Web Portal. However, a historical view is not shown here. Enable debugger This field allows you to toggle the debugger on and off. If the button is blue highlighted, the debugger is enabled. All actions are executed in succession (for example one node at a time) when the debugger is deactivated. If the debugger status is deactivated in Paused state, click the Resume execution button to resume debugging. Single step The Single step button is only activated when the debugger is activated. If single step mode is set (you can see this if it is highlighted in blue), execution of the action is suspended at each step in the definition tree view. If single step mode is deactivated, the action continues on to the next break point (break points are inserted in the definition tree at action nodes above the context menu). 30

31 Icon Function Resume execution This button is activated with the debugger deactivated insofar as any program steps remain to be carried out, for example no user entries are anticipated. Clicking this button launches realization of the next program step. Table 10: Functions of the Toolbar in the Preview Icon Function One node back / One node forward Use the Forward and Back buttons to navigate backward or forward through the sequence of objects selected in the Web Portal. However, a historical view is not shown here. Demo mode The preview window switches to full screen mode. All other Web Designer windows are covered. The resolution defined for the preview window is disregarded here. This button is only active with the window in a docked state. View HTML source The button is enabled after compiling has successfully completed. It opens a popup window containing the html source code generated by Web Designer. You can debug directly in the source code. Window size: 1024 x 768 Window size This option is only available when the window is not docked. You can open the list with the arrow and select a value from the listed monitor resolutions. After selecting a resolution, the preview is automatically set to this size. This makes it possible to estimate whether the web application required scrollbars. The available space in the web browser to be used also plays a significant role as well as the number of item shown in the menu bar. Use this button to swap from the mobile view to the desktop view. Use this button to swap from the desktop to the mobile view. Language: The Language option allows you to set the language for the preview. You can choose from the language in which you have logged in to the Web Designer or other One Identity Manager tools. For more information about login languages, see the configuration. 31

32 Icon Address bar Function In the address bar, you can see the web application URL as in a browser. You can enter additional URL parameters either here or in the browser in which you opened the web application. Example of parameters: d1im_layout: The values "tablet" and "desktop" are options for this parameter. d1im_culture: The values "de-de" and "en-us" are options for this parameter. To enter a parameter with a value 1. Click in the address bar next to the URL in the preview window. 2. Enter the following data, for example: &d1im_layout=tablet 3. Press Return. You preview changes to mobile view. NOTE: In addition to manual entry of URL parameters, you can also use the buttons for desktop and mobile view as well as the Language menu to change the view or language, as described above. In addition to a toolbar, the preview window also has a foot bar. The following functions are available to you. Table 11: Functions in the Preview Window Status Bar Icon Function Status Done here means that compilation and rendering of the current project state have been completed and that entries can be made in the relevant pages. Pixel lines 769x485 The pixel line count indicates the dimensions of the window area that are available for the display of rendered html code. This information obviates the need for scroll bars during programming in cases where the amount of available browser space is known. This is affected by the screen resolution and the number of menu bars displayed in the browser. Use this button to swap from the preview to the monitor page. Use this button to swap from the monitor page to the preview. Viewing Generated Code You can view and copy generated code with help of Generated code (readonly) from the database object's toolbar in the definition tree view. This function is particularly useful if you view C# code in detail and want to use parts of it or examine an error in more detail. To copy generated code NOTE: If you want to search for a specific point in the code, you can use the shortcut CTRL + F. 32

33 1. Mark the position in the code in the definition tree view and select Copy from the context menu. The code is copied into the clipboard. 2. Inset the copied code at another point. NOTE: For more information about implementing C# code, see Microsoft.NET FrameworkExecuting code. For more information about examining errors in web projects, see Tasks on page 105. Bookmarks You can set bookmarks for custom and defined object at any place in the definition tree view. To set a bookmark 1. Run the function Set bookmark from the context menu and enter a description for the bookmark. 2. Click OK to confirm. - OR - 3. Use the key combination CTRL + F2 to open the dialog box for the bookmark description. The object is labeled with a bookmark. To remove a bookmark 1. Delete the bookmark from the definition tree view context menu. - OR - 2. Use the key combination CTRL + F2. This removes the bookmark. To manage bookmarks 1. Select bookmarks in the menu bar View. The Bookmark tab is shown in the definition tree view in its own view. This lists bookmarked objects in chronological order. 2. Double-click an object in the Bookmark view. NOTE: The marked object object is also shown in the definition tree view. Use the key F2 to jump between bookmarks. 33

34 Figure 7: Bookmarks The Bookmarks view has its own toolbar. Figure 8: Bookmark Toolbar Table 12: Toolbar for "Bookmarks" Icon function Delete all bookmarks: All bookmarks are deleted after the security prompt is confirmed. Edit description: This open a dialog box in which a description can be entered for the bookmark. The description can be extended, changed or delete. This function can also be called by right clicking on the selected object. Delete current bookmark This delete the current bookmark after the security prompt is confirmed. All bookmarks of the marked modules or components are deleted when modules/components are grouped together. This function can also be called by right clicking on the selected object. Group by modules/components: Bookmarked objects are group by their respective affiliation under modules or components and are listed in alphabetical order. Show bookmarks for current web project only.: This option only filters bookmarks which belong to the compiled web project. Hidden bookmarks are shown again by clicking on the button. Command List The command list shows all modification carried out on the current object in the definition tree view. A command list is kept for each object in the definition tree view. Use the button in the menu bar or the key combination CTRL + Z and CTRL + Y to undo or redo the commands. Implemented commands are flagged with the were undone. icon in the list. This icon is missing for commands that 34

35 Figure 9: Command List The use of wizards allows for automatic implementation of numerous commands, which in the command list are displayed as composite commands and the individual commands are shown at a second level. However, these commands can only be undone through the composite command. Table 13: Functions in the Command List Icon function UndoUndoes the last implemented command on the list. RedoRedoes the last implemented command on the list. Properties Once you have successfully compiled a web project, you can call up all the important information in the Properties view. In this view, you can check the property values of controls during application runtime. abfnote: A WCF connection must be created for this function. The Properties view is divided into two sections. On the left, the ASP.NET control hierarchy is displayed as it was on the web server when the web page was created. The associated database objects and IDs are also listed with the controls. On the right, the properties and property values for the controls are displayed. To view properties of a node you can, for example, click on a point in the preview window to view it in more detail in the Properties view. The point is highlighted in the Properties view. NOTE: This is only possible with display nodes, since only they are displayed in the preview window. Data and action node properties are only displayed in debug mode. To display a definition object 1. Click on the point in the preview you want to see in more detail. The clicked object is marked in the Properties hierarchy. NOTE: If the marked object is a control, the items Show definition object and Show query shown in the context menu. No context menu available if you selected another object type. 35

36 2. Click the marked object with the right mouse button in Properties. The items Show definition object and Show query are shown in the context menu. 3. Click Show definition object. The definition object is marked in the definition tree view. Table 14: Toolbar Functions in the "Properties" View Icon function After pressing this button, the definition object's parent nodes are marked in the Properties view. Use this button to navigate down through the hierarchy node by node. On the right-hand side of the view in the Property column, the property associated with the node to be marked is highlighted in color. You can close all nodes and sub-nodes in the view with Collapse all entries. Only the root node is visible. Use Expand all nodes to expand all nodes and sub-nodes. This displays all levels in the hierarchy. Use this button to mark the definition object in the definition tree view and view more details. Figure 10: Properties Multilingual Captions You can open the dialog box Multilingual Captions from Edit Captions in the menu bar. NOTE: If you open the dialog box Multilingual Captions when editing a node in the node editor, it contains an extra tab Quick edit with additional settings. For this, the selected or entered caption is assigned to the relevant node in the same work step. MultiLanguage captions are standalone objects from the standpoint of the database, and are thus not saved in web project files. Instead, a reference to the object is created in the web project nodes. The dialog box Multilingual Captions is responsible for creating and editing objects on the one hand and creating node references in the in the definition tree view in Web Designer, on the other. The objects are edited on the Captions tab. These objects have four main properties: Language Language indicates the language in which the text is written. Key Key is a unique value that allows for referencing of an object. 36

37 Text Text is the text that is to be displayed in the designated language. Customized text Customized text is likewise text in the designated language, but overwrites a Dell defined text when displayed. thus allowing texts in Dell defined modules to be edited to the customer s specifications without generating a customer-specific module. NOTE: You can add one object for each language in a web application. All such objects must then have the same key (not to be confused with primary key). You can add captions in different languages in the dialog box Multilingual Captions. The text box Language is available for this. Specify the language culture as well. You can select, for example, English, English - United Kingdom [en-gb] or English - United States [en-us]. Your web browser settings are also important for the multilingual captions you use with the Web Designer. If the selected languages (e.g. de-at) in your web browser settings do not exist as text in the Web Designer, the text is found in the nearest parent language set. To edit existing captions, a search function with several options in implemented in the top part of the dialog box. Search key and value Search for key only Search for value only Search in all available languages During text searches, both the Dell defined text and the customer-specific text are searched in all cases. The search results are shown in the results list, where they can be selected for editing by clicking them. Use the toolbar buttons to save and delete captions. Figure 11: Toolbar "Multilingual Text" Table 15: Toolbar Functions of the "Multilingual Text" Dialog Box Icon function Add Adds a new caption. Delete Deletes the active caption in the edit view after a confirming the prompt. Save Saves a new or modified caption in the database. Assign caption This button is only enabled if the dialog above a node in the definition tree node was opened. Clicking this button assigns the active caption in the Edit view to the node. To add a node directly to a caption 1. Click a node to which you want to add a caption in the definition tree view, for example, of type Label. 2. Select Node edit in the lower part of the definition tree view. 37

38 3. Click the button next to Text. This opens the Multilingual Captions dialog box. 4. Select Quick edit. Quick edit has an SQL edit window. Here you can enter and edit the node caption. The SQL window is empty if the node does not yet have any caption. If a caption already exists for this node, an SQL expression in the form "#LDS#<key>". In this case, Translate stands for calling the associated Web Designer SQL function, whilst #LDS# means that a caption follows the key (LDS - language dependent string). The Translate function also allows for the use of parameters. The following figure shows an example of a caption with two parameters. In such a case, you do not need to enter the parameter reference (for example {0}) in the key. It is sufficient to enter it in the text. It is always necessary to edit the function, for example enter the relevant parameters. The Quick edit tab is available too, if no caption has been previously selected on the Caption tab. In this case, the SQL field is empty. You can enter a statement manually. If you use a key without a caption in the database, the key name is displayed in the preview and in the web application. Example: translate #LDS#Hello World! becomes Hello World! in the web if the key does not exist in the database. This function is particularly useful during the initial phases of a project, when captions are frequently modified. Until the customer initially accepts the text, only its key is kept updated. Once the text has been accepted, the captions and all necessary translations are implemented. A specific dialog has been implemented that makes this task easier. There are instructions for this later in this chapter. Figure 12: Dialog "Multilingual Captions" and the "Quick Edit" Tab 38

39 To search for a caption 1. Open the Multilingual Captions dialog box from the web project menu bar or from the node of choice in the definition tree window. 2. Limit your search with help from the radio buttons Search key and value, Search for key only and Search for value only or with by checking Search in all available languages. 3. Select in Language a language and culture to use for the search. NOTE: In the Web Portal, captions and other values, such as, numbers or dates, are normally dependent on the language of the browser you use. When maintaining captions, you must specify a language which applies for all captions. You can learn how to find the right language from one of the languages given in your browser in Languages for Displaying and Maintaining Data in the Dell One Identity Manager Configuration Guide. 4. Enter part or all of a caption in the search box and click the button to the right. All captions matching the search string are displayed. NOTE: If one of the options Search key and value or Search for key only is set, the keys shown in the result list are labeled with an asterisk. Object Properties The Object properties dialog shows properties that are generated by Web Designer and the files that are saved as objects in the DialogAEDS table. Each module, component, project file and web project is represented as a separate file. To open object properties 1. Select the object of choice in the navigation view. The selected object is marked in color. 2. Click Properties in the navigation toolbar. This opens the Object properties dialog box. There are three tab available. You can edit the data on the tabs Properties and Access permissions if you have the right access permissions. 39

40 Figure 13: Information shown in the "Object Properties Window" Change Labels for Web Projects Click Apply a change label to whole web project in the toolbar to open the dialog box. Use the function to book all database objects that make up a web project to one change label. This allows a web project to be transported to another database using the tool Transporter without problems. The function ensures that all necessary database objects are taken into account during transport. To open the dialog box, "Edit change labels..." 1. Click Apply a change label to whole web project toolbar to open the dialog box in the toolbar. 2. Select, which groups of database objects should be linked to the change label: a. Modules, components and configuration The option links the database objects created by the Web Designer with the change label. b. Captions 3. Click Next. The option links all captions required by the web project with the change label. For more information, see Multilingual Captions on page 36. If any of the selected objects are already linked to one or more change labels, these assignments are not changed or deleted. In fact, another link is added. Another view appears in the dialog box. 4. Click the icon next to Change labels. The Change labels window is displayed. Follow the steps below to proceed. 40

41 To create, edit or delete change labels 1. Open the dialog box as described above. In the dialog box, you see selection options for a change label. 2. Click the magic wand. The Change label dialog box is display with changes labels. NOTE: If you have not selected and change labels, only the Changes labels button is enabled. 3. Select the change label. The buttons Open/close edit view and Create change label and Delete change label are set and can be clicked. a. Click the button Open/close edit view to edit the selected change label. This displays a table with more information about changes label in the dialog box which can be edited. - OR - b. Click the button Create change label if you want to add new change label. This displays a table with more information about changes label in the dialog box which can be edited. - OR - Populate Change labels, Description, Remark and Status remark. Select the change label from Parent change label if necessary. Select the option you want from the Locked list. Select the label type from the list. Select the change label status from the Status list. Click OK. Click Save change label. The new change label is displayed in the dialog box. c. Click Delete change label. The message Do you really want to delete the change label? appears. Confirm the prompt with Yes if you are sure you want to delete the change label. The change label is deleted and not shown in the dialog box anymore. Table 16: Functions in the Change Label Dialog Toolbar Icon function Show / hide edit view. Create a new change label. Delete the selected change label. 41

42 Icon function Save change label. NOTE: For more information, see the configuration guide. Web Project Configuration Options You can customize the default Web Portal. You can modify filters for searching employees or products, enable and disable functions and change properties displayed in result lists. These changes are made by entering custom values for the corresponding configuration keys. It is not necessary to program new modules or components to do this. Project Configuration - Web project A web project is defined through the configuration key under the root node Configuration. This definition only applies for this web project. They can consist of modules and components that are used by several web projects and can also contain their own configuration key definitions. The web project uses default configuration keys, if none are defined under the root node Configuration (custom) or within the web project used by a module's configuration key. NOTE: The parameters are declared directly in the modules or components under the Configuration node. To select a database object 1. Select the category you want to view in the navigation view. The selected category is listed with the corresponding database objects in the navigation view. 2. Double-click the database object of your choice. - OR - Enter the names of the database objects in the search in the navigation view. This displays the selected database object in the definition tree view. Figure 14: Declaring of Configuration Keys in the Definition Tree of Modules and Components 42

43 NOTE: The assignment of a configuration key with a value is always applied to the module or component. These are shown when you click Configuration or Configuration (custom) in the definition tree view. All configuration keys that are not listed here, are not given a value. To configure a web project, you edit configuration keys in Settings... in the definition tree view. This web project configuration procedure is explained in the following. To configure a web project 1. Click Edit in the menu bar. 2. Select Web project in the submenu Configure project. The Configure project is displayed with existing configuration sections. NOTE: If the debug system is disabled or the web application does not run properly, you may have to compile the web project first before the data can be displayed correctly. NOTE: The Configure project view is the same as the view you see through Settings... in the definition tree view. 3. Click the plus icon next to the configuration section you want. This displays the configuration key stored under the configuration section. To find a special configuration key 1. Enter a part or the whole search term in and click to search. - OR - Click the plus icon next to Options. A select of options is displayed, which you can use for searching. The following options are available: a. Parameter b. Key c. Description d. File Name e. Only from type NOTE: The option Only from type also has a menu from which you can select a parameter type. Enable one or more check boxes for the options you want or edit a setting in the list and click the search button. Configuration keys matching you search are displayed. 2. Mark the configuration key of your choice. Additional information is shown under Details. NOTE: In the Details view, you will see detailed information about the configuration section's configuration key, which is implemented in the view Object definition in the definition tree view. Depending on which parameter type is used for the configuration key, different data entry options are available to you for editing the configuration key in the Settings... view. 3. Click the plus icon in the column Value (custom) in the row of the marked configuration key. 43

44 The column Value (custom) changes to display X - Is equivalent to standard value. The tab with the defined configuration key is opened in the definition tree view. You can edit the configuration key under Details by click on Show definition object. You can also reset the custom value by clicking the X icon and confirming the prompt. NOTE: Different editing option for the configuration key are described to you in more detail in the the next sections about individual parameter types. The following parameter type can be assigned to a configuration key: Boolean value SQL filter condition Selection from value list Free text Property list Image Color value Color dictionary In the "Settings..." view Call NOTE: A database object must be select to edit in the definition tree view. Click Settings... in the definition tree view. The Settings... view is displayed with existing configuration sections. NOTE: If several configuration keys exist, they are grouped together in one configuration section. You can expand the configuration sections to go to the configuration key of your choice. Parameter Type "Boolean Value" Configuration keys of type Boolean value can be used for"yes" or "No" questions. An example for such a question would be to allow navigation with keyboard shortcuts. NOTE: The configuration key from this parameter type must be marked in the definition tree view in order to edit it. To edit configuration keys of parameter type "Boolean value" Enable or disable the configuration key check box under Details. You setting is transferred to the configuration key. Parameter Type "SQL filter condition" You can use the configuration key of parameter type SQL filter condition to, for example, query database objects with certain properties. An example for such queries would be to show all employees whose name begins with "A". We will use this example to show the procedure for editing the configuration key of parameter type SQL filter condition. 44

45 NOTE: The configuration key from this parameter type must be marked in the definition tree view in order to edit it. To edit the configuration key of parameter type "SQL filter condition" 1. Enter you filter condition in the text box. NOTE: You can only use SQL to formulate your expression. Web SQL cannot be used. - OR - Click Open wizard. This open the WHERE clause wizard. 2. Click the link Add expression. The Select column window is opened with several folders that you can expand. 3. Mark a folder, for example value comparison; a column name, for example, surname. 4. Click OK. TIP: To display a column name in SQL, you must check the SQL caption box. You choice is shown as a condition in the WHERE clause wizard. 5. Click the link is equal to. The Select operator window is displayed. 6. Select the operator, for example, starts with Click the link Text. The Enter text window is displayed. 8. Enter in some text, for example, A. NOTE: to delete a condition you must click on the red cross in front of the condition. 9. Click Next. TIP: You can swap the view to SQL by selecting Expert view. You can return to the previous view mode by clicking Wizard view. This executed your SQL condition and displays the result in the preview. NOTE. By click repeatedly on Next you can see your SQL condition. 10. Click Finish. This closes the dialog box. In the Settings... view you can see your data in the Value (custom) column. Parameter Type "Selection from value list" A use case for the configuration key of parameter type Selection from value list would be gender data. For example, the values "male", "female" and "other" can be chosen. NOTE: The configuration key from this parameter type must be marked in the definition tree view in order to edit it. 45

46 To edit the configuration key of parameter type "Selection from value list" Select the value of the preset value of your choice in Details. The selected value is displayed in the column Value (custom) is displayed in the configurator view. Parameter Type "Free text" The configuration key of parameter type Free text is used when you want to provide several links. You can enter a link to the company's home page, for example. NOTE: The configuration key from this parameter type must be marked in the definition tree view in order to edit it. To edit the configuration key of parameter type "Free text" Enter in Details. The column Value (custom) is displayed in the configurator view with the text you entered. Parameter Type "Property list" The configuration key of parameter type Property list can be used when you want, for example, to modify columns in the White pages view that are displayed in Web Portal. NOTE: The configuration key from this parameter type must be marked in the definition tree view in order to edit it. To edit the configuration key of parameter type "Property list" NOTE: Before you can edit this database column, you must add a matching entry on the Configuration (custom). You recognize this entry because it is marked with X in the Value (custom) column in the configuration key list on the Configure project tab. 1. Mark the configuration key of parameter type Property list on the Configure project tab, which you have previously added on the Object definition tab. 2. Click on the plus sign in Value (custom). Now X - Is equivalent to standard value is shown in the Value (custom) column. 3. Click Open wizard under Details. This opens the dialog box Database column selection. On the left-hand side, all selectable columns of the preset table are displayed. On the right-hand side, all columns in use are displayed. 4. Mark your entry of choice in the list of available columns,if you want to use this entry. 5. Click the right mouse button and select Add selected columns. - OR - 6. Click one of the arrow icons pointing to the right in the dialog box toolbar. The marked entry is displayed in the list of used columns. 7. Mark the item of choice in the list of used columns. Edit boxes for the selected columns are displayed in the lower part of the dialog box. 46

47 8. Click the enabled buttons next to fields you want to edit. This is enables the edit box for the button you clicked. You can either enter an SQL condition or a value. - OR - 9. Click Add property in the toolbar OR Click the right mouse button and select the following entries from the context menu: 12. Click OK. a. Select Validate. A new validation node is added under the marked entry and edit boxes are displayed. b. Click the enabled buttons next to fields you want to edit. This is enables the edit box for the button you clicked. You can either enter an SQL condition or a value. - OR a. Select Parameter. A new parameter node is added under the marked entry and edit boxes are displayed. b. Click the enabled buttons next to fields you want to edit. This is enables the edit box for the button you clicked. You can either enter an SQL condition or a value. NOTE: You can delete parameters and validation nodes with the button Delete properties in the dialog box toolbar. Your data is saved and the dialog window is closed. Parameter Type "Image" You can use the configuration key of parameter type Image for logos, for example. NOTE: The configuration key from this parameter type must be marked in the definition tree view in order to edit it. To edit configuration keys of parameter type "Image" 1. Select an image in Use image from resource. - OR - Click Load new image. You selection is shown in the Image preview. - OR - NOTE: Only images that have already been loaded once are available in Use image from resource. Select an image in Use stock image. 2. Select the image size in Size. 47

48 You selection is shown in the Image preview. In the configurator view, you see the file name of the selected image and the method of loading the image, in column Value (custom) NOTE: Use Delete to remove your selection again. Parameter Type "Configuration Object" The configuration key of parameter type Configuration object is used when you want to add or remove statistics. NOTE: The configuration key from this parameter type must be marked in the definition tree view in order to edit it. To edit the configuration key of parameter type "Configuration object" 1. Click Open wizard. This opens the dialog box Configure Dashboard Display. 2. Click Global statistics. This list all global statistics. 3. Click Object based statistics. This list all object based statistics. 4. Mark one or more statistics in the menu Available statistics. 5. Click Add selected statistics. TIP: You can use multi-select by selecting items in the list whilst holding the CTRL key. You selection is displayed in the Statistics list below. 6. Mark one of the statistics in the lower list. On the right-hand side there are different input fields and menus. 7. Check either Heatmap or Chart. To edit chart settings NOTE: Check the Chart option. 1. Select the chart type in Type. 2. Enter a title for the chart in Title or Text. This is displayed later as the organization unit in the web application. NOTE: Depending on which chart type you selected in Type, only certain text fields are available for you to edit. The properties Title, Text and Tooltip in this view use an SQL editor. Enter the captions for the organizational units shown in the web applications. For more information, see Multilingual Captions on page Configure the selected statistic with the available input fields and menus. 48

49 4. Click OK. NOTE: If you want to sort the data, mark one of the statistics from the lower list and move it to the position you want using the arrow keys. You can delete statistics from the list by marking them and clicking Remove selected statistic. Your settings are saved. The number of selected columns is displayed under Details and in the Settings.. view in the column Value (custom). To edit heatmap settings NOTE: Check the Heatmap option. The dialog box mask changes and divides into three parts, General, Current database and Historical data. Configure the selected statistic with the available input fields and menus. Parameter Type "Color value" You can use the configuration key of parameter type Color value to change all the colors used. NOTE: The configuration key from this parameter type must be marked in the definition tree view in order to edit it. To edit the configuration key of parameter type "Color value" 1. Click Change color This displays the Color editing window. 2. Make the changes you want to within the available options. 3. Click Add colors. The selected colors are displayed under Custom colors. 4. Click OK. The selected color values are displayed in the Settings... view in the column Value (custom) and under Details. Parameter Type "Color dictionary" The configuration key of parameter type Color dictionary is used in determining the color scheme of statistical values. If the same values occur in different statistics, the values should be viewable in consistent colors. Thus, the value "approved" always has the color "green" not taking into account in which statistic the value appears. NOTE: The configuration key from this parameter type must be marked in the definition tree view in order to edit it. To edit the configuration key of parameter type "Color dictionary" 1. Click Start wizard. This displays the dialog Change color dictionary. You can add and remove color values in Numbered values and in Predefined values. 2. Click the plus icon in your section of choice. 49

50 A new color bar is added under the corresponding part depending on where you clicked on the plus icon. 3. Click the color surface of the new car. The Color window is displayed. 4. Select a color. 5. Click Add colors. This displays the selected color under Custom colors. 6. Click OK. The new color bar is listed in Change color dictionary. 7. Assign the color bar to an item in the statistics: - OR - a. Mouse over the dotted surface of the selected color bar in Numbered values. b. Drag this bar to the position of choice whilst holding down the mouse button. The color bar is now in the right position. If the color bar in in the first position, it will appear in the first position of the statistics. This bar represents the value with the highest priority. The weighting of the other bars therefore depends on the order of the listed bars. 8. Enter a ID for the color bar: a. Enter the name you want for the color bar in the text field. 9. Click Apply. The color bar is now named. For example, the green bar stands for "Approved". Your settings are saved. The number of selected columns is displayed under Details and in the Settings.. view in the column Value (custom). Project Configuration - Customization This part of the configurator allows you to create and edit substitution rules for module copies. Substitution rules are listed that were added with the Copy objects wizard. NOTE: Substitution rules have higher priority that references in the definition tree. References in the definition tree are no changed in this case. The screen shot shows an example of customizing the project configuration. Forwarding to VI_Delegation is replaced by the module Custom_Delegation. NOTE: If the module Custom_Delegatio is no longer needed, the substitution rules can simply be deleted. 50

51 Figure 15: Project Configuration - Customization Project Configuration - Search Fields The menu item Search fields allows you to define which database columns a search function should search. NOTE: The configuration shows the full list of database tables. In the default version, each database table determines its own display pattern. For example, %InternalName% is stored as the display pattern for the database table Person. You can modify the search with the wizard, if you want to show other database columns. NOTE: In order for the search settings to be implemented, the SQLSEARCH() function must be used in the expression. This function requires the table name and search string parameters. An Example of a Search function sqlsearch('person', from various selected search strings) This search function is used by default in modules and components. 51

52 Figure 16: Project Configuration - Search Fields Column-Dependent References A column-dependent reference references a component's column definition. This reference can be used everywhere where contents of a specific database table is shown or edited. An instance of the component is generated, depending on which data type and other metadata is linked to the column. By default, the following components are used as column-dependent references for editing. Type String Component name VI_Edit_Default VI_Edit_TextLong (if the column is multi-row defined) Int32 DateTime Foreign key Limited value columns Multi-value columns Mulit-value columns with limited values Multi-value foreign key columns Numeric value range VI_Edit_Int VI_Edit_Date VI_Edit_FK VI_Edit_LimitedValues VI_Edit_MultiValueProperty VI_Edit_MulitLimitedValues (for parameter objects) VI_Edit_MultiFK (for parameter objects) VI_Edit_NumericRange (for parameter objects) 52

53 Type Date range Boolean Double Decimal Component name VI_Edit_DateRange (for parameter objects) VI_Edit_Checkbox VI_Edit_Double VI_Edit_Decimal By default, the following components are used as column-dependent references for visualizing. Type Default Binary column with contents "Picture" Column with contents "URL" Component name VI_Edit_View_Default VI_Edit_View_Picture VI_Edit_View_URL Using a Column-Dependent Reference NOTE: A collection must be in possession of a cursor to be able to add a column-dependent reference. To add a column-dependent reference 1. Select the control node (a container, for example) with the right mouse button. 2. Select Column-dependent references. 3. Assign the added node to the collection and the edited property. Defining a new Column-Dependent Reference A column-dependent reference is a conditional reference to a component. Depending on the type of column in a database table (for example, Boolean, DateTime or String) it is decided, which component will be used to edit the relevant content. To this end, the standard scope of delivery includes VI components which cover all possible column types and find them automatically. NOTE For more information, about how to create a new component for a column-dependent reference, see Adding New Components on page 65. To edit object-dependent references 1. Select the submenu Edit Configure project Column-dependent references in the menu bar. - OR - 2. Click Configure Column-dependent references on the start page. This opens the Project configuration - Column-dependent references dialog box. All columndependent references are listed in the upper part of the dialog box with the associated default components. You can see all the information about the column's access rights in this part of the window. You also see whether a custom component belongs to it. 53

54 NOTE: The areas Viewer and Editor are visible depending on which access rights the column has. 3. Enable the column to edit in Viewer or Editor. 4. Select the component you want in Components. 5. Click SQL Wizard... next to the text box to use the SQL syntax editor. - OR - 6. Click Add. This add a new column in the upper area. You can edit both Table and Column. - OR - 7. Click Delete. NOTE: You can only delete columns you added yourself. 8. Click OK. Dynamic References A component can be referenced in two ways. Normally, a static reference is used to reference components directly using their names. An example of a static reference is calling the component VI_Popup. NOTE: It is not possible to use object-dependent references on the login page if the web application is executing against an application server. The second way of referencing components is dynamically. Dynamic references can reference more than one component at a time. A specified criteria is used to determine which component will effectively be referenced at runtime. This method of referencing makes it easier to build extendable generic components. Object Dependent References Components are referenced on the basis of two factors in the case of object-dependent references. Reference type specified on the reference node Reference type identified by its object key Defining Reference Types and References Object-dependent references are divided into reference type, which define each area of application. These reference types are defined in the table DialogAEDSActiontype. The following reference types are defined by default: Reference Type Use Case Reference Table Interface Default component Clone_ ShoppingCartItem Duplicate an item in the shopping cart AccProduct VI_Interfaces_ ObjectSwitch_ Clone_ ShoppingCartItem VI_Clone_ ShoppingCartItem_ Default 54

55 Reference Type Use Case Reference Table Interface Default component Details_AccProduct Detailed information about a requestable product AccProduct VI_Interfaces_ ObjectSwitch_ Details_AccProduct VI_Details_ AccProduct_Default Details_ PersonWantsOrg Detailed information about a request AccProduct VI_Interfaces_ ObjectSwitch_ Details_ PersonWantsOrg VI_Details_ PersonWantsOrg_ Default Details_ ShoppingCartItem Detailed information about an item in the shopping cart AccProduct VI_Interfaces_ ObjectSwitch_ Details_ ShoppingCartItem VI_Details_ ShoppingCartItem_ Default Insert_ ShoppingCartItem Adding an item to the shopping cart AccProduct VI_Interfaces_ ObjectSwitch_ Insert_ ShoppingCartItem VI_Object_Overview Object_Overview Overview of an object DialogTable VI_Interfaces_ ObjectSwitch_ Object_OverView VI_Object_ Overview_Default Select_ DialogDashboardDef Selecting a data point in a statistics overview DialogDashboardDef VI_Interfaces_ ObjectSwitch_ Select_ DialogDashboardDef VI_Select_ DialogDashboardDef_ Default Verify_ ShoppingCartItem Checking an item in the shopping cart AccProduct VI_Interfaces_ ObjectSwitch_ Verify_ ShoppingCartItem VI_Verify_ ShoppingCartItem_ Default The references are defined in the table DialogAEDSAction. Such a reference is defined by: A reference type An assigned component A list of assigned objects from the reference type's reference table The list of assigned objects is stored in the table DialogAEDSActionHasObject. Defining a new Object-Dependent Reference In this section, you will find out using an example, how a component, displaying detailed information about a request, can be defined for a specific product request. This component is then required, if detailed information for the request needs to be displayed - regardless of which web application page the user is currently on. NOTE For more information, about how to create a new component for an object-dependent reference, see Adding New Components on page

56 To edit column-dependent references 1. Open the Object-dependent references tab in the definition tree view. NOTE: You can either open the Object-dependent references tab from the start page under Configuration Object-dependent references or the menu submenu Edit Configure project Object-dependent references. The following functions are available in the menu bar of this tab: Add reference type Add object dependent reference Delete Refresh data Create component for object dependent reference... The tab is divided into two parts. On the left, reference types and references are displayed in hierarchically. In the first level you will find the reference type, in the second, the reference. The reference types can be open by clicking on the plus icon. 2. When you select a reference type, a view with the following information is displayed on the right: Name Interface name. Default component Table Description Custom reference type can be edited. You can open and edit the object in another tab in the definition tree view using the button next to the menu. To display components implemented by an interface 1. Open the Object-dependent references tab in the definition tree view. NOTE: You can either open the Object-dependent references tab from the start page under Configuration Object-dependent references or the menu submenu Edit Configure project Object-dependent references. 2. Select the reference type from the hierarchy for which you want to see more detail about the interface. More information in text and menus is displayed on the right-hand side of the tab. Including the name of the interface. 3. Click Go to interface next to the menu. The interface is displayed on its own tab in the Object definition view in the definition tree view. - OR - Mark the reference node in the Object definition view in the definition tree view. 4. Click Is interface for following components: in the Node editor view. A window with a list of components is displayed in which the interface is used. You can select a component from the list and view more details in the definition tree view. 56

57 Customizing the Web Portal The Web Portal has many options for customizing the application according to its uses and your requirements. One possible configuration is to change predefined settings with the Web Designer configurator. The second possible configuration provides customization of the object definition for requirements without predefined configuration settings. Creating a New Project If properties that are defined in the web project (languages, display settings, menu structure) are going to be changed, you must make a copy of the default web project. NOTE: This task is different to creating an object copy. For more information, see Creating Object Copies with the Wizard on page 68. Figure 17: Dialog Box "Create New Project - Selecting Modules" To create a new project 1. Select Create new project in the in the menu bar under Edit. 2. Enter the name of the new web project in Identifier. 57

58 3. Select the template in the Template menu. NOTE: Other projects are available to you as templates, not just the default project. You will see different menu items and workflow for use in your new project, depending on which web project you took as a template. 4. Select the menu items or modules from the web project you selected as template and want to use in your copy. The modules are still referenced from the customized web project. 5. Click Next. NOTE: Check the modules options in the tree selection. To add the modules to a new project, you must check the box next to the module. Enable and disable the modules you do not have want to have in the web project respectively. Use the check box Select all/deselect all to select or deselect all module at once. Continue to add the new module. Next, the Create new project - New project view shows all changes made. 6. Click Finish. Details of the new web project are displayed in the definition tree view. 7. Click Save. The web project is added as a new file. 58

59 Figure 18: Dialog Box "Create New Project - New project" To view the new web project 1. Select the tab Start page in the definition tree view. 2. Click Edit web application settings. This opens the dialog box Edit web application settings. 3. Select the newly created web project in Web project. 4. Click OK. 5. Click Update preview on the start page. The new web project is loaded in the preview. 6. Click Debug or Release on the start page. This publishes the web project. You can now view it. To copy configuration settings from another project 1. Select the node with the web project in the definition tree view. 2. Enable in Inherit configuration settings from in the Node editor. 3. Select the web project whose configuration settings you want to copy, in the menu. The settings are transferred. 59

60 Figure 19: Changing Configuration Settings To add a new menu item to web project 1. Select the mode MenuStructure in the definition tree view or, as in the visual, MenuStructure1. 2. Click the right mouse button. 3. Select Menu item in the context menu. This adds a new subnode under MenuStructure or MenuStructure1 respectively. To hide a menu without submenu. 1. Select the new subnode. 2. Enable Hide if no child menu items exist in the Node editor. The menu is not displayed in the web project if it has no submenu. Creating a New Module Use this wizard to execute all the necessary steps to add a new module and reference it in a web project. Start the assistant from the menu Edit Create new module in the menu bar. Enter the identifier for the new module in the first step. You can also enter a title for the new page. If you have added the identifier as well as the title, a new node of type Label is automatically added under the node type Form in the definition tree view. A corresponding caption object is not added. A warning is outputted the next time the project is compiled and the caption can then be added including all possible translations required. 60

61 To create general data for a module 1. Select Create new module in the Edit menu. This display the dialog box Wizard for creating a new module. 2. Enter the name of the new module in Identifier. NOTE: You can enter a title for the new page. 3. Enter a title for the new page in Title caption. 4. Click Next. The general data for the module are initial complete. You move onto the next page. Figure 20: Create New Module Wizard Basic Data In the next dialog box, you can set whether and menu item is created for the the new module in the menu bar or not. If this option is set, you will see more settings for defining the position of the menu item in the menu bar and the its caption. To add a menu item for the new module 1. Enable Add a menu item if necessary. 2. Enter a name for the menu item in Menu item caption if you have not done so in the previous dialog box. 61

62 NOTE: Menu item caption contains the module name as a preset if you have not entered a name in the previous dialog. You can change these presets. You can add a caption object for this text. NOTE: You can only take the following step if you have previously selected Add a menu item. 3. Click the plus sign next to the web project in the edit frame. This expands the web project menu hierarchy and displays existing menu items. 4. Mark the menu item you want to view. More options, for placing new menu items can be modified and selected. 5. Enable one of the following options: 6. Click Next. Above the selected item This places the menu item above the menu item you have selected. Below the selected item This places the menu item below the menu item you have selected. A hierarchy level under the selected item This places the menu item one level below the menu item you have selected. Settings for placing new menu items are now complete. You move onto the next page. Figure 21: Create New Module Wizard Adding and Configuring a Menu The following dialog box defines the group of employees the menu item applies to. 62

63 To set viewing permissions for authorized employees for the new menu item NOTE: You can multi-select employees with the option Only for employees in specific roles. The new menu item is available in the web application to all employees that are assigned to at least one of these selected structures. NOTE: If the option Employees matching a given filter condition is selected, the usual SQL wizard for formulating an SQL query is started. In this case the query always refers to the table Person. Therefore, this must not be entered again. 1. Select one of the following options: 2. Click Next. Visible everyone No viewing restrictions are applied to the new menu item if this option is selected. Configuration parameter Select this option to add a new configuration parameter.a predefined value is suggested for the key. The following options remain available: a) Only for employees in specific roles b) Employees matching a given filter condition Once your visibility settings have been made, the Next button is enabled. The visibility settings are closed. The new module is added. 3. Click Finish. The new module appears as a tab in the definition tree view. 4. Click Save all. All changes to your web project are saved. 63

64 Figure 22: Create New Module Wizard Configuration Parameter - Only employees with specific roles 64

65 Figure 23: Create New Module Wizard Configuration Parameter - Employees matching a given filter condition Adding New Components You can add new components in the following ways. If you want to create a new component for an object dependent reference, you use a wizard to add the object dependent reference as well as the new component conveniently. The wizard can also help you set up column-dependent references. Both variations are described here: To add new components using the navigation menu. 1. Select the category Components in the navigation view. 2. Click Add in the navigation toolbar. 3. Select Add new component. The new component is shown in a new tab in the definition tree view. NOTE: New components are automatically prefixed. You can change the name later. Text boxes with * are mandatory. 4. Select the component's root node in the definition tree view. 5. Select the Node editor view for the root node and edit the predefined Identifier in the text box. 6. Click Save or All save in the toolbar. 65

66 This renames the component. 7. Select the node Definition in the component in the definition tree view. This displays the Type menu in the Node editor. Use the selection to define which type of nodes the new component will have. 8. Select a type in the Type menu. This displays the selected node type under Definition and you can continue editing. 9. Select the new node in the definition tree view to make more changes. You can specify conditions, rules and extensions. To create a new component through object-dependent references. 1. Select Configure project Object reference through Edit in the menu bar. - OR - Click Configure Object reference on the start page. This displays the Object reference tab in the definition tree view. 2. Select a reference type in the hierarchy on the left-hand side. The data on the right of the tab contains information about the selected reference type. 3. Click Create component for object dependent reference... toolbar the Reference types tab. NOTE: You can find this wizard through Edit Add new Create component for object dependent reference... on the start page. This opens the dialog box Create component for object dependent reference Click Next. 5. Enter a name in Reference name in the next view. 6. Select a reference type in the next view. 7. Click Next. NOTE: This reference type preset depending on which reference type was marked before you apply Create component for object dependent reference Select one or more objects to be displayed, in the next view. 9. Click Next. The view for component name is displayed again. 10. Click Next. The object-dependent reference and the component are generated. 11. Click Finish. The reference and component are added and shown on a new tab. To create a new component through column-dependent references 1. Click Edit Add new Create component for column-dependent reference... on the start page. This opens the dialog box Create component for column-dependent reference Click Next. 66

67 3. Enter a name in Component name in the next view. 4. Click Next. 5. Select a interface name in the next view. 6. Click Next. 7. Select table and column in the next view. 8. Click Next. Your settings are processed and the fitting elements are generated. 9. Click Finished. The reference and component are added and shown on a new tab. Customizing Object Definitions As already mentioned, you can copy existing objects with the Web Designer and customize them. You not only have a wizard to help you here, but you can also copy the object you want directly in the definition tree view. Another possibility to customize objects is to use extensions. For more information, see Extensions on page 69. To create an object copy 1. Select an object in the definition tree view 2. Click Copy object. This opens the dialog box Copy object. 3. Enter a name or a description for the object copy in the text box. 4. Enable Add substitution rule for current object if required. 5. Confirm you input with Finished. This displays the object copy in the definition tree view. NOTE If you call an object in the definition tree view, for which a substitution rule was defined, it appears above the object in the header with a matching comment. NOTE: After an object has been given a substitution rule, a button is added providing further information. Double-click the object to be replaced to display it in the definition tree view. NOTE: If you copied a default object, future changes to the default object are not transferred to the object copy. This is the case after a migration, for example. 67

68 Figure 24: Substitution rule Creating Object Copies with the Wizard You must make a copy of a default object if you want to add new functionality to it that is cannot be added in the configurator. The Copy objects wizard helps you with this. To add a copy of an object with the wizard 1. Select the menu item Edit Copy objects... in the menu bar. The the dialog box Copy objects... is opened after compiling. All existing database objects are ordered by different object types into a hierarchical structure. 2. Enable the check box next to the database object you want to copy. NOTE: The database objects cannot be multi-selected. NOTE: The wizard automatically adds substitution rules for the objects used for copying if the option Add substitution rule for current object is set. The copies are automatically referenced instead of the default objects. The Web Designer does not generate substitution rules if custom database objects are used as copy templates. You can use the configurator to enter these substitution rules manually.for more information, see Project Configuration - Customization on page Enter a name for the copy in the Copy name* column, if required. A custom prefix stored in the database is automatically prefixed to the entered or suggested name. 4. Click Next. A copy of the selected is created and a conformation prompt is displayed. After you have closed the wizard, new tabs are created in the definition tree view displaying the copies. 5. Save the copy manually from the toolbar. 68

69 Figure 25: Copy Objects Wizard Extensions In the case of certain requirements, it is sufficient to modify some object properties, to add or delete a node. Extensions to the web application configuration are suitable for this. This configuration option allow you to specify changes to an object. How Extensions Work The Web Designer base object, also modules, components, web projects, can contain any number of extensions. A number of extensions are supplied with the database module installation. But you can also add extensions yourself. Extensions are initially incorporated when base objects are configured. The modified base object is then compiled. The Web Designer marks the changes resulting from the extensions, in color. You can find base objects that you want to use as extensions in the Object definition view in the definition tree view. These nodes are highlighted in color. Extension node can be edited in the Configuration (custom) view. You can recognize the extension nodes by the custom prefix added at the beginning of the node name. 69

70 Figure 26: Workflow in the Web Designer To select an extension node for editing NOTE: You can recognize an extension node in the Object definition view in the definition tree view by the marking in form of a colored bar. 1. Mark the extension node you want in Object definition. The button Show definition object becomes visible in the lower area of the Object definition view for the marked node. 2. Click Show definition object. The view switches to Configuration (custom). 3. Click Show in parent document to return to the Objects definition view. NOTE: You can swap between Configuration (custom) and Object definition views with the button, if the extension is found under the Add node or Remove node node. Extension Rules Each extension is its own object in the Web Designer. The advantage of extensions is that database objects that have been extended are updated by migration without the database objects being overwritten. This is does not apply in the case of object copies. In that case, the copy is not updated on migration. There are the following extension rules: Inserting a node Moving a Node Editing a property Deleting a node NOTE: You recognize an extension node by the colored bar marking it. Inserting a node When you insert a new node, the read-only base object is extended by one node. 1. Double-click a base object of your choice in the navigation view. The selected base object is displayed in the view Object definition (readonly) in the definition tree view. 70

71 2. Select a node. 3. Click the right mouse button. This opens the context menu. 4. Select Object in extension New Node in the context menu. The New Node dialog box is opened with a list of node types. NOTE: You can also select another item as Object in extension New node if you know which node type to base the extension on. 5. Select a node type from the list and confirm your selection with OK. This adds a new node. 6. Edit the new node in the Node editor view and save the input or settings respectively. The new node is displayed in the Configuration (custom) view in the definition tree view and also in the preview. Moving a Node When you move a node, it is removed from the base object and added to the extension. NOTE: The menu item Move to extension is only available to custom objects. 1. Double-click a base object of your choice in the navigation view. The selected base object is displayed in the view Object definition in the definition tree view. 2. Click Object definition to change views in the definition tree view. 3. Select a node. 4. Click the right mouse button. This opens the context menu. 5. Select Move to extension. The node is marked in color as in the extension mode. Editing a property When you edit a property, the node property is changed in the read-only base object. A change might be, for example, extending viewing conditions, as explained below. Other changes are not gone into here. NOTE: To select an extension node for editing, see How Extensions Work on page Click the button next to Viewing condition in the Node editor view. The view switches to Configuration (custom) and the extension New property is selected. You can edit the extension. 2. Make your changes to the extension in the Node editor view and save you data or settings respectively. The edited extension is displayed in the definition tree view and also in the preview. Deleting a node The node is hidden in the base object if you delete it. A deletion is, for example, when you want to delete a bookmark on the Web Portal start page. 71

72 To create a deletion rule NOTE: To select an extension node for editing, see How Extensions Work on page Select the extension node you want to delete in the Object definition view. 2. Click the right mouse button. This opens the context menu. 3. Select Delete node as an extension in the context menu. The node changes its colored mark and you can see the message, Delete node in the Node editor. You can also see this message on the extension when you swap to the Configuration (custom) view. To remove a deletion rule 1. Select the node Delete node in the Configuration (custom) view, if you want to remove an extension. 2. Click the right mouse button and select Delete in the context menu. NOTE: The menu item Delete is only available to custom objects. 3. Confirm the prompt with OK. The extension is removed from the definition tree view. Creating New HyperViews You can use this wizard to create new HyperViews or HyperView shapes or to import existing ones. To import an complete HyperView 1. Click Edit HyperViews. This displays the HyperView Wizard dialog box. 2. Select Import a complete HyperView control. The next view Choose central element is displayed with a list of elements. 3. Select an element from the list and click Next. The next view appears. 4. Select the dependent elements and click Next. The next view appears. 5. Enter the component name in the text box and click Next. The next view appears and components are generated. The button Finished is activated once the process is complete. 6. Click Finished. The wizard is closed. 72

73 To import one or more HyperView shapes 1. Click Edit HyperViews. This displays the HyperView Wizard dialog box. 2. Select Import one or more HyperView shapes. The next view Extend an existing hyperview is displayed with a list of hyperviews. 3. Select the hypeview you want to view from the list or write the HyperView name in part or in full in the text box. 4. Click Next. The next view, Select dependent elements, is displayed with a list of dependent elements. All elements are enabled. 5. Disable Select all/deselect and select the element you want to use for the HyperView shapes. 6. Click Next. The shapes are added for selected elements. The button Finished is activated once the process is complete. 7. Click Finished. To define a new HyperView shape 1. Click Edit HyperViews. This displays the HyperView Wizard dialog box. 2. Select Define a new HyperView shape. The next view Extend an existing hyperview is displayed with a list of hyperviews. 3. Select the hypeview you want to view from the list or write the HyperView name in part or in full in the text box. 4. Click Next. The next view, New HyperView shape is displayed. 5. Select the table for the new shape in Base table. 6. Enter a definition for the WHERE clause in the SQL syntax editor. 7. Enter a fitting title in Shapes title. 8. Click Next. This adds a new shape. The button Finished is activated once the process is complete. 9. Click Finished. Adding New Nodes To add a new node 1. Select a database object in the navigation view. The selected database object is displayed in its own tab in the definition tree view. 73

74 NOTE: The procedure for inserting new nodes differs somewhat if the database objects are VI_ Standard objects or custom objects. In the case of VI_Standard objects, first you must move the nodes to the extension using the context menu before you add a new node. You have additional write permissions for custom objects and you can add a node directly under the node in the definition tree view. 2. Select a node of type Container in the definition tree view, for example, and open it using the context menu. NOTE: You will see different submenu structures in the context menu depending on which database object or which node types you have selected. 3. Select New node or select the new nodes as usual from the list of node groups in the context menu once you have select a custom object. - OR - 4. Select Object in extension New node if you have selected a VI_Standard object. - OR - 5. Press the STRG + N combination. This displays the New Node dialog box. 6. Select from the list the nodes types you want or enter the node type in the search box. 7. Click OK. The dialog box is closed and the new node appears in the definition tree view. Create Data Display The core task of a web application created with the Web Designer is targeted visualization and manipulation of database objects. The Create data display... wizard allows you to implement the three main tasks of a web application (setting up an object search, displaying a single object, displaying a group of objects) in a web project. NOTE: The wizard can be started from the context menu, but only from nodes that are permitted to have the relevant display (for example, containers). The following figure shows the wizard s startup screen with the main tasks for selection: Create object search The resulting form allows you to search for database objects based on specified search criteria and to display the results in a list. Create detailed display and input fields for single objects This results in a list of single database objects and allows you to change (overwrite) selected properties. Create a grid display for collection data The resulting table shows all properties of n database objects. Relations between single database objects can be displayed in hierarchical form. 74

75 Figure 27: Create Data Display Wizard Startup Screen Displaying Single Objects Use this wizard to include an edit mask into your web project. You can edit several properties of individual data set as a bundle. Use filters to limit how many objects are displayed. Data objects are not mapped in tables but in sections. Each individual data object from the selected or new collection is displayed in such a section (iteration). Therefore, each individual data object produces a data set and is displayed in a list. To view the object details NOTE: You must have already selected a database object. If you have selected an object, which belongs to the default version, you will find the wizard in the context menu under Element in extension. 1. Select a node of type Container in the Object definition view in the definition tree view. 2. Click the right mouse button and select Wizards Create data display... in the context menu. This displays the dialog box Create display data. 3. Select the display data Create detailed display and input fields for single objects and click OK. This opens the Source Selection view. 4. Select the option, Use existing collection, and the collection you want in the menu. The data object to be displayed are saved in this collection. 5. Enter a filter condition in Web SQL in Filter on to limit the search. 75

76 - OR - Select the option Create new collection and set the following: a. Check box Use display name: Check this if you want to use the display name. b. Base table: Select the table you want in Base table. c. Collection name: Enter a name for the collection in the text box. The data object to be displayed are saved in this collection. d. WHERE clause: Enter the WHERE clause definition in the SQL syntax editor. 6. Click Next. NOTE: The WHERE clause can also contain an internal variable as in the rest of the Web Designer (keyword "Web SQL"). In this case the SQL syntax editor cannot be used. The WHERE clause can still be added or edited after the wizard is closed. This opens the Select details view. 7. Mark the column you want in the list of available columns and click one of the button with arrow icons to select the columns. 8. Click Finished. NOTE: If the option Read-only is disabled, the property in the web application can only be edited with special permissions. You need to add another button once the wizard is complete, so that the changes can be saved in the database. The displayed columns are written as value list directly under the function node PropertyList(). The wizard creates the appropriate representation. NOTE: The list of editors is displayed on the web page under each other. To view individual data sets, you must change the container style in the definition tree view, which encloses the component VI_Common_PropertyEditor. Grid Display for Collection Data This part of the wizard creates a grid view for data from one or more collections. You can assign data object hierarchically in the process. That is why data objects that are defined as dependent (foreign key relation) on another database object that is stored in the same or another collection can be displayed in another layer. If you want to create a grid of this type you need to select the option Use foreign key relation. Select the option Use existing collection or Create new connection for grids that only contain one layer. NOTE: If the dependent data objects are in the same database table it may be referred to as a parentchild relation. This is really, however, a special case of a foreign key relation. In the first screen in this part of the wizard you configure the upper layer of the display first. Then the dialog box allows you to add further layers. 76

77 Figure 28: Grid Display Selecting the Collection For each layer, you need to specify whether a foreign key relation is going to be used or not. This only makes sense to select this option for the top layer if a parent-child relation is used for the relation definition. Select the collection property that the parent-child relation is mapped to, on the following screen. This screen is missed out if no foreign key relation should be used. You must enter a foreign key relation for any further layers that you define. 77

78 Figure 29: Grid Display Selecting the Foreign Key Relation Select the collection properties that are going to be displayed in the following step. Double click or mark and click the arrow to add the properties to the left hand column in the view (multi-select is possible using the CTRL key). This lists all the properties that will be finally contained in the grid. The order for displaying the properties in the grid (from left to right) corresponds to structure of the order from top to bottom. This order can be changed by marking a property in the structure and using the button with the arrow icon on the righthand side of the view. The wizard can also resolve foreign key relations for the current collection up a depth of 2 steps. For foreign key relations that are resolved in such a way, the property name to be displayed can be altered in the structure. You can now add the desired width for each column selected. Note here that mixing percent and pixel values can lead to unexpected results. The checkbox Use display names can be swapped between column names (that means column display values entered in the database) and database internal column names. 78

79 Figure 30: Grid Display Selecting the Properties to Display Subsequently, you can specify your own layout details and a caption for the current layer. The layer caption is only used help the search for properties that you may want to change later. Set the option Allow the user to sort columns if the users are allowed to sort database objects themselves. Then the grids can be resorted by clicking on the column title bar. The option Sort collection and specifying a property results in the database objects are initially sorted by this criteria. 79

80 Figure 31: Grid Display Layer Configuration This data completes the definition of the first grid layer. By clicking Finish, you open another page. This displays the grid layers that are already defined. You can edit or delete a layer by selecting it. Use the plus button to define more layers. Figure 32: Grid Display Displaying Existing Layers 80

81 After you have selected the plus button, the screen for selecting or adding a collection is shown. Configure the second and further layers in the same way as the first layer but always enter a foreign key relation. By selecting OK on this screen, the grid with all layer defined so far is created and the wizard is closed. Generating Mapping Definitions You can start the Mapping Generator wizard from the context menu but it is only available from nodes of the category Component references and call action. It is not necessary to be able to start the wizard from the Container (Link) node because the necessary mapping nodes are added immediately once the referenced component is selected. The wizard is started automatically when the component is initially selected in the case of all other components. After that, you first have to select the component to reference and then run the wizard. The mapping nodes are then added without opening another window. Use the node type from the category Component references to reference new components. Normally, you have to define additional information, which is expected by the referenced components, on the child nodes of type Node mapping, Function mapping and/or Collection mapping. If not all the expected mapping nodes are defined it results in compiler errors. The wizard assumes the task of loading the expected mapping nodes for the component to be referenced and automatically adds the component reference. Therefore, you do not need to manually check which mapping nodes are required. However, the mapping nodes added by the wizard can only be partially configured. So you do need to manually post process them. Detailed information about this topic Assigning Collections to Components Embedding Reports You can create a report to be saved in the database with Embed report... This wizard can be found in the context menu of the action node. The web application determines values for the report parameter, if required. The calculated report is displayed the web application. To embed a report 1. Select Wizard Embed report... from the context menu of the web project's action node in the definition tree view. The Embed report... wizard is opened with a list of reports. NOTE: Reports are created and edited with the Report Editor tool. 81

82 Figure 33: Report Embedding Wizard Select Report 2. Select a report from the list. 3. Click Next. This opens the next page of the wizard. 4. Click the button next to the text box you want to edit to define the parameters. This opens a dialog box for the selected input. NOTE: The data you enter depends on the report you selected. Normally, there is one primary key per parameter. Other, quite different types of parameter are also possible. If there are no parameter required for the report, the wizard display a prompt. 5. Enter a Web SQL expression in the text box. 6. Click Apply. The expression is moved to the other side of the wizard. 82

83 Figure 34: Wizard "Embed report" - Allocate Parameters, Example with Primary Key 83

84 Figure 35: Report Embedding Wizard Allocate Parameters, Example Fixed Value 7. Repeat steps 3 and 4 until all the parameters have been assigned. 8. Click Finish to close the wizard. As a result, the wizard creates a Compile report node and one called Forwarding. Forwarding is based on a default component. This takes over the task of displaying the report. NOTE: The web SQL expression used when the parameters were defined are saved in the definition tree view under the Compile report node and can be edited in the Node editor at any time. Linking to a Page Links can be set for certain Web Portal modules. Use the following template for setting a link: <BaseURL>/page.axd?ContextID=<Module name> To set a hyperlink to a specified page in the Web Portal 1. Use the base URL of the Web Portal instead of <BaseURL>. NOTE: This is saved in the system under the configuration parameter QER\WebPortal\BaseURL. 2. Use the name of the target module instead of <module name>. NOTE: If there are mandatory parameters, you must give values for these parameters. 84

85 Context parameters can be attached as parameters to the URL, for example, <BaseURL>/page.axd?ContextID=<module name>&<parameter name>=<parameter value> NOTE: If a user is not yet authenticated when the link is called, the Web Portal opens the login page, if necessary, before the linked page is called. Detailed information about this topic Declaring Configuration Keys in Modules and Components Basics of Web Designer Programming This section is all about the basics of Web Designer programming. Collections are explained here in detail, amongst other things. Node Types You will find a detailed description of node types in the Dell One Identity Manager Web Designer Object Model Documentation. WebSQL Definitions You can, perhaps must, select or customize data on many of the Web Designer node types. This data often comes from the database. However, you will not have direct access to the database due to the Model view controller architecture of the Web Designer programming model. Instead, you access it through the Web Designer's data layer. You can query this data layer with WebSQL, an SQL related language. Query Example with WebSQL You want to view the employees in your department in a grid. To view data 1. Load the necessary data from the database table Person into a Web Designer collection. 2. Enter the collection in the grid node. 3. Enter each attribute of an employee you want to view using the following WebSQL query:. FROM Colleagues SELECT CURRENT LastName Loading Collections WebSQL is the SQL language in the Web Designer. This language is used when loading and populating collections with data from the database. 85

86 To create a collection of type Define database collection 1. Enter the database table from which to load the data 2. Use a filter condition, like sqlcompare ("LastName", "Schm*", "string", "LIKE") to specify which data is loaded. - OR - NOTE: The filter condition is in WebSQL. This expression must be able to interpret a string from the WebSQL expression which is valid in database SQL. When collections are loaded, the result must be a valid condition in the WHERE clause of a SELECT statement for the queried database table. The same WebSQL expression can be valid for loading another table, such as Department. In this example, because Department does not contain a LastName column. Use the filter expression format(("lastname like '%{0}%'", FROM Var SELECT searchstring), to avoid the problem of loading an invalid WebSQL expression. NOTE: format is a WebSQL function. IMPORTANT: There are still more WebSQL functions for making strings and are recognized by their database management system as SQL. These WebSQL functions begin with the prefix Sql, as in SqlAnd, SqlOR, SqlCompare, SqlIn and so on. You can add an optional condition to the collection itself or to the node Load collection. To load data from a database table into a collection with the help of the action node Load collection Enter the collection into which to load the data. NOTE: To limit the data to load, you can enter an optional condition for a WHERE clause. You can specify this on the Load collection node. A WHERE clause on the action has precedence over one on the collection. The WHERE clause on the collection is only used if there is no WHERE clause on the action node. TIP: In the query window, you can query the WHERE clause used last time with the WebSQL function WhereClause("CollectionName"). Querying Data from a Collection You can query the collection at any point where you can enter an WebSQL expression. The collection must be visible to you. The following collections are visible for you in: Self-defined collections Virtual collections Collections in session modules WebSQL limited to access to SELECT statements INSERT, UPDATE and DELETE are not supported. JOINS are not supported either in WebSQL. 86

87 To define a WebSQL query FROM <Collection> SELECT [CURRENT] <Column> - OR - SELECT [CURRENT] <Column> FROM <Collection> The query listed first, has advantages by Intellisense because both the collection name and the column of the collection can be auto completed. IMPORTANT: If you query several columns, you must enclose the column names in curved brackets. This is normally not the case in database SQL. Example for a multi-column query WebSQL query: FROM Persons SELECT FirstName FROM Persons SELECT (FirstName, LastName) The WebSQL query relates to the collection. Persons is the name of the collection. LastName and FirstName are properties of a collection in WebSQL. You may often want to view several rows of a collection ( for example, the name of all employees loaded). For this, there are several Web Designer node types which iterate through a collection. If you want to reference the current data set within one of these iterations, use the WebSQL keyword CURRENT. Example for a multi-row query FROM Persons SELECT CURRENT FirstName There are also aggregate functions, which group rows of a collection together into a single value. Example for querying the aggregate value of a collection This query returns rows of the collection "Persons" FROM Persons SELECT Count(*) This query returns the minimum, maximum and average number of days FROM AttestationPolicies SELECT (Min(SolutionDays), Max(SolutionDays), Avg(SolutionDays)) Filtering Data from a Collection You can limit a query to the relevant rows by using a filter condition when querying a collection with WebSQL. Enter the keyword WHERE and a condition in the WebSQL SELECT statement. The condition is a comparison of one or more columns with a preset value. Example of a simple filter FROM AttestationPolicies SELECT Count(*) WHERE SolutionDays > 4 Example of a filter with nested WebSQL expressions You can nest WebSQL expressions. 87

88 FROM AttestationPolicies SELECT Count(*) WHERE SolutionDays > (FROM AttestationPolicies SELECT Avg(SolutionDays)) Example of a filter to use within an iteration You can filter also combine with the keyword CURRENT if you are in an iteration. FROM AttestationCase SELECT Display() WHERE UID_AttestationPolicy > (FROM AttestationPolicy SELECT CURRENT UID_AttestationPolicy) Example of a filter with a condition There are several places where you only enter a filter condition with WebSQL. If all employees are loaded in the collection "Persons" and you want to display men and women separately, proceed as follows: Define 2 grids, which loop on "Persons" and only differentiate by the filter condition : a. Gender = 1 b. Gender = 2 Functions WebSQL provides a lot of functions. The most important functions are described briefly in the following. See the Web Designer for a full description. CanDelete, CanInsert: These functions allow collection delete and insert permissions to be queried. CanEdit, CanSee: These functions allow collection edit and view permissions for individual columns of collection rows to be queried. Count(*): This function queries the number of rows in a collection. DbCount, Exists: Queries the number and existence of rows in a database table. This can be limited with a WHERE clause. Display, DisplayValue, DisplayValueLong: Queries the display values of a complete collection row or a special column of a collection row. Format: This function formats a string by entering a mask with wild cards and insert values. GetConfigParm: Returns the configuration parameter value with the given path. NOTE: To use the configuration parameter function, the session must be authenticated. This function cannot be used until the after the login page if the Web Portal is being used against an application server. IsNull, IsNullOrEmpty: Checking of undefined value or empty strings is allowed. 88

89 PrimaryKey: This function queries the primary key value for a row from a collection. Translate: Translates a string. SqlCompare, SqlAnd, SqlOr: This function allows conditions to be written in database SQL. Try: This function allows alternative values, if an error occurs during evaluation of a WebSQL expression. Collections Collections play an important role when you are using the Web Designer. The data contained in a collection is required for working the components. Data in a collection is stored in rows and columns as in database tables. A collection is referenced by name within a component or module. You can query collections in WebSQL. For more information,, see WebSQL Definitions on page 85. A component's data model defined with collections server as the basis for displays and further processing of data. The contents of collection can be loaded from the database but other data sources are also possible. Database Objects as Collection In most use cases, the database is the best data source for collections. All table defined in One Identity Manager can be used as data source for collections. Not all database table entries must be loaded in this case. Normally, you need to limit which data sets are loaded from the database with a WHERE clause on performance grounds. TIP: An object from a collection based on a database does not behave differently than an object loaded into other tools. All the database object's templates, formatting rules and access permissions are apply. To load a simple database based collection 1. Open the module or component to which to add the collection. 2. Select the Collections node with a right click. 3. Select the Database object option. 4. Click the new node. 5. Select the database table under Node type in the Node editor. 6. Enter the name of the new collection under Identifier. To load the contents of a database table 1. Select the Initializer node of the component with a right click. 2. Select the option Load collection in the submenu Data actions. 3. Click the new node. 4. Select the collection you want in the Node editor under Collection. 5. Enter an expression for a filter condition with the Filter condition property, if required. 89

90 Working with a Database based Collection Working with a database based collection includes adding properties or object as well as removing and delete objects from a collection or database. In the following, all important procedures are described, which affect a database based collection. To add a proxy property to a database based collection Proxy properties allow transparent use of database columns (base property) with modified metadata. Metadata includes: Name Description Specifying a property as mandatory or optional Structure for displaying the property value Component selection for displaying and editing property values You can modify a property within a component to match the requirements of the component exactly using proxy properties. Ensure the database of a proxy property is always the base property value. Updating the value through proxy properties always have additional effects on the base property. 1. Select a collection with a right click. 2. Select Proxy property. A proxy property is added under the selected collection node. 3. Select a property in Base property in the Node editor. NOTE: Replace this text with a description of a feature that is noteworthy. 4. Enter the name of the proxy property in Identifier. To add more proxy properties to a database based collection 1. Select a collection with a right click. 2. Select the option Property. 3. Enter a name and data type for this property. NOTE: Each object, which is in the collection at runtime, now has an additional property. You can handle this like a database based property, for example, to store temporary data. To add a new object to a collection 1. Select an action node with a right click. This could be the Initializer node of the component, for example. 2. Select Add. 3. Click the new node. 4. Select the collection you want in the Node editor under Collection. 5. Enter an expression for a filter condition with the Filter condition property, if required. 90

91 NOTE: Ensure the object is only added in the collection. To remove objects from the collection or delete them from the database 1. Select an action node with a right click. This could be the Initializer node of the component, for example. 2. Select Delete. 3. Select the new node. 4. Select the collection you want in the Node editor under Collection. 5. Select the value Delete row only from collection under Delete type, if you want to delete the object from the collection. - OR - 6. Select the value Delete database object and save under Delete type. 7. Enter an expression for a filter condition with the Filter condition property, if required. To save objects in the database 1. Select an action node with a right click. This could be the Initializer node of the component, for example. 2. Select Save. 3. Click the new node. 4. Select the collection you want in the Node editor under Collection. 5. Enter an expression for a filter condition with the Filter condition property, if required. Loading Database Object through Relations Data is linked in a database by relations to each other. You can use these relations to load data from the database in the simplest way. Prerequisite for using such a collection is a collection containing source data. There are different type of relations for defining a collection: Defining with foreign key relation: A foreign key relation helps automatically load those objects in a database view that were referenced by objects from another collection through a foreign key relation. Defining with child relation: A child relation helps automatically load those objects in a database view that reference objects from another collection through a child relation. To define a collection with a foreign key relation 1. Open the module or component to which to add the collection. 2. Select the Collections node with a right click. 3. Select Database view by foreign key relation. 4. Select the collection with the source data in Source data collection. 91

92 5. Select the foreign key column to create the relation to the target table in Foreign key column. 6. Enter the name of the new collection in Identifier. You do not have to trigger loading for this type of collection. The moment the data is available in the source data collection, the foreign key referenced objects are automatically loaded. To define a collection with a child relation 1. Open the module or component to which to add the collection. 2. Select the Collections node with a right click. 3. Select Database view by child relation. 4. Select the database table from which to load the objects in Object type. 5. Select the collection containing the objects to be referenced in Source data collection. 6. Select the foreign key column to create the relation to the target table in Child relation column. 7. Enter the name of the new collection in Identifier. You do not have to trigger loading for this type of collection. The moment the data is available in the source data collection, the referenced objects are automatically loaded. Loading Database Objects from Multiple Tables For different use cases, it is necessary to examine database objects from multiple tables together. The special collection type Database objects from multiple tables in the object model is available for this. To define a collection with the option "Database objects from multiple tables" 1. Open the module or component to which to add the collection. 2. Select the Collections node with a right click. 3. Select the option Database objects from multiple tables. 4. Enter the name for the new collection in Identifier. A collection like this is database based, but can accept object from multiple database tables. For more information about how to load data into the collection, see Database Objects as Collection on page 89. You must explicitly provide the database table from which the objects will be loaded. Using the Database Query Wizard NOTE: You can use the database query wizard in a module or component of a collection or when you want to add a new module or component. You cannot execute SQL statements directly in the Web Designer. Instead, this wizard helps you to create of SQL statement which are stored in the tables QBMLimitedSQL and QBMGroupHasLimitedSQL that are linked to at least one dialog group. Your own collection node is added for the query. To create or select a database query 1. Select in the navigation view, a module or a component. - OR - 92

93 Crate a new module or new component. 2. Mark the Collections nodes in the Object definition view within the definition tree view. 3. Click the right mouse and select the entry Wizards Database query wizard or Element in extension Wizards Database query wizard. NOTE: The navigation depends on whether you have selected a custom module/component or a default module/component. Default database objects first require an object extension. For more information, see Extensions on page 69. This opens dialog box Database query wizard opens. You can select an existing SQL statement for you database query or add a new one. 4. Select either New or Existing. 5. Edit the following data if you selected New: - OR - a. Collection name: change the predefined name My collection for the collection you are adding with this query. b. Identifier: Enter a unique identifier to be used later to identify this item. c. SQL expression: Enter the complete statement in the text box. You can also declare parameters. d. Description: Enter an explanation of this item in the text box. This makes it easier for other users to understand and sort out the statement. Edit the following data if you selected the option Existing: a. Collection name: Change the predefined name My collection for the collection you are editing with this query. b. Limited SQL: Select an existing snippet in the text box that you can use and change in the SQL expression box. c. SQL expression: Extend the selected snippet and preset parameter. 6. Click Next. The next view appears. All available parameter columns are selected. 7. Disable parameter columns you do not want to include or that were recognized by the parser parameter but are not correct. 8. Click Edit next to the selected parameter column. An SQL editor is open for the parameter column. 9. Enter a value for the parameter in the box. 10. Click Next. NOTE: You can check your database query with Test statement. However, you can only test statements were already there and have not be changed later. Otherwise the button is disabled. In this case, you must wait until the background database processes are complete, then you can test the new statements. The next view appears. Nodes necessary for initializing and loading the collection are created. The button Finished is activated once the process is complete. 93

94 11. Click Finish to close the dialog window. Loading a Historical Object State You can reset the state of a database object in a collection if you have enable recording of historical data in the database. To reset a database object to a previous state 1. Enter a database collection. For more information about adding a database collection, see Database Objects as Collection on page Add the action Load objects including history to an action node. 3. Select the collection on this node. 4. Select between two variations: a. SelectLoad a single object with its history to load the historical data for a single object. Here, you can enter an object key (XObjectKey), which uniquely identifies the object. b. Select Load table with history to load the historical table data. You can enter a column name and its value as limiting criteria here. NOTE: Once the historical object states are loaded as described, you can simply set the collection to any point in time within he loaded time period. 5. Add the action Set object to historical state on the action node. 6. Select the collection. 7. Enter the date in Date. The collection is set to the state, which was current at that time. Loading a Change History A change history contain a list of all operations recorded on a defined amount of data. You can load a change history into a special collection type designed for the purpose. To define a collection for a change history 1. Open the module or component to which to add the collection. 2. Select the Collections node with a right click. 3. Select Change history. 4. Enter the name for the new collection in Identifier. 5. Select the type of change history in Type. To load a change history 1. Select an action node with a right click. 2. Select Load change history. 94

95 3. Select the collection you want under Collection. 4. Select the type of change history defined on the collection in Type. NOTE: The setting in Type must be identical for the collection and the change history to be loaded. 5. Enter the date from which you want to load the change history in Load historical data back to (date). 6. Select one of the following variations to continue: a. Enter the object key's (XObjectKey) WebSQL expression of the selected object to load the change history of individual objects. b. Enter the table name of your choice, to load the change history for a table or an assignment object. NOTE: You can also enter the column name and value for a filter condition, optionally. TIP: Column-dependent references are recommended for displaying historical data. View Definitions A collection level view behaves like a database level view: The view content is defined with a WebSQL expression. The view is updated during runtime. The view is automatically updated if the source data changes. To add a view 1. Select the Collections node with a right click. 2. Select the action Add collection data view. 3. Enter the name for the new collection in Identifier. 4. Enter the Web SQL expression for representing the view in View expression. NOTE: Add a property with the matching data type for every view property in the Web Designer. Collections as Data Sources for Controls Some control types can load required data from the database themselves, assuming Database was selected as data source. The control type Tree load data from a database table depending on hierarchy level. First of all the root level is loaded; the second level, by expanding a node and so on. The control type Grid loads data depending on the selected page. If, for example, 20 entries are displayed per page, then initially only the first 20 database objects are loaded from the database. This reduces memory usage and the control can be displayed faster. Collection Events You can define actions to be execute if a specified operation is applied to the collection data. Events can be triggered by the following. 95

96 Table 17: Functions of Menu Bar, Tab "Edit" Operation Insert delete Update Bulk Description A single row was added to the collection. A single row was deleted from the collection. A single collection data value was updated. A set of rows was added to the collection or deleted from it. To define an event Select with right click the Event node in the module (or component) of your choice. Assigning Collections to Components Before you can assign a collection to a component, you must customize the component to make it suitable for the collection. You cannot assign the collection until these preparations have been made. To do this, the component requires a "virtual collection", which you will find under the component's Property node in the definition tree view. Collections are assigned in the "virtual collection". "Virtual collections" defined on components are marked as compulsory or optional. Compulsory "virtual collections" must be assigned to a location collection. This assignment is made where the component's usage is defined. Before you assign a collection to a component, a node must be configured under Collection mapping under the component. Collection mapping nodes are automatically assigned when a component reference is added. These nodes are added automatically but not configured. You configure them in the Node editor view. You can also add a Collection mapping node with the help of a wizard that you can call from the context menu. Another option for adding these nodes, is to add a single node that you can also access through the context menu of your component in the definition tree view. NOTE: The following instruction steps are based on an example of a direct container reference. To assign a collection to a component 1. Select the tab of the component or module in the definition tree view, in which you want to use a component of type container. 2. Select a container type node. 3. Click the right mouse button. 4. Select Component references Container (reference) from the context menu. NOTE: If you add a component reference, the subnodes for collection mapping are automatically added. If more nodes are required for collection mapping, you can either add a Collection mapping type node yourself or by using the wizard. Other nodes may be added when you add a node with the wizard. You can delete these afterward. 5. Select the component you want to reference in Identifier in the Node editor view. 6. Select Collection mapping in the definition tree view. 96

97 7. Select the collection you want in Virtual collection in the Node editor view. 8. Select the collection you want in Map to local collection. To define a virtual collection for a user defined component 1. Select a custom component to which you want to assign a collection. This displays the object in the definition tree view. 2. Select the node Property in the definition tree view. 3. Click the right mouse button. 4. Select Virtual collection in the context menu. A new virtual collection is added in the definition tree view. 5. Enter a name for the virtual collection in Identifier in the Node editor view. NOTE: Use the check box Object type and Cursor required to limit collection assignment further. Use Object type to ensure that the assigned collection must be a database collection of the given type. Use Cursor required to specify the point of the assigned collection which must be within an iteration above this. Declaring Configuration Keys in Modules and Components Figure 36: Allocating Module and Component Values to the Configuration Key in the Definition Tree To declare a configuration key for a module or a component 1. Click Object definition in the definition tree view and select the node Configuration. 2. Select Configuration section in the context menu. The new configuration section is listed in the definition tree view. 3. Mark the new configuration section. You can see that the new configuration section is selected with empty fields in Node editor. 4. Enter the names for the configuration section in Identifier and Description in Node editor. The configuration section is given this name in the definition tree view. 97

98 5. Mark the configuration section. 6. Select Parameter from the context menu. The new parameter is added under the configuration section. 7. Mark the new parameter. 8. Enter a name for the configuration key in Key. Example of a configuration key name: CCC_ConfigParm_Hyperview_HR 9. Enter the name given in Key in Identifier as follows: Example for input: translate('#lds#hr_hyperview_colums') 10. Enter the following text in Description that should appear on the Settings... tab under Details: Example for input: translate('#lds#choose Columns for HR-Hyperview') 11. Select the parameter type in Type and edit the configuration key as in the sections about parameter types. NOTE: You may have to edit more settings depending on which parameter type you selected. Declaring Context Parameters NOTE: You can only declare context parameter in modules. Figure 37: Allocating Context Parameter Values in the Definition Tree Context parameters are utilized in things like automatically generated s. These s contain a link referencing a fixed point in the web application. This option removes step-by-step navigation in the application from the user. 98

99 Example: Approving a request A manager receives an that an employee has been added and can request permissions. The contains a link to a custom request page with preset data of the new employee. To disable a context parameter for a module NOTE: You have already selected a module. In the above example, the module CCC_ITShop_Approvals is used. 1. Click Object definition in the definition tree view and select the node Configuration. 2. Open Configuration node. 3. Select the data object UID_PersonWantsOrg in the subnode Context parameters. Now you can edit settings for this context parameter in Node editor. 4. Edit the following settings in Node editor: a. Identifier: Predefined name of the selected data object. b. Check box Mandatory parameter: Enable this box is the parameter is mandatory. c. Type: Select the type of parameter in the menu. d. Comment: Enter the usage of this parameter in the text box. Detailed information about this topic Linking to a Page Executing Microsoft.NET Framework Code The web project defined in the Web Designer is translated by the compiler in C# language. This compiles the complete logic of the definition document into a directly executable Microsoft.NET Framework assembly. It is possible to incorporate your own C# source code into this procedure. This way, you have access to the complete functionality of various execution layers. In this section, it will be explained how you incorporate your own C# source code. Runtime API Web Designer objects written in C# code can be integrated directly into the object definition. This makes customizing the web application very flexible. The web project code uses the Web Designer runtime API. The runtime API supplies the following functionality, which is required for the web project: Managing database connections with VI.DB.dll Authenticating and authorizing HTTP traffic Web controls Debugging Web Designer interfaces The following diagram exemplifies the layer structure of components from the web project to the database. For detailed information about runtime API classes, see the file VI.WebRuntime.chm. 99

100 Figure 38: Integrating Code in Object Definitions In the Web Designer, you can insert a C# code snippet in the object's code with the node type Code snippet. // // <auto-generated> // This code is tool generated // Runtime version: // // Changes to this file may cause incorrect behavior and be overwritten when // the code is regenerated. // </auto-generated> // NOTE: Changes to the code remain intact even on regeneration, when you make them in the Web Designer. Integrating C# code into a WebSQL Expression You can integrate C# code into every WebSQL expression. This can be either a C# expression or a command string. 100

101 To integrate a C# expression into a WebSQL expression, enclose it in double curly brackets, as in the example: To integrate a C# expression into a WebSQL expression Enter the expression in double curly brackets. format ("The database user is: {0}", {{ _Connection.User.Display }} ) NOTE: More complex commands are also enclosed in double curly brackets. The return value of the embedded expression is labeled with the To integrate multiple C# expressions into a WebSQL expression Enter the expression in double curly brackets and use the format ("User is: {0}", {{ string display = display; }} ) NOTE: The must always be the last command in the embedded expression in this case. Access to Environmental Data The following statistical member variables are defined in all classes that can be modified by code. You can use these to gain access to the execution environment. Table 18: Name Type Description _UserSession VI.WebDesigner.Runtime.IUserSession User session _RuntimeForm VI.WebDesigner.Runtime.IRuntimeForm Form on which the code is executed. _RuntimeContext VI.WebDesigner.Runtime.IRuntimeContext Module in which the code is executed. _Connection VI.DB.IConnection Actual database connection Referencing Controls The generated Microsoft.NET Framework code creates a structure of ASP.NET controls. A local variable is defined for each control. The name of this variable corresponds to the identifier given to the Web Designer node. The local variable can be accessed directly from within the same method. Furthermore, all controls coming from the base class System.Web.UI.Control have an identifier (ID), which also corresponds to the Web Designer node identifier. This makes it easier to locate controls outside the visible range of the local variable. 101

102 Referencing Collections Data values can be loaded from or changed in collections using C# code. Local collections of a module or component are defined in the component's TableStore. Example: TableStore.GetTable("SomeCollection") NOTE: Virtual collections must use a slightly different call. Virtual collections are member variable of the class and can be accessed directly from the C# code using their name. Customizing Documentation There is a Help button in the Web Portal menu bar. The Dell One Identity Manager Web Portal User Guide can be open from this help function. The Web Designer gives you the option to extend the guide and to modify it with your Web Portal custom modifications. You can add text content as well as visuals and logos. To add a help archive, copy the current ZIP files (Help_WebPortal_DE.zip and/or Help_WebPortal_EN.zip) into the Web Designer directory. AutoUpdate keeps these up-to-date. Custom help is maintained as a ZIP file under the project files. If you are in the Project files part in the navigation view, The function Add help archive is available in the toolbar. This archive is required to make changes or extensions to existing default Dell One Identity Manager Web Portal User Guide. A new help archive is added in the definition tree view when you select this function. Select the project to which to assigned the help archive in the top part of the view. All existing projects are listed under Projects. Then enter the language of your choice. A file name is generated from the selected project and language. This file name cannot be configured. The lower part lists HTML documents, CSS documents and default help mappings. By double-clicking (or right-clicking from the context menu) on an HTML document, for example, you can assigned the custom help. The selected file can be edited using the function Export... You cannot edit directly in the Web Designer. After you have finished editing the file, you must import it again into the Web Designer. The imported file is immediately available. You can even add your own HTML documents to the help archive. Custom help files replace the files from the default help archive after processing. You cannot delete default help files. The help folders are regenerated if the help function is called in the Web Portal or if a help file is changed is one of the help archives default or custom). Existing help files are updated if a new version is loaded. Custom help files are not overwritten. 102

103 Figure 39: Help Archive You have the same function available to you when you right-click on a selected file as in the menu bar. You also have the option to change the file name. Figure 40: Help Archive Menu Bar Table 19: Functions in the Help Archive Menu Bar Icon function Delete Deletes the selected file after confirming the security prompt. 103