Banner Extensibility Handbook Handbook Release 9.2 June 2018 Notices Notices © 2017-2018 Ellucian. Contains confidential and proprietary information of Ellucian and its subsidiaries. Use of these materials is limited to Ellucian licensees, and is subject to the terms and conditions of one or more written license agreements between Ellucian and the licensee in question. In preparing and providing this publication, Ellucian is not rendering legal, accounting, or other similar professional services. Ellucian makes no claims that an institution's use of this publication or the software for which it is provided will guarantee compliance with applicable federal or state laws, rules, or regulations. Each organization should seek legal, accounting, and other similar professional services from competent providers of the organization's own choosing. Ellucian 2003 Edmund Halley Drive Reston, VA 20191 United States of America ©2018 Ellucian. Confidential & Proprietary 2 Contents Contents Page Builder.................................................................................................................................. 6 Security Model...............................................................................................................................6 Page Builder user security..................................................................................................... 6 Page Builder pages user security....................................................................................6 Page Builder developer user security..............................................................................7 Banner Administrative user security.......................................................................................7 Theme Editor user security.................................................................................................... 8 Pages.............................................................................................................................................8 Page Model.............................................................................................................................9 Component Model............................................................................................................ 9 Visual Components.......................................................................................................... 9 Visual Components without data association................................................................ 10 Visual Data Control Components...................................................................................12 Field type components................................................................................................... 14 Data and Control Components...................................................................................... 18 Component Attributes.....................................................................................................19 Component methods, Event handlers, and Interaction..................................................22 Component methods and Event handlers............................................................... 23 Implicit variables...................................................................................................... 24 Overview of reserved methods and properties in expressions................................25 Pre-defined Variables..................................................................................................... 27 Parameters...............................................................................................................27 Context root............................................................................................................. 27 Now.......................................................................................................................... 27 Repeating records in Grid/HTML table/Detail controls.................................................. 27 Expressions usage......................................................................................................... 27 Filters.............................................................................................................................. 28 Visual Page Composer.........................................................................................................28 Create or modify a custom page................................................................................... 28 Edit page using the page tree view........................................................................ 28 Edit page using the page source view.................................................................... 29 Compile and deploy a custom page.............................................................................. 30 Preview a page.............................................................................................................. 30 Duplicate a page............................................................................................................ 31 Extend a page................................................................................................................31 Delete a page.................................................................................................................31 Manage custom page security............................................................................................. 32 Assign role for access....................................................................................................32 Remove role from access.............................................................................................. 32 Enable the modified security..........................................................................................33 Configure a Home link for a Page Builder page.................................................................. 33 Manage custom stylesheets....................................................................................................... 34 Add new custom style sheet................................................................................................ 34 Add new custom style sheet – Alternate method................................................................ 34 View, modify, and delete a published stylesheet..................................................................35 ©2018 Ellucian. Confidential & Proprietary 3 Contents Use custom styles on a custom page..................................................................................35 Advanced custom stylesheet features..................................................................................36 Default stylesheet...........................................................................................................36 Banner XE style............................................................................................................. 36 RTL support....................................................................................................................36 Virtual Domain............................................................................................................................. 37 Virtual Domain definition.......................................................................................................37 Create a Virtual Domain....................................................................................................... 37 Modify a Virtual Domain....................................................................................................... 37 Deploy a Virtual Domain...................................................................................................... 38 Manage Virtual Domain security.......................................................................................... 38 Add a role to access Virtual Domain............................................................................. 38 Modify access privileges................................................................................................ 38 Remove access privileges............................................................................................. 39 Virtual Domain standards and guidelines.............................................................................39 Virtual Domain restriction..................................................................................................... 40 Source code management and application packaging...............................................................40 Page Builder reserved artifact names.................................................................................. 41 External files......................................................................................................................... 41 Export Page Builder artifacts................................................................................................41 Import Page Builder artifacts................................................................................................ 42 Import Page Builder artifact from local directory........................................................... 42 Import Page Builder artifact from server file system......................................................43 Properties files...................................................................................................................... 43 Maintain Security.........................................................................................................................44 User types.............................................................................................................................44 Roles..................................................................................................................................... 44 Page Builder developer user security.................................................................................. 45 Grant the object directly to the user.............................................................................. 45 Add the security object to a class................................................................................. 46 Assign class to the users...............................................................................................46 Page Security........................................................................................................................47 Virtual Domain Security........................................................................................................ 47 Page Builder Admin security................................................................................................ 47 Virtual Domain Admin Security...................................................................................... 49 Create new objects and assign to Admin users......................................................49 Grant users permissions for an object using GSASECR........................................ 51 Assoicate Admin Role to Virtual Domain................................................................ 51 Page Builder Admin Pages security exclusions............................................................ 52 Include or exclude object on Application Navigator menu.............................................52 Theme Editor............................................................................................................................... 53 Create a theme........................................................................................................................... 53 Theme branding elements....................................................................................................54 Theme actions.............................................................................................................................54 Template actions......................................................................................................................... 55 Upload a theme or template file................................................................................................. 55 Configure a Banner XE Self-Service application to use themes................................................ 55 Configure non-theme aware applications................................................................................... 57 Add JavaScript to the WAR file............................................................................................58 ©2018 Ellucian. Confidential & Proprietary 4 Contents Text Manager............................................................................................................................... 59 Upload application text to the database..................................................................................... 59 Example 1 - Build a Page Builder Validation Page ....................................................... 60 Example 2 - Page Builder.........................................................................................................71 ©2018 Ellucian. Confidential & Proprietary 5 Page Builder Page Builder Page Builder Page Builder is a tool to develop and run custom Banner 9 Self-Service Single Page applications in an intuitive and interactive manner. Page Builder uses the same technologies as Banner 9 Web Pages (Grails, Groovy, Spring, REST and Web Technologies like HTML, JavaScript, and AngularJS) under the hood. The tool provides a Browser front end to develop interactive and responsive Single Page applications productively, without the need to become expert in the technologies mentioned previously. This manual describes how to create, deploy, and maintain Banner custom pages and custom RESTful services using the Self-Service Page Builder. Security Model The Page Builder application is built on the Banner 9 Self-Service framework, using the same user interface components and other common plugins that are shared across the Banner 9 Self-Service applications. Page Builder user security The security model in Page Builder has two distinct roles – Page Builder Pages users and Page Builder Developers. Page Builder pages user security You can use the Page Builder application to apply page security to pages built with Page Builder. Page Builder uses the existing Banner Self-Service 8 role security. When building a new page, the Page Builder developer can assign Self-Service roles (from WebTailor) to the new pages to control which groups of users can access each page. You can also associate a Page Builder page with a Banner Admin object to apply Banner Admin security to thePage Builder page. The BANSECR security administrator can then assign privileges for the Page Builder page using the Banner Security Maintenance (GSASECR) page and the standard Banner security procedures. Users of pages built with Page Builder, who have Self-Service security roles assigned, must have the following IDs and permissions: • A Banner ID (record on SPRIDEN) • A login to Banner Self-Service (GOBTPAC or Third Party ID and password) • The necessary Self-Service role for the pages they access ©2018 Ellucian. Confidential & Proprietary 6 Page Builder Page Builder developer user security The Page Builder developer user uses Page Builder to develop new pages. The database installation scripts create the Banner GPBADMN object with the default role BAN_DEFAULT_PAGEBUILDER_M. Banner Admin users with access to object GPBADMN can use the Page Builder developer and administrative features. This role grants developer users the privileges required to execute SQL statements in a virtual domain. The role allows the security administrator to control Page Builder developer user access to the Banner tables. By default, the BAN_DEFAULT_PAGEBUILDER_M role only can access the database objects that are required to use Page Builder as a developer. A user needs additional grants to develop pages that access other objects through Virtual Domains. You control permissions for the Page Builderdeveloper user through the Banner Security Maintenance (GSASECR) page. This user must have the following ID and grant: • Banner Administrative ID (account created on GSASECR) • Grant for the GPBADMN Banner security object This security object is tied to the BAN_DEFAULT_PAGEBUILDER_M role. To control the Page Builder developer’s table access to specific tables, you can associate table privileges with the role. This allows you to restrict table access to the tables needed for development of the pages your institution wants to create. Banner Administrative user security You can define specific security rules for Banner administrative application users who use Page Builder. You can control a Banner administrative application user’s access to Page Builder pages by using the Banner Security Maintenance (GSASECR) page to associate a Banner Admin object to the Page Builder page and assigning privileges for that object to specific users or security classes. These users also require a grant for a virtual domain object to gain maintenance or query only access to the table used in the virtual domain. Banner administrative application users must have the following IDs and permissions: • A Banner administrative ID (account created on GSASECR). • Permission for the GUAGMNU object with a maintenance role (ban_default_m). • Grant for the Banner object that is associated with the specific Page Builder pages they access. You can use only ban_default_m to give a user permission to open the Banner page. • Grant for the Banner object that is associated with the virtual Domain used in the Banner pages they access. You can define the user with a grant for the page object using the standard banner roles: • • ©2018 ban_default_m - Gives user permission to access the page ban_default_q – User is not able to access the Page Builder page Ellucian. Confidential & Proprietary 7 Page Builder • ban_default_no_access – An overriding role used to prevent a user from accessing the object You can give the user a grant for the Virtual Domain Object to enable the display of data on the page as defined by the virtual domain associated with the Page: • ban_default_m - user can perform create, retrieve, update and delete if the virtual domain permits these actions • ban_default_q - user can only view data on the page regardless of the rule established in the virtual domain • ban_default_no_access - user cannot view data on the page Note: The ban_default_q role does not work if assigned directly to a Page Builder admin page. If a user needs Q access only, then you must associate the page needs with a Virtual Domain that has the ban_default_q role applied to it. Alternately, another version of the same page can exist which is tied to a virtual domain that has read-only privileges without the association with a virtual domain object. In this case the page is read-only. Theme Editor user security You can define security for Theme Editor users. Theme Editor users must have the following IDs and role. • Banner ID (SPRIDEN) • A login to Banner Self-Service (GOBTPAC or Third Party ID and password) • The WTAILORADMIN role Note: If your institution uses the Banner Default login (rather than Single Sign on) and there is a user who is both a Page Builder user and a Theme Editor administrator, that user requires both a Banner Admin ID and a SPRIDEN ID with a GOBTPAC PIN. You can tie these IDs together on GOBEACC. When you make that connection, the user can use the SPRIDEN ID and PIN for login, which gives the user the proper permissions for building Page Builder pages and administering Theme Editor. If the user uses the Admin ID for login, the privileges for Theme Editor will not be available. Pages The page model is a rendering platform agnostic data structure that contains page component definitions, component layout and hierarchy, component interaction, and backend resources for data binding. Custom page developers use the page model to define custom pages. Each page may contain multiple screens that can be displayed in a certain order defined in a screen flow. Each page can be persisted and compiled into a format suitable for the target rendering platform, after completing. At runtime upon request, the compiled page can be rendered for end users. ©2018 Ellucian. Confidential & Proprietary 8 Page Builder Page Model A page consists of components that are either controls that can be displayed on a page or data structures that are used by the visual components. Components are organized into a hierarchical component tree. The top-level component for any page is the page component. Depending on the component type, certain required attributes must be defined (for example, a resource component must have the binding attribute defined). You can define optional attributes for each component (for example, text component may have a validation attribute). A component may optionally have one or more child components (for example, a form component may have text component as a child). Component Model Each component may have attributes and child components. Each component must have a Type attribute that denotes the kind of component being defined. The following table shows the generic model for a component. Attribute Required Description Type Yes Component type – can be changed Name Yes Component identifier – must be unique within the page AttributeName 1 Yes or No Text, Number, Boolean, Map, Dropdown Visual Components A visual component represents something that can be displayed on a page – a paragraph of text, a block that groups some other components, a grid, a list, etc. A visual component may also represent controls that end users can interact with – a text input field, a check box, a button etc. Visual components are laid out according to the order in which they appear in the page component tree. Child components are displayed in the container (page, form, block, etc.) associated with their parent component. Sibling components are laid out according to the order in which they are defined. Visual components typically have attributes that: • define their appearances, for example, label, value, style, and showInitially • define the data binding, for example, sourceModel, and parameters • regulate user input, for example, required, and validation • define event handling, for example, onUpdate, and onClick ©2018 Ellucian. Confidential & Proprietary 9 Page Builder Visual Components without data association Component Required Type Attributes Optional Attributes page ©2018 Optional Child Component Description Top level container. • type • title • flow • name • scriptingLanguage • form • label • block • style • grid • importCSS • htable • Object Name (for admin security) • detail • select • radio Home Page URL • list • data • resource • literal • display • text • textArea • number • datetime • email • tel • link • boolean • button • object name (for admin security) • block Event handler and method ($method) • type • label • form • name • style • block • showInitially • grid • htable • detail Ellucian. Confidential & Proprietary The name is used as file name for properties files. Container to group related components. Block can be shown/hidden. 10 Page Builder Component Required Type Attributes form ©2018 Optional Attributes Event handler and method ($method) Optional Child Component • select • radio • list • data • literal • display • text • textArea • number • datetime • email • tel • link • boolean • button • type • label • submit • block • name • style • $dirty • grid • submitLabel • htable • showInitially • detail • select • radio • list • data • literal • display • text • textArea • number • datetime • email • tel • link • boolean Ellucian. Confidential & Proprietary Description Container to group related components with validation and submission attributes. Form can be shown/hidden and be part of a flow. 11 Page Builder Component Required Type Attributes Optional Attributes Event handler and method ($method) Optional Child Component • button label style Description button onClick Button to perform the onClick event handler when clicked. Visual Data Control Components These components provide a standard CRUD User interface for a RESTful resource defined with the model attribute. The components manage a collection of rows and in many cases, it is possible to switch from one component to the other (provided the supported child components and attributes match). Component Required Type Attributes Optional Attributes Event handler and method ($method) Optional Child Component Description grid • Grid data table to display and edit multiple rows in a tabular layout. htable ©2018 • type • label • onSave select • name • style • onSaveSuccess• data • model • parameters • onError • display • allowNew • $load • text • allowModify • $save • textArea • allowDelete • number • allowReload • datetime • pageSize • email • loadInitially • tel • newRecordLabel • link • deleteRecordLabel • boolean • saveDataLabel • literal • refreshDataLabel • hidden • select • type • label • onSave • name • style • onSaveSuccess• radio • model • parameters • onError • data • allowNew • $load • display • allowModify • $save • text Ellucian. Confidential & Proprietary Supports Column reordering, Column hide/ show and multiple column sorting. Data table to display and edit multiple rows in a HTML table layout. Adjusts Height to the number 12 Page Builder Component Required Type Attributes detail Optional Attributes Event handler and method ($method) Optional Child Component Description of records displayed. • allowDelete • textArea • allowReload • number • pageSize • datetime • loadInitially • email • newRecordLabel • tel • deleteRecordLabel • link • saveDataLabel • boolean • refreshDataLabel • literal • hidden • select • type • label • onSave • name • style • onSaveSuccess• radio • model • parameters • onError • data • allowNew • $load • display • allowModify • $save • text • allowDelete • textArea • allowReload • number • pageSize • datetime • loadInitially • email • newRecordLabel • tel • deleteRecordLabel • link • saveDataLabel • boolean • refreshDataLabel • literal • hidden A details control, often used to manage a single row in a collection. A paging control is shown when more rows are selected than visible. The list control component is a more basic component. Component Required Type Attributes Optional Attributes Event handler and method ($method) list ©2018 • model • label • onClick • value • style • onUpdate • labelStyle • onLoad • valueStyle • onError • allowReload Ellucian. Confidential & Proprietary Optional Child Component Description Component to display a list of values retrieved. List is read-only. 13 Page Builder Component Required Type Attributes Optional Attributes Event handler and method ($method) • parameters $load • required • pageSize • loadInitially Optional Child Component Description Field type components You can bind field type components to a Visual Data Control, directly to a resource field, or simply to the page. The following are only effective when the component is bound to a resource component; that is, the model has the form resource.field (for example, Todo.description): • Attributes parameters and loadInitially • event handlers – onLoad and onError • methods – $load, $save, and $dirty Component Type Required Attributes Optional Attributes Event handler and Description method ($method) text • type • label • onUpdate • name • style • onLoad • labelStyle • onError • valueStyle • loadInitially • value • $load • model • $save • parameters • $dirty • validation • placeholder • readonly • required textArea ©2018 • type • label • onUpdate • name • style • onLoad • labelStyle • onError • valueStyle • loadInitially • value • $load • model Ellucian. Confidential & Proprietary Input field for single line text data. Input field for mulchline text data. 14 Page Builder Component Type datetime email tel ©2018 Required Attributes Optional Attributes Event handler and Description method ($method) • parameters • $save • validation • placeholder • readonly • required • type • label • onUpdate • name • style • onLoad • labelStyle • onError • valueStyle • loadInitially • value • $load • model • $save • parameters • validation • placeholder • readonly • required • type • label • onUpdate • name • style • onLoad • labelStyle • onError • valueStyle • loadInitially • value • $load • model • $save • parameters • validation • placeholder • readonly • required • type • label • onUpdate • name • style • onLoad • labelStyle • onError • valueStyle • loadInitially • value • $load • model Ellucian. Confidential & Proprietary Input field for data (time is currently not exposed). Input field for email addresses. Input field for telephone number. 15 Page Builder Component Type number display link ©2018 Required Attributes Optional Attributes Event handler and Description method ($method) • parameters • $save • validation • placeholder • readonly • required • type • label • onUpdate • name • style • onLoad • labelStyle • onError • valueStyle • loadInitially • value • $load • model • $save • parameters • validation • fractionDigits • placeholder • readonly • required • loadInitially • type • label • onLoad • name • style • onError • labelStyle • valueStyle • value • model • loadInitially • asHtml • type • label • name • style • labelStyle • valueStyle • value • model • loadInitially Ellucian. Confidential & Proprietary Input field for number. Read-only text/html field. Page variables can be used. If Render as HTML is checked, html and JavaScript can be used. onClick Display a link to a URL or to invoke the onClick event handler. 16 Page Builder Component Type literal select radio boolean ©2018 Required Attributes Optional Attributes • asHtml • type • label • name • style • value • labelStyle • valueStyle Event handler and Description method ($method) Pre-formatted text field, HTML markup and page variables can be used. • type • label • onUpdate • name • style • onLoad • sourceModel• labelStyle • onError • labelKey • valueStyle • • valueKey • sourceParameters • model • required • placeholder • value • loadInitially Values and labels $populateSource are retrieved from the resource defined in sourceModel. The 'value' attribute specifies the initial value. The placeholder attribute is shown for a null value. • type • label • onUpdate • name • style • onLoad • sourceModel• labelStyle • onError • labelKey • valueStyle • • valueKey • sourceParameters • model • required • value • loadInitially Select from a list of choices using an option button group. Values and labels $populateSource are retrieved from the resource defined in sourceModel. The 'value' attribute specifies which button is checked initially. • type • label • onUpdate • name • style • onLoad • labelStyle • onError • valueStyle • $load • value • $save • model • booleanTrueValue • booleanFalseValue Ellucian. Confidential & Proprietary Select from a list of choices using a dropdown. Check box to select a binary value. The default value specified in the value attribute is used when creating new records and should match one of booleanTrueValue or booleanFalseValue. 17 Page Builder Component Type Required Attributes Optional Attributes • readonly • loadInitially Event handler and Description method ($method) The value attributes are ‘duck-typed’ by default. If it looks like a number (in English) or a Boolean (true/ false), the values are interpreted as a number or Boolean, otherwise it is interpreted as a string. Use a quoted text for string values true, false, 0, 1,… hidden • type • loadInitially • name • value • model A hidden field. For example, bound to an ID column. Data and Control Components These components define non-visual aspects of the page. Component Type Required Attributes Optional Attributes Event handler and Description method ($method) resource • type • resource • $post • name • staticData • $put Defines a RESTful resource or Static data for use on the page. One of the two attributes resource or staticData is required. Note: The Static Data entry control currently only supports two columns (as required for Radio/ Select controls). ©2018 Ellucian. Confidential & Proprietary 18 Page Builder Component Type Required Attributes Optional Attributes Event handler and Description method ($method) Use the Page Source View to edit the JSON data directly if you need more than two column Static Data. Methods $post and $put will post/put data to the RESTful API immediately. data flow • type • parameters • onLoad • name • loadInitially • onSaveSuccess • model • onError • $load • $save sequence activated A non-visual component that can be used to retrieve data and control other components. Flow defines a sequence of forms that can be executed sequentially. Component Attributes Component attributes define the layout properties, data binding properties, and validation properties. Attribute name Description Valid values Default value type Component type From list required documentation String for documentation purposes name Unique name to identify the component on the page. A letter followed by letters, digits, and underscores. Letters are limited to ASCII. None title Page title string None importCSS Name of custom stylesheets to be imported to this page. Comma separated custom stylesheet names (without the path or .css suffix) None ©2018 Ellucian. Confidential & Proprietary None 19 Page Builder Attribute name Description style The style classes to be CSS class names separated applied to this component by space. Style can also and its child components. be set dynamically using $<componentName>. $style= syntax None label Label for visual string component. Page variables can usually be referenced inside labels using the $ notation. This is not supported for Grid column titles. None showInitially To show a component after the page is loaded. true/false true submitLabel Label for the submit button of a page. string None nextButtonLabel Label for the next button of a page when rendered as part of a flow. string Next allowNew Specify if a new record true/false can be added for a grid or detail. false allowModify Specify if record can be modified in grid or detail. true/false false allowDelete Specify if record can be deleted in grid or detail. true/false false allowReload Specify if record can be reloaded in a grid, list, or detail. true/false false pageSize Specify the page size for components supporting paging. positive integer 5 required Specify if an input field on true/false a page is required. value Specify the value of a field or the default value. model ©2018 Specify the data binding property of a component. Ellucian. Confidential & Proprietary Valid values Default value false • valid JavaScript expression None • constant • Boolean • string • valid resource name None 20 Page Builder Attribute name Description Valid values • Default value valid object property name when parent is bound to a resource or resource.property when parent is not bound to a resource parameters Specify the parameters to use for the model. The parameters are sent to server as query parameters. Map providing key/value pairs. None Can refer to page variables using $ notation. validation Validation definition for a text input field. Map providing valid HTML validation strings (see below) placeholder Text to display in an string empty input field or select as hint. None sourceModel Resource to use to populate a select list or radio. valid resource name None See parameters None sourceParameters Parameters to use in the sourceModel resource. None staticData A collection of records [{key1: val11, key2: val12, …}, to be used to populate a {key1: val21, key2: val22, …} select list, radio or other …] control that can be bound to a resource. None labelKey Name of the label key for select list or radio. string None valueKey Name of the value key for string select list or radio. None booleanTrueValue Value mapping for a string Boolean control when the check box is selected. None booleanFalseValue Value mapping for a string Boolean control when the check box is cleared. true readonly Makes input field readonly. false resource Indicates the URL path valid relative URL, select from for a RESTFUL resource. list for Virtual Domain ©2018 Ellucian. Confidential & Proprietary true/false false 21 Page Builder Attribute name Description Valid values Default value activated Indicates if a flow is activated by default. true/false false sequence Indicates the sequence of comma separated form names None forms to be executed for a flow. loadInitially Indicate if data for a component to be loaded initially after the page is loaded. true/false true asHtml Indicates if the content of the DISPLAY component should be rendered as HTML segment. true/false false Warning! The data for the component should stem from a trusted resource as this may open up the application to XSS injection. Validate input data Server Side! Labels to override button labels in Visual controls bound to resource. • newRecordLabelLabels to override button labels in Visual controls deleteRecordLabel bound to resource. saveDataLabel • refreshDataLabel • • string Component methods, Event handlers, and Interaction Components reference data exposed by other components on the same page. Components may expose event handlers that can be invoked to update another component or the backend when a user makes changes to the component. Components may also expose methods that may be called by other components to update its content. Most of the components expose their data as page variables that can be referenced as $componentName throughout the page. The value entered into a text field named zipCode may be referenced in expressions on the same page as $zipCode. ©2018 Ellucian. Confidential & Proprietary 22 Page Builder Component methods and Event handlers The following table describes the methods and the event handlers that may be exposed by components. Name Description Method $load() Load data for a component (grid, detail, list, HTML table, data) bound to a RESTful resource. This function accepts an optional argument with the following attributes: • all • paging • clearCache Note: “all” means that no parameters are passed to the RESTful call (that is, no filter criteria). Example: $Employee. $load({all:false,paging:true,clearCache:true}); $save() Save data in a component (grid, detail, list, HTML table and data) bound to a RESTful resource. $populateSource() Load data for a select list or radio when its source is bound to a RESTful resource (can use $load as well). Event Handler submit Code to execute when a form is submitted. onUpdate Code to execute when a component is changed. Variable currentSelection is available in the event handler when item is a child of Grid, HTML table, Details. onClick Code to execute when a button, a link, or an entry in a list/table is clicked. Variables currentSelection and context are available in the event handler. New in 9.1: A use case for the onClick handler is to synchronize the details when a user clicks a record in the master grid or table. However, the onClick handler does not fire if the record change was caused by keyboard navigation. The onClick handler can now be used to handle a selection change due to keyboard navigation by including the string "selectionChanged" in the handler. For example, use: if (context === "selectionChanged") { ©2018 Ellucian. Confidential & Proprietary 23 Page Builder Name Description console.log('Grid On Click - selection Changed'+ currentSelection.ROW_NUMBER); } onLoad Code to execute when a data component is loaded. Variables data and response are available in the event handler. onSave Code to execute before or instead of the standard save processing. Return true in the onSave event handler to omit the standard save processing. Example: alert('Saving selected flight ' + $flight.flightNumber); onSaveSuccess Code to execute when a record is saved successfully. Variable response is available in the event handler. The value depends on the server response. Example: if (response.exportPage == "1") { alert( "Exported page: " + response.constantName, {flash: true}); } Warning! There is no event ‘all records saved’ and this handler is executed for every record successfully saved. The {flash: true} argument in alert assures the notification disappears after a short time. onError Code to handle errors in loading and saving for RESTful resources. Variable response is available in the event handler. Example for alert after load error: alert(response.data.errors[0].errorMessage, {type:"error"}); Example for alert after save error: alert(response.data.errors.errorMessage, {type:"error"}); Implicit variables Many controls implicitly have a number of associated variables. The so called DataSet controls are controls for which the data are essentially an array of key/value pairs, usually bound to a RESTful resource. The following controls are DataSet controls: ©2018 Ellucian. Confidential & Proprietary 24 Page Builder • Select • Radio • Details • HTML Table • Grid • List The DataSet controls expose the following properties. Name Example Example value (JavaScript notation) $control $Employees {ename: "JONES", empno: 1} The value of the control is either the first record in the data set or the last selected record for array types. For selects and radio groups, the internal value, pointed to by the valueKey attribute, is exposed. $control.$data $Employees.$data [{ename: "JONES", empno: 1},{ename: "DOE", empno: 2}] $control.$selection $Employees. $selection [{ename: "JONES", empno: 1}] The selected record(s) in the control. Can be an empty array if no record has been selected. $control.$selected $Employees.$selected {ename: "JONES", empno: 1} The selected record. Equivalent to the $control for array types (Details, HTML Table, Grid and List). This can be used to access the selected record for components that do not expose the record with $control like select and radio controls. Overview of reserved methods and properties in expressions In the type column in the table below, R indicates Readable and W indicates Writeable. Type PageBuilder reserved Controls Method $Control $Load() Grid, HTML Table, Detail, Data. This function accepts an optional argument with the following attributes: all, paging, and clearCache. ©2018 Ellucian. Confidential & Proprietary 25 Page Builder Type PageBuilder reserved Controls Example: $Employee.$load({all: false, paging: true, clearCache: true}); Note: all means that no parameters are passed to the RESTful call (that is, no filter criteria). Method $Control. $populateSource() Options, Select – same as load to populate the Source Model Method $Control.$get() Grid, HTML Table, Detail, Data Method $Control.$save() Grid, HTML Table, Detail, Data Method $Resource.$post( data ) RESTful Resource (immediately posts data to the RESTful api) Method $Resource.$put( data ) RESTful Resource (immediately sends a put request with data to the RESTful API) Property R $Control.$data Grid, HTML Table, Detail, Data Property R $Control.$dirty Grid, HTML Table, Detail - true if modified Property RW $Control.$visible Form, Block Property RW $Control.$style Visual controls Property R $Control.$selection Grid, HTML Table, Detail Property R $Control.$selected Select, Radio, Details, HTML Table, Grid, and List PB property R $$params Global – see next section PB property R $$contextRoot Global – see next section PB property R $$now Global – see next section (New in 9.1) PB method $$activateFlow(flow) Global PB method $$activateForm(formName) Global PB method $$nextForm() Global PB method $$activateNextForm() Global PB function $$findFlow(flow) Global ©2018 Ellucian. Confidential & Proprietary 26 Page Builder Pre-defined Variables Parameters You can access the parameters object with $$params. When invoking a page, parameters can be passed using standard HTTP GET parameter passing syntax. For example, if the page is invoked with <pageUrl>?param1=a, then in the page event handlers and expressions, you can access the value of param1 using $$params.param1. When building a page flow with multiple pages, you can use this to pass information in the flow. Context root You can access the context root with $$contextRoot. This allows to construct URLs to Page Builder pages without making the page deployment specific. The parameter can be used in the URL property of links and in other properties where expressions are allowed. Now You can use the current date time with $$now. You can, for example, also use it setting a default value for a datetime component. The value is set when the page is loaded, if the exact time is important this variable may not be accurate enough. Repeating records in Grid/HTML table/Detail controls In Grid/HTML table and Detail controls, it is possible to refer to the currently rendered record as $item. This can be used for combining information from multiple fields in a literal. See the Filters section below for an example. Expressions usage Expressions allow the use of variables in event handlers, the value attribute of literal and display controls, and in the label attribute of controls with some restrictions (not for the label attribute of Grid children). For expressions that will be used in the page layout, Ellucian recommends to use {{ expression }} for interpolating the expression as the compiler is not always able to determine the boundaries between expressions and literal text correctly. The double curly braces have to be used for expressions that use multiple variables, function calls, operators etc. Event handlers should not use the double curly braces. ©2018 Ellucian. Confidential & Proprietary 27 Page Builder Filters Filters can be used for formatting numbers in a literal value. Total payment: {{$item.SAL +$ item.COMM | number:2}} In the double curly brace expression, the two values are added and piped to the number filter, which will format the result as a number with two digits. This is an example where the use of curly braces is mandatory. Visual Page Composer Use Visual Page Composer to create, edit, compile, or delete custom pages. You can start the tool from the landing page of the application when the standard deployment options are used and the landing page is not customized. Alternatively, you can also start Page Builder tools from the Banner menu if it is installed. The URL of the Visual Page Composer is http://localhost:8080/BannerExtensibility/ visualPageModelComposer if the application is running on the developer machine with context root BannerExtensibility. Create or modify a custom page Click New Page or use the Load Page drop down to load an existing page. Edit page using the page tree view The page tree view displays the page source as a tree structure. About this task Click Page Tree View in the Page View pane to display the page tree view. In the page tree view, all components are displayed as nodes in a tree. A component node is displayed as component name [component type]. All child components are indented. The root node is the page component. The following operations can be performed in the page tree view: Procedure 1. Expand or collapse a component structure by clicking the + or – signs in the tree. 2. Edit a component’s attributes. a) Click on a component node to highlight the component and display the attributes of the component in the Component Property View in the right pane. • ©2018 The mandatory attributes are marked with an asterisk. Ellucian. Confidential & Proprietary 28 Page Builder • The attributes that represent a literal string for displaying on a page (thus will be made translatable) are marked with a circle. • For multi-line text, map and array types of attribute, the summary of the value is displayed and a button with ellipses is displayed. b) Click the ellipses icon to bring up an editing box where the attribute can be edited. 3. Click the icon beside a component to insert a new sibling component immediately preceding this component. A dialog box displays for the user to select a valid component type. The valid component type is determined by the parent component type. After the component is created, it will be highlighted and its attributes can be edited in the Component Property View. 4. Append a child component. a) Click the icon beside a component to append a new child component. The new component is added as the last child component of the current component, and a dialog box displays for the user to select a valid component type. The valid component type is determined by the current component type. After the component is created, it will be highlighted and its attributes can be edited in the Component Property View. 5. Reposition component. a) Click the or icon beside a component to move its position relative to its sibling components. The position is important because it determines the component layout sequence. 6. Delete a component. a) Click the beside a component to delete the component and all its child components. 7. Copy a component. a) Click the beside a component to copy the component and all of its child components to a temporary storage. This content can be inserted later to a different position in a page. 8. Insert copied component as a child. a) Click the button beside a component to insert the copied component as a child of the current component. This button only appears when a component has been copied. Copied component can also be inserted into different pages. Edit page using the page source view The page source view displays the page source as text. Procedure 1. Click Page Source View on the Page View pane. ©2018 Ellucian. Confidential & Proprietary 29 Page Builder This displays the page source view. 2. Note: The page source is read-only by default. To edit the page source, click Enable Editing. 3. Edit the page source JSON definition directly in the page source view. Page source can also be pasted into the editing area. 4. After editing is completed, click Apply Changes. This will parse the page source, apply the new page definition, and return the page source view to read-only state. 5. Click Discard changes. This will discard any changes made and return the page source view to read-only state. Tip: When the page source is in an editable state, the Compile and Save button is disabled. Compile and deploy a custom page Pages need to be compiled into HTML and JavaScript and persisted before they can be rendered. Procedure 1. To compile and persist the page, click Compile and Save in the Page Composer. If the page compiles successfully, you will see a message box confirming that page has been successfully compiled. Note: At this point, the page source and the compiled pages have been persisted in the database and are ready to be rendered. If there are errors in the page source, then you will see error messages in the message box. 2. Correct the error and try to compile again. The compilation result is also displayed in the status window at the bottom of the composer. Preview a page Follow these steps to view a compiled page. Procedure 1. Load the page. 2. Compile and save it. 3. Click Preview Page. ©2018 Ellucian. Confidential & Proprietary 30 Page Builder Duplicate a page Follow these steps to duplicate a page. Procedure 1. Load the page. 2. Click Save As. 3. Modify Page Name to a duplicate page name. 4. Click Compile and Save. This creates a duplicate page. Extend a page Follow these steps to extend a page. Procedure 1. Create a duplicate page as described in Duplicate a page on page 31. 2. Choose the original page in the Extends field. 3. Compile and Save the page to create the extension. 4. Perform the changes you need in the Extension page model. When you compile and save, the page saves using a delta format. The system merges these changes with the parent model when it loads the page from the data store. This makes the extension page inherit all components from the base page with possible overrides and new components defined in the extension. Changes in the base page are reflected in the extension the next time the model is loaded in the Visual Composer. Note: The combination of a changed baseline component ordering and a reordering in an extension does not necessarily look like the best possible combination to a human – it is questionable if there is a single best way to solve this algorithmically, so we have chosen for simplicity. If the result is not satisfactory, you can modify the extension to a different layout. Delete a page Follow these steps to delete a page. Procedure 1. Load the page. 2. Click Delete Page. Warning! You cannot recover a deleted page unless you export or backup the page before you delete it. ©2018 Ellucian. Confidential & Proprietary 31 Page Builder Manage custom page security You manage custom page security on the Page Roles assignment page. Use the page to assign and remove role access to specific Page Builder pages. Assign role for access You control which users can access a page by assigning which roles have access to a Page Builder page. Procedure 1. Access the Page Roles assignment page. 2. Click Refresh before editing a newly created and saved page role. 3. On Page, select the page for which you want to assign access. 4. Click Add New. 5. On Role, select the role you want to access this page. The list includes the following roles: • All the roles defined in Banner Web Tailor • A role for the Page Builder Developer *Page Builder Developer Tools • Two pseudo roles *Guest and *Authenticated Self Service user, users implicity have one of these roles depending on whether or not they sign in • A role for the Banner admin object if the page has been associated with an object on the Virtual domain composer (the Object Name field on the Page component) 6. Click Save. Remove role from access You can remove a user's access to Page Builder pages by. Procedure 1. Access the Page Roles assignment page. 2. On Page, select the page with roles that you want to remove. 3. Clear the Allow Access check box for that role. 4. Click Save. ©2018 • You can later select this box to re-assign the access privilege to this role. • You can permanently remove this role assignment by selecting the Delete check box and then saving the change. Ellucian. Confidential & Proprietary 32 Page Builder Enable the modified security To enable the modified security, click Apply page roles. The applied page roles section lists the effective spring security roles for the page. Note: Page security only controls whether a user can access a page or not. The security setup for the Virtual Domain resources controls the data access rules. Configure a Home link for a Page Builder page A Page Builder developer can define the home link URL for a specific page. When a user clicks the home link (institution logo), they are directed to that URL. Before you begin Tip for Page Builder developers: While you are developing a page and testing it, leave the Home URL field blank so that you will return to the Page Builder landing page when you click the home link. About this task When configuring a home link URL for a specific Page Builder page, this URL takes precedence over the URL that is configured at the application level in the configuration.groovy file. If a page-specific home URL is not defined, the application level home page (Page Builder landing page) displays when a user clicks the home link. Procedure 1. Open the Visual Page Composer. 2. Open the page where you want to configure the home URL. 3. On Home URL, enter the URL address to use as the home page. 4. Save the change. 5. Test the link by accessing the page you changed and clicking the home link. Make sure that the link launched the page that you entered in the URL Home field in a previous step. What to do next Users can navigate back to the original page using the Self-Service menu. If it is a Banner admin page, then access it using the Application Navigator menu. Note: When users access Page Builder pages in App Nav, they can navigate to the URL that is integrated with it, for example, http://ellucianuniv.com:8888/StudentRegistrationSsb? hideSSBHeaderComps=true for registration or http://ellucianuniv.com:8888/BannerExtensibility/ themeEditor for the ThemeEditor SS landing page. Users cannot navigate to an application URL that is not configured with App Nav. ©2018 Ellucian. Confidential & Proprietary 33 Page Builder Manage custom stylesheets Page Builder provides a number of pre-loaded stylesheets for use in the custom pages. For example, the Twitter Bootstrap stylesheet is available. You can reference all CSS classes in the style attributes of visual components. Add new custom style sheet If you want to use custom defined styles, you can upload the stylesheets and make them available to custom pages. Procedure 1. Log on to the CSS Manager page. 2. Enter a name for the stylesheet. The name must consist of characters that are valid for URL path (alphanumeric, underscores, and dashes). The name is used for importing the custom stylesheet to a custom page. 3. Optional: Enter a description for the stylesheet. This is for documentation purposes only. 4. Enter the CSS class definition in the Stylesheet Source field. 5. Click Save Stylesheet to save the stylesheet to the server. This will make the stylesheet available to the custom pages. Add new custom style sheet – Alternate method You can upload an existing stylesheet directly to the server. Procedure 1. Log on to the CSS Manager page. 2. Click Upload Stylesheet. 3. Enter a name for the stylesheet. The name must consist of characters that are valid for URL path (alphanumeric, underscores, and dashes). The name is used for importing the custom stylesheet to a custom page. 4. Optional: Enter a description for the stylesheet. This is for documentation purposes only. 5. Click Browse to select a stylesheet file for uploading. 6. Click Submit. 7. Click Finished after all files have been uploaded. ©2018 Ellucian. Confidential & Proprietary 34 Page Builder View, modify, and delete a published stylesheet Perform the following steps to view and modify a stylesheet. Procedure 1. Select the stylesheet from the Load Stylesheet list. The description and content of the stylesheet displays. 2. Modify the content as needed. 3. Click Save. If you change the stylesheet name and then save the change, the content will be published under the new name, but the old stylesheet is not deleted. 4. To delete a stylesheet, select the stylesheet from the Load Stylesheet list. The description and content of the stylesheet displays. • To delete a stylesheet, click Delete Stylesheet. • To clear all fields on the page, click New Stylesheet. • To discard changes made to a stylesheet that have not been saved, click Reload Stylesheet. • To refresh the list of the stylesheets, click Reload Stylesheet List. Use custom styles on a custom page You can apply custom styles to a custom page. Procedure 1. Import the stylesheet to the page. To do this, you need to specify the stylesheet name (as they were saved) in the importCSS attribute of the page component. 2. Use comma to separate multiple stylesheet names. Take care not to enter any URL path or the .css suffix to the names. All custom stylesheets load after other preloaded stylesheets; so in case of conflict, custom styles will take precedence. Stylesheets load in the order they are imported. 3. To use one or more classes defined in custom stylesheet or preloaded stylesheet for a component, specify the CSS class name in the Style attribute of the component. You can also dynamically change the style of any components by using the $componentName. $style syntax in any event handlers. ©2018 Ellucian. Confidential & Proprietary 35 Page Builder Advanced custom stylesheet features You can use advanced features to style Page Builder pages to look like Banner XE components. Default stylesheet Every page includes stylesheet pbDefault before any stylesheets specified in the page. This stylesheet has basic styling for pages and can be customized as desired. During compilation, the system checks for the existence of stylesheets and includes them if they exist. When you create a stylesheet after compilation, you must recompile the page for Page Builder to recognize the new stylesheet. Banner XE style You can style the Page Builder controls to look like Banner XE components. 1. Import xeStyle in the Style field in your page. 2. Buttons need additional styling: Choose Primary or Secondary in the Value Style field. RTL support You can include direction specific CSS script within tags as shown here. /*ltr-start*/ padding: 4px 0px 4px 2px; margin: 0.1em 0.1em 0.1em 0.1em; /*ltr-end*/ /*rtl-start*//* [RTL equivalent script should go here] *//*rtl-end*/ If the direction is RTL, the script between /*ltr-start… ltr-end*/ will be commented out and the script between /*rtl-start*/ and /*rtl-end*/ will be uncommented. Furthermore, it is possible to use substitution variables with direction (locale) dependent values: • Direction = LTR (English and most other languages) – $start = left • – $end = right Direction = RTL (Arabic, Hebrew) – $start = right – $end = left This CSS feature is Page Builder specific and only works for CSS files maintained in the CSS Manager. ©2018 Ellucian. Confidential & Proprietary 36 Page Builder Virtual Domain Virtual Domain provides users a familiar way of entering custom business logic for custom pages. Business logic in the form of SQL can be entered as virtual domain definition and exposed as RESTful services that can be used to bind data between custom page components and the backend. Virtual Domain definition A virtual domain definition consists of a collection of SQL statements that will be mapped to the GET, POST, PUT, and DELETE operations of a RESTful service. Bind variables in SQL code will be exposed as RESTful API parameters. The following convention applies to the virtual domain definition: • • • GET retrieves a list of objects and return the list. POST or PUT sends data update to the backend. Nothing is returned if the update is successful. DELETE sends resource id to be deleted. Nothing is returned if the update is successful. Create a Virtual Domain Use the Virtual Domain Composer to create a virtual domain. Procedure 1. Open the Virtual Domain Composer page. (Link to the page is typically, http:// <host>:<port>/BannerExtensibility/virtualDomainComposer) 2. On Save Virtual Domain Definition, enter a unique name for the new virtual domain composer. The name must be a valid URL path fragment. 3. Enter the SQL code to be executed for the RESTFUL GET operation. 4. Optional: Enter the SQL code for POST, PUT, and DELETE. 5. Click Save Virtual Domain Definition to save the new definition. Modify a Virtual Domain Use the Virtual Domain Composer to modify a virtual domain. Procedure 1. Open the Virtual Domain Composer page. (Link to the page is typically, http:// <host>:<port>/BannerExtensibility/virtualDomainComposer) 2. On Load Virtual Domain Definition, select a virtual domain definition. ©2018 Ellucian. Confidential & Proprietary 37 Page Builder 3. Modify the virtual domain definition. 4. Click Save Virtual Domain Definition to save the modified definition. Deploy a Virtual Domain After you save a virtual domain in the composer, Page Builder automatically deploys and exposes it as a RESTful resource. However, you must grant privileges to the roles for users to access the virtual domain. Manage Virtual Domain security To manage access privilege to a virtual domain, log on to the Virtual Domain Roles page. Select the virtual domain you want to manage from the Virtual Domain list. Add a role to access Virtual Domain Perform the following actions to add a role for accessing the virtual domain. Procedure 1. Click Add New. This adds a new row. 2. Select the role you want to assign access to this page from the Role drop down list. This list contains all roles defined in Banner. 3. Click Save. Modify access privileges Perform the following actions to modify the access privileges of a particular role. Procedure 1. Select or clear the following check boxes: • Allow All • Allow Get • Allow Post • Allow Put • Allow Delete 2. Click Save. ©2018 Ellucian. Confidential & Proprietary 38 Page Builder Remove access privileges Perform the following actions to remove role access privileges for a virtual domain completely. Procedure 1. Select a role and click Delete. 2. When ready, click Save. This will save and enable the changed roles. Virtual Domain standards and guidelines Ellucian recommends that you use the following guidelines when using and creating virtual domains for CRUD operations. When developing and testing Virtual Domains, Ellucian highly recommends that you turn on debugging for Virtual Domains. This will allow the developers to see SQL errors rather than a generic error message. This is achieved by uncommenting the debugRoles setting in BannerExtensibility_configuration.groovy. Refer to the Banner Extensibility Installation Guide for details. Users without a role listed in debugRoles will not be able to see any standard Oracle errors; but user defined error messages can be exposed to end users using annotation @USERMESSAGE: in the message for raise_applicaton_error. Any text between @USERMESSAGE and the end of the message or text ORA- will be exposed. Example: "raise_application_error (-20000, 'This part is only visible in the logs and for users with a debug role. @USERMESSAGE An entry already exists for this virtual domain and role' )". In the Query Statement, one unique record identifier field needs to be selected and aliased with lowercase "id". Examples: • • rowidtochar(SPRADDR.ROWID) "id" Id for data from 2 joined tables: empno||','||deptno "id" The IDs are hexadecimal encoded to avoid URLs that are not valid when the ID is passed on the URL in a RESTful http operation. Data and parameters are passed from the browser to the virtual domain service. Parameters are passed as URL parameters. Data is passed as JSON payload. The virtual domain service returns JSON data or only a status message depending on the HTTP action. Parameters in Page Builder components are available in the virtual domain query statement as lowercase bind variables. Use bind variable :id in DML statements to perform operations on the record(s) obtained in the select statement. ©2018 Ellucian. Confidential & Proprietary 39 Page Builder Bind variable :parm_user_pidm is available when a user has signed in. Columns from the Select statement are available as bind variables in the SQL. Review the JSON data which can be retrieved with the Test feature after select privileges are available for the developer user. The available data bind variables in a post and put statement correspond to the field names in the JSON payload of the corresponding requests. If the JSON shows { ROW_NUMBER: 1, FX: “Field X value” }, the SQL or PL/SQL in the Post or Put statement can refer to bind variable :FX to save the value of the bind variable in the database. Note: Bind variables are case sensitive in the query! If your select retrieves uppercase column names, you would use uppercase bind variables in the corresponding Post and Put statements. Validate input and assure a user has the right to perform DML on the records submitted. IDs and other data in the JSON payload can be manipulated by malicious users, even when the UI does not expose the data. Aliasing columns can cause Oracle exceptions with sorting in the grid component because Oracle does not allow order by at the same query level as the aliasing. If column aliases are desired, they can be added in a sub-query. Select statements with case sensitive column aliases (alias with double quotes) will not support sorting by the users in a grid (implementation restriction). Sorting on the ID column (first bullet) is not supported, and Ellucian recommends not exposing this column. While developing and testing virtual domains, it is useful to use the browser developer tools and look at the XHR requests in the network section available in browser developer tools. Virtual Domain restriction Currently, the virtual domain create operation does not return the created record. If a new record is created in a virtual domain, and the virtual domain has an auto-generated ID, the record in the client side model will not be aware of the generated ID before the data are refreshed. As a result, an update operation on a freshly created record will fail if the application does not actively update the model with the server side data. Virtual Domain statements to change data (Post, Put, Delete) must use one or more bind variables even if there is no need to use a bind variable. In most cases you want to use bind variables to address a particular row in the database, or use data from the Model properties in the control, and there is no issue. If you do not need a bind variable because, for example, you only want to raise an exception, you can add a statement that has no effect using :id. Example: If :id=null then null; end; Source code management and application packaging Page Builder stores all editable artifacts in a database (schema sspbmgr). You can export and import pages, virtual domains, and CSS to publish applications or move applications from test to production. Page Builder currently does not have a way to categorize ©2018 Ellucian. Confidential & Proprietary 40 Page Builder pages other than by using a naming convention. Ellucian recommends using a naming convention if you need to package applications consisting of many pages. Page Builder reserved artifact names Page Builder includes a number of pages built with Page Builder. The pages are the landing page and pages to perform administrative or development tasks. The naming convention is to start the name with pbadm. The landing page can be customized, but Ellucian does not recommend modifying other artifacts named like pbadm*. When a pbadm page is modified and needs a properties file modification, Page Builder creates a properties file in the externally configured directory. From then on, it does not use the internal properties file(s) for this page and property file translations need to be provided for locales other than the root locale (the texts used in the page). Page Builder upgrades may overwrite pbadm* pages without warning, make sure to back up the pages if any modifications are made. External files Page Builder supports exporting and importing artifacts to and from JSON files and creates properties files when pages are compiled. The JSON files can be located on the application server or on the client file system, properties files are created on the server. The server file locations are specified in the application specific configuration (refer to the Banner Extensibility Installation Guide). A different location can be configured for each artifact type. If no locations or non-existing locations are configured, the application creates temporary directories on the application server used for JSON files in import and export, and for properties files. Export Page Builder artifacts You can export Page Builder artifacts to JSON files (with extension .json) for import in another environment by using the links on the landing page. These links navigate to Page Builder pages pbadm.ExportCss, pbadm.ExportPages, and pbadm.ExportVirtualDomains. Procedure 1. Enter a pattern or exact name in the Name Filter. For example: % for all artifacts. For CSS and Virtual Domain exports, you can use filter “Used by page like” to find artifacts used by specific pages. For example: PageModel% If artifacts match the filter(s), the matches are listed in the grid. 2. Click the link under Download to export and download a single artifact. ©2018 Ellucian. Confidential & Proprietary 41 Page Builder 3. Export multiple artifacts. 4. If needed, change the Export Target. If Download to client is used, the client OS and browser settings determine where the files are saved. 5. Select the Select for Export check box for specific artifacts. Or Click Select all for export to select all artifacts matching the filter(s). You can click Clear Selection to clear the check boxes for a fresh start. 6. Click Export to start the download or export to the server file system. You can use the files for backup before an upgrade, versioning, and migration between environments. Import Page Builder artifacts The import of artifacts from the configured directories on the server file system is executed when the Page Builder application is started up. It scans the configured directories and imports new .json files and .json files having a timestamp later than the last modified date of the corresponding artifact in the database. A file will be imported only one time because it is renamed to <filename><import date>.json.imp after a successful import. You can also import artifacts manually using the Import link to page pbadm.AdminTasks on the landing page. Perform the import from the configured directories on the server file system or from local directories on the client file system. The next sections describe how to perform the imports. Import Page Builder artifact from local directory Perform the following actions to import Page Builder artifact from local directory. Procedure 1. Click the button under Select files from local directories for import. The button label depends on the browser and locale. When it is supported by your browser, you can select multiple files for import. Selected files are shown in a table. 2. Click Import below the table to import the artifacts. The system uploads the file and imports the artifacts if the format is correct. ©2018 Ellucian. Confidential & Proprietary 42 Page Builder Import Page Builder artifact from server file system Perform the following actions to import Page Builder artifact from the server file system. Procedure 1. Copy the artifacts you need to import to the configured directory for the artifact type. 2. Make sure to do the following: • Select the artifact type you need to import. • Clear the artifact type you want to exclude from being imported. 3. Click Import below the check boxes to import the artifacts. 4. To verify the import, select View Existing Page Builder Artifacts to find the available artifacts. 5. Test the pages. You might need to adjust privileges for BAN_DEFAULT_PAGEBUILDER_M, page, and virtual domain roles if the source and target system have different roles and other security related configuration. Properties files Page Builder uses properties files to translate page attributes that typically require translation. The root language properties (as entered in the Visual Page Composer) are automatically generated and updated if a page is compiled and does not need to be packaged for single language applications. If translations have to be provided for pages, the root properties files can be translated using standard tools or a text editor. A separate properties file is generated for each page. The properties file name comes from the name of the page node in the page model, not from the page’s saved name. Ellucian highly recommends that you use the same name to avoid having two different pages with the same page node name and thus use the same properties file name. This is not implemented as an actual constraint so that you have the ability to save a page under a new name without much impact. Note: Page names and page node names have slightly different constraints for naming, so it is not always possible to use the same name for both. When creating a new page, a page node name is generated following the conventions. Currently, there are no tools in Page Builder for packaging properties. ©2018 Ellucian. Confidential & Proprietary 43 Page Builder Maintain Security Security maintenance involves creating users and roles for Page Builder, and creating the required security data. User types Page Builder recognizes four different user types. User Type Example (may not be available in system) Entry in Requestmap.url for spring security / Comments Anonymous/Not authenticated Do not sign in IS_AUTHENTICATED_ANONYMOUSLY Self-Service User with Oracle account (has PIDM) A000000234 ROLE_SELFSERVICEALLROLES_BAN_DEFAULT_M or more specific SS role(s). Self-Service User without Oracle account (has PIDM) 210009101 Self-Service user without an Oracle account and role noted below cannot access Page Builder developer page. Can access pages built with page builder if the user has the corresponding Self-Service role. PageBuilder Developer JSMITH Oracle Account with permission for the GPBADMN object with BAN_DEFAULT_PAGEBUILDER_M role. Page Builder Admin User AJONES Oracle account with permission for GUAGMNU and a Page Builder Page object Roles Use roles to set up the security for pages and virtual domains. User name/type Example (may not be available in system) Entry in Requestmap.url for spring security / Comments Guest (No authentication) GUEST IS_AUTHENTICATED_ANONYMOUSLY Authenticated Self-Service user (with PIDM) ALLROLES ROLE_SELFSERVICEALLROLES_BAN_DEFAULT_M ©2018 Ellucian. Confidential & Proprietary 44 Page Builder User name/type Example (may not be available in system) Entry in Requestmap.url for spring security / Comments Description from web tailor <ROLE> ROLE_SELFSERVICE<ROLE>_BAN_DEFAULT_M Page Builder developer user security The Page Builder developer user uses Page Builder to develop new pages. The database installation scripts create the Banner GPBADMN object with the default role BAN_DEFAULT_PAGEBUILDER_M. Banner Admin users with access to object GPBADMN can use the Page Builder developer and administrative features. This role grants developer users the privileges required to execute SQL statements in a virtual domain. The role allows the security administrator to control Page Builder developer user access to the Banner tables. By default, the BAN_DEFAULT_PAGEBUILDER_M role only can access the database objects that are required to use Page Builder as a developer. A user needs additional grants to develop pages that access other objects through Virtual Domains. You control permissions for the Page Builderdeveloper user through the Banner Security Maintenance (GSASECR) page. This user must have the following ID and grant: • Banner Administrative ID (account created on GSASECR) • Grant for the GPBADMN Banner security object This security object is tied to the BAN_DEFAULT_PAGEBUILDER_M role. To control the Page Builder developer’s table access to specific tables, you can associate table privileges with the role. This allows you to restrict table access to the tables needed for development of the pages your institution wants to create. Grant the object directly to the user Perform the following actions to grant the object directly to the user. Procedure 1. Log in to Banner General Security as BANSECR. 2. In the Oracle/Banner Security Maintenance Page (GSASECR), enter the user ID. 3. Click Modify in the Permissions section to open the Objects granted Directly to a User or Class window. 4. Insert object by selecting object from the Object Name list of values. • • ©2018 Object name: GPBADMN Role: BAN_DEFAULT_PAGEBUILDER_M Ellucian. Confidential & Proprietary 45 Page Builder Add the security object to a class As an alternate option, perform the following actions to add the security object to a class. Procedure 1. Login to Banner General Security as BANSECR. 2. In GSASECR, select the Classes tab. 3. Search for an existing extensibility class. Use the filter to search for Class Code which equals BAN_EXTZ_C and click Go. 4. If the record is not found, create the class: Field Input Class code BAN_EXTZ_C System G (General) Owner BANSECR Comments Extensibility Class 5. After creating the class, focus on the new class code, and click OBJECTS on the class page. 6. Insert object by selecting object from Object Name list of values: • • Object name: GPBADMN Role: BAN_DEFAULT_PAGEBUILDER_M 7. Save and close Objects window to return to the main class window. Assign class to the users As an alternate to granting the object directly to the user, perform the following actions to add the security object to a class and assign class to the users. Procedure 1. With the new class still in focus, click USERS on the class page. 2. Add USER IDs to provide access to the developer features in Page Builder. 3. Close class/user Maintenance window to return to the main class window. 4. Synchronize the class. Results Use the following query to verify if the objects can be accessed by user (replace user by a specific [quoted] user name if needed). SELECT GOVUROL_OBJECT,GOVUROL_ROLE FROM GOVUROL ©2018 Ellucian. Confidential & Proprietary 46 Page Builder WHERE GOVUROL_OBJECT ='GPBADMN' AND GOVUROL_USERID=user; GOVUROL_OBJECT GOVUROL_ROLE ------------------------------ -----------------------------GPBADMN BAN_DEFAULT_PAGEBUILDER_M Users with access to GPBADMN can see SQL exceptions (for example, in the network tab in browser developer tools) when accessing a Virtual Domain. This is useful when developing and debugging Virtual Domains. Other users will only see a non-specific error message to prevent revealing details of the Banner database. Page Security Pages are secured by spring security, where the user granted authorities are maintained in Banner Web Tailor for Self-Service users. Pages with the GUEST role are also visible to authenticated users. The effective spring security configuration is stored in table Requestmap in the SSPBMGR schema (see the table in the Roles Drop Downs section. Virtual Domain Security For Virtual Domains, a similar model as for pages is implemented with the addition that permissions are specified for each RESTful action verb (get, put, post, delete) separately. The Virtual domain service walks the user granted authorities to see if a role matches a role associated with the virtual domain. If Guest access is enabled in the configuration, authenticated users will have also access to virtual domains allowed by guests. Page Builder Admin security You can control maintenance access to Page Builder pages using Banner administrative application security. Before you begin Banner administrative users who do not use Single Sign On must have GUAGMNU permissions to access the Page Builder admin objects and pages. About this task When creating a page in the Visual Page composer, there is a field available to add the Object Name to the Page record. The value is the gubobjs_name. When creating the Object name, follow the normal page naming standards for Banner Admin pages. ©2018 Ellucian. Confidential & Proprietary 47 Page Builder Procedure 1. On the Object Maintenance (GUAOBJS) page, add a new Object record with the following attributes: Field Description Object Name Follow Banner page naming standards Description This object description is used to populate the page roles assignment field Type Choose FORM System Choose the value that identifies the Banner application to which this object belongs Data Extract option This field is Not Available for Page Builder pages Banner 8/Banner 9 option Set the page to Unified Banner 8 and Banner 9 or Unified Banner 9 only 2. On the Banner 9 Module and Page Maintenance (GUAPAGE) page, add the Object to the Page Builder module. a) Access the GUAPAGE page. b) Select the Page Builder module. c) In the Object/Page section, click Insert. Add a record with these values: Field Description Object Code The object’s GUAOBJS name Page Name The object’s page name This must be the same as the page name defined in the Page Builder page component. 3. On the Oracle/Banner Security Maintenance (GSASECR) page, create a new security object with the following attributes: ©2018 Field Description Object Enter the same object code as on the GUAPAGE Track Access This feature is not currently supported on Page Builder pages. Current Version Enter the current Page Builder version, for example, 9.2. Ellucian. Confidential & Proprietary 48 Page Builder Field Description Current Version Alternate Enter the alternate Page Builder version, for example, 9.2. System Choose the value that identifies the Banner application to which this object belongs. Default Role Set the default role for the page (typically ban_default_m) Owner Public 4. Add the role to the Page Builder page using the Page Roles in the Visual Page composer. a) For the pages you want to secure, add the object in the Object Name field of the page component and save the page. b) Open the Page Roles page. c) On Page, select a Page Builder page. d) Click Add New. e) On Role, select the role description that you defined on the GUAJOBS page. It will be one of the roles that begins with the * character. f) Save the role. g) Click Applied Page roles and verify that the new role displays. 5. Assign security privileges to the Page Builder object by granting the object directly to a user or a class on the GSASECR page. Note: Admin users who are not using Single Sign-On must have permission for GUAGMNU to access the Page Builder Admin objects. Most Admin users already have this permission. The applicaiton requires it for admin-only users of Page Builder pages. Virtual Domain Admin Security This feature allows a Banner security user to grant virtual domain access to Admin-only users through the virtual domain roles. Only users who are assigned permissions for a virtual domain object can access the data from the assoicated virtual domain. Create new objects and assign to Admin users Assign users with new objects created in GUAOBJS and associate the objects with roles. About this task Associate objects with these roles: • ©2018 ban_default_m Ellucian. Confidential & Proprietary 49 Page Builder • • ban_default_q ban_default_no_access Procedure 1. On the GTVSYSI page, add a new system indicator named PB with a description of Page Builder. 2. On the Object Maintenance (GUAOBJS) page, add a new object with the following attributes: Field Description Object Object name Description Object description Type FORM System PB Identifies that the Banner system is Page Builder Banner8/Banner9 display options Unified Menu All(Ban8&Ban9) or Unified Banner 9 only 3. On the Banner Module and Page Maintenance (GUAPAGE) page, add the new Virtual Domain object to the PB module. 4. Select the PB object and in the Object/Page window set the Object Code and Page Name both to the same value as the Virtual Domain object name. 5. On the Banner Security Maintenance (GSASECR) page, add the new object to the Objects tab with the following attributes: ©2018 Field Description Object Enter the same object code as on GUAPAGE Track access This feature is not supported on Page Builder pages at this time. Current Version Enter the current version, for example, 9.0. Current Alternate Version Enter the alternate version, for example, 9.0. System Select the value for the Banner applicaiton to which this object belongs Default Role Set the default role for the page (typically ban_default_m) Owner Public Ellucian. Confidential & Proprietary 50 Page Builder Grant users permissions for an object using GSASECR Procedure 1. On GSASECR, access the User ID to grant a user permission for the new Virtual Domain object, for example, PBTEST8. 2. Under Permissions, click Modify. 3. In the User/Class Privilege maintenance, add the new object name and the role associated with it. Use one of the following roles: • • • ban_default_m - for read, write and delete access ban_default_q - for read-only access ban_default_no_access - for no access What to do next You can grant the Virtual Domain object to a class. Users who are added in the class gain the assigned privileges through the class. This method of granting permissions is an alternative to using GSASECR. Assoicate Admin Role to Virtual Domain Procedure 1. Log in to the Banner Extensibility application with the same user, for example, PBTEST8. 2. Access the Domain Roles Page. 3. Select the Virtual Domain to associate with the admin-only user. 4. Click Add New. 5. On Select unique role, select the newly created role. This selects the role and associates the virtual domain with virtual domain admin object. 6. Assign access privileges allowing users to Get, Post, Put, and Delete access. 7. Click Save. What to do next Add the virtual domain object to the exclusion list to prevent it from appearing in App Nav. When you create a virtual domain object set the system code to PB. ©2018 Ellucian. Confidential & Proprietary 51 Page Builder Page Builder Admin Pages security exclusions There are some security considerations and excluded features that you need to understand when using Page Builder. • Banner Extensibility does not enable query-only access for Page objects. If you give a user permission to an object using ban_default_q, the user cannot access the page. • If a user uses a virtual domain (with the ban_default_q role) as a resourse to create an admin page with the ban_default_q role, then the users can only view the data on the page; they cannot modify it. • Track access (the Banner admin security feature) is not available for Page Builder pages. • Users cannot access Page Builder pages using Quick Flows. • You cannot access Page Builder pages using the related options on other Banner Admin Pages. • Page Builder pages do not share global values with other Banner Admin Pages. Include or exclude object on Application Navigator menu Virtual Domain object- When creating a Virtual Domain object on the Object Maintenance (GUAOBJS) page, use a System code with a PB value. When you use this code value, the system excludes the object from the Application Navigator menu even if it was added to a menu using the Menu Maintenance (GUTGMNU) page. However, the Virtual Domain object with a System code of PB will display in the search results unless you exclude it. To exclude the virtual domain from the Application Navigator search results, add the object code to the Application Navigator configuration seamless.excludeObjectsFromSearch. See the Application Navigator Handbook for more information. Page Object- When Creating a Page object, use a System code with a value other than PB (for example, a value of G) to include the object in the menu. Create Page objects to use the System code value that associates the correct page functionality. ©2018 Ellucian. Confidential & Proprietary 52 Theme Editor Theme Editor Theme Editor Theme Editor lets you apply unique branding elements, such as colors and institution logos, to theme-aware applications. Create a theme Define the colors, logo, and favorite icon for a theme that you can apply throughout an application. About this task If you use the same Theme Name as an existing theme, any new information about the theme will overwrite the existing theme information. Be sure to use a unique Theme Name unless you want to change aspects of a theme. Procedure 1. Get the Hex codes for theme colors from your institution’s branding standards. You can define up to three colors in your theme. 2. Identify the URL location for your institution logo and the favorite icon referred to as "Favicon URL". These must be PNG or an SVG files. Note: All application users must have access to these URLs because each user's browser loads the logo or favorite icon from the specified URL. 3. Click New Theme to clear the Theme Editor window. 4. At Theme Name, enter a name for the theme. This should be the name of a theme that you defined in the configuration.groovy file when you configured the application. 5. At Primary color, Secondary color, and Accent color, click in the field and choose a color or enter the Hex codes that define your institution's branding colors. 6. At Logo URL, enter the URL where the institution logo file is stored. This is the URL you obtained in a previous step; all users must have access to this URL. 7. Click Save Theme. Results The Preview window displays using the colors you selected. ©2018 Ellucian. Confidential & Proprietary 53 Theme Editor Theme branding elements The following branding elements specify the colors and logo that define a theme which you can use in your applications. Field Description Theme name Defines the name of the theme, which is the primary way to identify a theme. Create names that identify the theme, for example, an institution name or abbreviation. If your institution uses Multi-Entity Processing (MEP), you may want to use MEP codes as theme names. This gives you easily recognizable theme names for each MEP location. Primary color Defines the color of the main title bar. Choose a color or enter its Hex code. Theme Editor generates related colors for borders, backgrounds, and text based on your primary color choice. Secondary color Defines the color for secondary page elements such as borders and backgrounds. When you choose a primary color, Theme Editor generates a secondary color. If you prefer, you can choose a color or enter its Hex code. Accent color Defines the color for additional page elements. When you choose primary and secondary colors, Theme Editor generates an accent color. If you prefer, you can choose a color or enter its Hex code. Logo URL Specifies the URL location for the logo to display wherever it is used in the application. Favicon URL Specifes the URL location for the favorite icon to display wherever it is used in the application. Logo and Favicon image standards The Logo and Favicon images must follow these standards: • Image must be 18 pixels high if a PNG or an SVG file that is scalable to fit in the browser title bar. • URL must be accessible to all application users because each user's browser will load the logo or favorite icon from the specified URL. Theme actions After you create a theme, you can load, delete, or save it to another location. You can perform the following actions on a saved theme. ©2018 Ellucian. Confidential & Proprietary 54 Theme Editor • Load – loads the theme into the Theme Editor, and applies the theme to the current page. • Delete – deletes the theme from the theme server. You cannot undo a deletion. • JSON – links to the JSON values that encode the theme. You can use these values to save the JSON to another location. Template actions After you upload a template, you can delete it or save it to another location. You can perform the following actions on a saved template. • Delete – deletes the template from the theme server. You cannot undo a deletion. • SCSS – links to the SCSS, which is the content of the template. You can download the SCSS from Theme Editor and upload it to another location. Upload a theme or template file Upload JSON (theme) or SCSS (template) files that you created or downloaded in a different location so that you can use them with your applications. Procedure 1. Login to Theme Editor. 2. Click Choose File. 3. Navigate to the file that you want to upload and select it. 4. Click Upload Theme/Template. Configure a Banner XE Self-Service application to use themes You must define which theme a Banner XE Self-Service application uses by defining settings in the application configuration file. Procedure 1. Open the application configuration file. 2. In the Theme Configuration section, specify the theme settings. ©2018 Setting Description banner.theme.url URL of the application hosting the theme server when using a remote server. Ellucian. Confidential & Proprietary 55 Theme Editor Setting Description Any theme-aware XE Self-Service application can host the theme server. This property is not required if you hvea configured the XE SelfService application as the Theme Server. banner.theme.name Name of the theme the application will use. In a MEP environment, the application uses the MEP code as the theme name instead of the banner.theme.name Note: You must create a theme with this name in the Theme Editor on the server specified by the banner.theme.url setting. . . banner.theme.template Name of the SCSS template file the application will use. The value for this property is the name of the theme template bundled as part of the Self-Service application (under WEB-INF/theme). banner.theme.cacheTimeOut If this application is the theme server, defines time in seconds that the application can cache the CSS file. Changes to the theme made using Theme Editor are not reflected in the application during this cacheTimeOut interval. 3. Save the configuration file. Results The application applies the branding elements defined in the specified theme and template. Example You can define configuration settings for multiple environments in the configuration file. The following code sample illustrates theme configurations defined for two envrionments named production and development. /******************************************************** * * * Theme Configuration * * * ********************************************************/ environments { production { ©2018 Ellucian. Confidential & Proprietary 56 Theme Editor banner.theme.url=”http://10.42.4.63:8888/ellucian/ theme” banner.theme.name=”Ellucian” banner.theme.template=”bannerextensibility” banner.theme.cacheTimeOut = 900} development { banner.theme.url="http://BANNER9_HOST:PORT/ <APPLICATION_NAME>/theme" banner.theme.name="Ellucian" banner.theme.template="bannerextztest" banner.theme.cacheTimeOut = 120 } The Grails environment determines which configuration block to use. When deployed as a war file, it uses the “production” environment by default. When running from source code, it uses the “development” environment by default. When actively modifying theme settings, it can be useful to set the cacheTimeOut to a very small value, for example, one second, so that theme changes are available immediately when you refresh the application page. Configure non-theme aware applications Banner XE Self-Service applications released before the Theming Server are not theme-aware so they cannot recognize and use the settings in the applicaiton configuration file. About this task You must follow this procedure to configure a non-theme aware application to use the themes serrved by the Theme Server. Procedure 1. Open the war file. 2. Add the following JavaScript to the file. var xe = xe || {}; xe.mep = $('meta[name=ssbMepDesc]').attr('content'); xe.configUrl = 'http://localhost:8080/BannerExtensibility/theme'; xe.themeName = xe.mep || 'Ellucian'; xe.autoReload = function( name ) { return '&reload=' + new Date().getTime(); } xe.loadTheme = function( configUrl, name ) { var newLink = document.createElement( 'link' ); newLink.rel = 'stylesheet'; newLink.type = 'text/css'; ©2018 Ellucian. Confidential & Proprietary 57 Theme Editor newLink.href = configUrl + '/getTheme?name=' + name /*+ xe.autoReload()*/; document.getElementsByTagName("head")[0].appendChild( newLink ); } xe.loadTheme( xe.configUrl, xe.themeName ); 3. In the above code, you must set the xe.configUrl to the Theme Server URL using the following fomat: xe.configUrl = 'http://<HOSTNAME>:<PORT>/<APPLICATION_NAME>/theme'; 4. Set the xe.themeName, for example, the following line sets the theme to be the MEP description (if any) or the “Ellucian” theme: xe.themeName = xe.mep || 'Ellucian'; Note: Non-theme aware applications use of the MEP description here. This is different from theme-aware applications, which use the MEP code. Existing applications do not publish the MEP code to be used by JavaScript. Add JavaScript to the WAR file You must save the JavaScript code associated with a non-theme aware application in a js/ bannerSelfService-custom.js file. Procedure 1. Expand the .war file. mkdir tmp cd tmp jar xf ../BannerExtensibility-9.1.war 2. Copy the bannerSelfService-custom.js file into the js directory. cp PATH/bannerSelfService-custom.js js Note: Overwrite an existing empty bannerSelfService-custom.js file as needed. If code already existed in file bannerSelfService-custom.js, append this code to bottom of it. 3. Rebuild the .war file. jar cf ../BannerExtensibility-9.1.war * ©2018 Ellucian. Confidential & Proprietary 58 Text Manager Text Manager Text Manager The Banner General administrative application includes a Text Manager module that provides the ability to customize Banner text strings and translate text in a base language and other languages. Using Text Manager you can upload properties strings from the Banner administrative and SelfService application properties files to the database. After you upload the text strings, Text Manager users can customize the strings in the base language used by your institution, other Ellucian provided languages, or translate the strings into other non-provided languages. Users can also customize the strings that have been translated to languages not supported by Ellucian. The Upload Properties on the Tools menu supports this feature for Banner Self-Service applications through Banner Extensibility. Upload application text to the database Use the upload feature to read all of the property files directly from the Banner 9 Self-Service applications and upload them into the Text Manager database. After upload, Page Builder and Theme Editor display the customized text. Before you begin You must have WTAILORADMIN privilege to perform this task. Procedure 1. Opens the Self-Service application. 2. Select Tools Upload > Properties 3. Enter the Root Locale. This is your institution's base language. 4. Check Other Locales boxes to upload if you want to customize text from other locales. 5. Click Upload all application resources to database or select the Advanced check box to select specific resources to upload. 6. If you selected the Advanced check box, select the boxes for the specific resources and click Save. Results When the total number of files saved greater than zero, the upload is ready. See the Banner General Text Manager Handbook for information about how to customize and upload the application text. ©2018 Ellucian. Confidential & Proprietary 59 Example 1 – Build a Page Builder Validation Page This section provides a Page Builder example that shows how to build a Validation Page. What page do you want to build? Let’s keep it simple for a start and make a CRUD page for a Banner validation table. Determine what data you want to access Choose GTVEMAL for example. Outline of steps to build a CRUD page in PageBuilder 1. Create a RESTful service for accessing the backend server. To do this we will use the Virtual Domain composer to create a Virtual Domain. It is also possible to create RESTful services based on Grails services, but this requires Source code modifications in a grails application. 2. Build a Page using Visual Page Composer with a Resource to interact with the RESTful service and a Grid component bound to the Resource to view and update the model (the data). Create a Virtual Domain 1. Open the virtual domain composer (available on the index page). 2. Type a name to save the vd after Save Virtual Domain Definition: genValidationGTVEMAL 3. Enter a Query Statement like the following: select * from gtvemal where gtvemal_code like :code or :code is null 4. Save the virtual domain. 5. The Query result section will be empty if you created a new Virtual Domain as no privileges are granted for the virtual domain. Fix this by opening the Virtual Domain Roles page on the Landing Page 6. Select the virtual domain from the drop down and select Add New in the empty grid. 7. Select the Page Builder Developer Tools role and update the Allow All to checked (at least while we are developing the page it is convenient to have all privileges). You can add additional roles now or add roles later. ©2018 Ellucian. Confidential & Proprietary 60 8. Select the Save button. 9. Add the GTVEMAL table to the BAN_DEFAULT_PAGEBUILDER_M role using GSASECR. On the GSASECR form, add the table privileges to the role as follows. 9.1 Login to Banner General Security as BANSECR 9.2 In Oracle/Banner Security Maintenance form (GSASECR), select the Roles tab 9.3 Enter the role name BAN_DEFAULT_PAGEBUILDER_M 9.4 In the Privileges box, press the Role Privileges button 9.5 On the Role Privileges window press the Add Object button 9.6 Add the Owner and Object (table) 9.7 Save New Security Object: GPBADMN The new role (BAN_DEFAULT_PAGEBUILDER_M) is the default role for the new security object GPBADMN 10. Grant this Object directly to a user or to a user via a class to give access to the specific tables defined in the role. 10.1 Login to Banner General Security as BANSECR 10.2 In GSASECR enter the user ID 10.3 Select the Modify button in the Permissions box to open the ‘Objects granted Directly to a User or Class window’ 10.4 Insert Object 11. Select Object from Object Name list of values Object name: GPBADMN Role: BAN_DEFAULT_PAGEBUILDER_M OR 12. Add the security object to a class and assign the class to the user as follows. 12.1 Login to Banner General Security as BANSECR 12.2 In GSASECR, select the Classes tab 12.3 Search for an existing extensibility class. Enter BAN_EXTZ_C in the query field and press the execute query button 12.4 If the record is not found, create the class ©2018 Ellucian. Confidential & Proprietary 61 Class code: BAN_EXTZ_C System: G (General) Owner: BANSECR Comments: Extensibility Class 13. After the class has been created focus on the new class code and press the OBJECTS button at the bottom of the class page 14. Insert Object - Select Object from Object Name list of values Object name: GPBADMN Role: BAN_DEFAULT_PAGEBUILDER_M 15. Return to the virtual domain composer page and refresh the page. Now the query results should display data from the virtual domain in the Query result section of the page. If the data has to be edited using the virtual domain, the query results should have a lowercase id column with a unique record identifier. You can take the surrogate id column, the record row id or a separated list of row id’s if multiple tables are joined. 16. Change the query to: select rowidtochar(rowid) "id", e.* from gtvemal e where gtvemal_code like :code or :code is null The id column will be encoded in a way that it can be used in a url without issues (as required by the rest api). The encoding is transparent to the developer, inside the dml it is exactly as fetched in the query statement. 17. Create some dml code (make sure to use the same case for bind variables as you see in the query result section): Post/Create/Save: begin insert into gtvemal (gtvemal_code, gtvemal_desc, gtvemal_disp_web_ind, gtvemal_url_ind, gtvemal_activity_date) values (:GTVEMAL_CODE, :GTVEMAL_DESC, :GTVEMAL_DISP_WEB_IND, :GTVEMAL_URL_IND,sysdate); end; ©2018 Ellucian. Confidential & Proprietary 62 Put/Update: begin update gtvemal set gtvemal_code=:GTVEMAL_CODE, gtvemal_desc=:GTVEMAL_DESC, gtvemal_disp_web_ind=:GTVEMAL_DISP_WEB_IND, gtvemal_url_ind=:GTVEMAL_URL_IND, gtvemal_activity_date=sysdate where rowid=:id; end; Delete: begin raise_application_error(-20001,'Delete is not allowed'); end; 18. Save the virtual domain. Create a page Open visual page composer. 1. Click New Page 2. Choose page name: genValidationGTVEMAL 3. On the Page component, click the Append a child button (with green +) and add a resource component: Type: Resource Name: gtvemalResource Select the Rest Resource you created earlier 4. On the Page component, click the Append a child button (with green +) and add a Block component: Type: Block Name: editView Label: Maintain e-mail types 5. On the Block component, click the Append a child button and add a Grid component: Type : Grid Name: gtvemal ©2018 Ellucian. Confidential & Proprietary 63 Model: gtvemalResource (the name of the Resource) Check Allow New, Modify and Reload checkboxes 6. On the Grid component, click the Append a child button and add items for the table columns: Text type Name: code Label: Code Model: GTVEMAL_CODE Text type Name: description Label: Description Model: GTVEMAL_DESC Boolean Name: displayWeb Label: Display on Web Value: N (this is the default value for new record) Boolean True Value: Y Boolean False Value: N Model: GTVEMAL_DISP_WEB_IND Boolean Name: urlInd Label: URL Indicator Value: N (this is the default value for new record) Boolean True Value: Y Boolean False Value: N Model: GTVEMAL_URL_IND Datetime Name: lastModified Label: Last Modified Model: GTVEMAL_ACTIVITY_DATE Read Only: checked ©2018 Ellucian. Confidential & Proprietary 64 When finished, the page structure looks the following: Compile and Save the page After creating the page, you can compile and save the page. If errors occur, the page is not saved. Correct any issues and save again. Run the page 1. Select the Preview Page button. 2. If you get the following message: You are not authorized to view this page. do not click OK. If you click OK, the system will sign you out, which you do not want to happen. Grant access to page 1. On the Landing Page or in the Page Builder Menu, click the Page Roles link. 2. Select the Page from the drop down and select Add New in the empty grid. 3. Select the Page Builder Developer Tools Role. 4. Check the Allow Access check box. You can add additional roles now or add roles later. 5. Select the Save button. 6. Select the Apply page roles button. 7. Try to re-run the page. ©2018 Ellucian. Confidential & Proprietary 65 When you have finished creating the page, it should look like the following. Exploring grid features Click the Code label to sort by the code values. Shift + click the Description label to sort by code and description values. Use the pagination buttons to select the next set of records. Records are cached on the client so after the first use there should be minimal delay to display the records depending on page size. Use Refresh button to clear the cache for the Grid and re-query the data. Drag column Display on Web to change the order in which columns are displayed until the page is reloaded. The round button with the triangle pops up a dialog to Show or Hide columns and search values on the current page. Add error handling and validation The code and description have length limits, the server can be down and more things can go wrong. 1. Select node gtvemal[Grid]. ©2018 Ellucian. Confidential & Proprietary 66 2. Add code to On Error: if (response.status == 404) alert('invalid resource'); else if (response.status == 500) { if (response.data.errors.errorMessage) alert(response.data.errors.errorMessage); else alert(response.data.errors[0].errorMessage); } Note: The type of response.data.errors depends on the context. When loading data from the rest resource, it is an array of errors, when saving it has a single attribute errorMessage. The reason is that an array of records is loaded and each record gets saved individually (this is how AngularJS interfaces with a rest resource). Test DML Error handler 1. Create a new record entering text in the Code field. 2. Select the Save button in the Grid control. 3. Select the Save button. Users with the Page Builder Developer role have debug privileges and will see detailed error messages. Users without this privilege will see generic error messages like Unable to create resource. If a Page Builder developer is not seeing the detailed error messages, uncomment the following line in the BannerExtensibility_configuration.groovy file to display them. "debugRoles = "ROLE_GPBADMN_BAN_DEFAULT_PAGEBUILDER_M"" Test load error handler 1. Test the error handler for load by breaking the Query Statement in the Visual Domain Composer, for example, modify the where clause by adding the following: and length(gtvemal_code)/0>1 2. Refresh the data or page to test it. ©2018 Ellucian. Confidential & Proprietary 67 3. Remove the statement causing the exception with select data. Add client side validation The problem caught by the On Error handler for DML would not have occurred if the input were validated on the client. Add the following validation to the Code field. 1. Click the button next to the Validation property on the Code field. 2. Select new Value Type = number 3. Select a maxLength value of 4. Now the user cannot enter more than four characters in the Code field. It is possible to add regular expressions and other validation. You can add complex validation in the On Update handler. 1. Select the Description field node in the page tree. 2. Add the following code in the On Update handler for the selected field: ©2018 Ellucian. Confidential & Proprietary 68 if (currentSelection.GTVEMAL_CODE === currentSelection.GTVEMAL_DESC) { alert('Code equals Description'); currentSelection.GTVEMAL_DESC='*'+currentSelection.GTVEMAL_DESC; } 3. Test the validation by repeating the code in the description field: You’ll notice that the alert pops up immediately after the description matches the code and that it has added the asterisk in the Description field after the alert is closed. The validation will be executed for each character that is entered in the field. If your validation is too complex, it may slow down the user while typing. Add a server side filter We want to add a filter on the Code field to quickly find particular codes. To do so follow the steps below. 1. Add new Block filter before the editView block. Name: filter Label: Filter 2. Add new Text item as a child component of the filter block. Name: codeLike Label: Code On Update: $gtvemal.$load() ©2018 Ellucian. Confidential & Proprietary 69 Note: A RESTful get is performed for every keystroke. For a Validation table this is usually not a problem. However, be aware of this so that you don’t overwork the server. 3. On gtvemal Grid, add Parameters: Key: code Select new value Type: Text Value: (nvl($codeLike,"")+"%").toUpperCase() 4. Click Add and OK. 5. Test the filter. Style the page Page Builder includes a style sheet called xeStyle. When you import this style sheet on the page, it styles several components like the Banner XE components. There is an existing UI issue. Check boxes in the Grid component are very large in Chrome and small in FireFox. You can adjust this by making the following changes. 1. Set the Import Custom Stylesheets property to xeStyle on the page component. This defines to use the Banner XE styling where available. 2. Custom Style Sheet pbDefault will be included in every page automatically. 3. Add the following CSS code in the Custom Style Sheet pbDefault to change the check box sizes in the Grid. .ngGrid input[type="checkbox"] { -webkit-transform:scale(1.00.6); -moz-transform: scale(1.4); } 4. Compile and Run the page. ©2018 Ellucian. Confidential & Proprietary 70 Result The Code field in the Filter section now uses a different style and the check boxes are smaller. Example 2 – Page Builder Example 2 requires items listed in the Prerequisite section. After installing the Schema and retrieving the sample pages from Git, follow the steps to learn more about Page Builder patterns and interactions. Prerequisite 1. Install Oracle Schema SCOTT https://community.oracle.com/thread/874119?start=15&tstart=0 Some examples need database tables not present in Banner databases, such as the EMP / DEPT tables Oracle used to install in the SCOTT schema. 2. Add column SEX on the EMP table Type = varchar2(1) ©2018 Ellucian. Confidential & Proprietary 71 3. Ensure that you have successfully submitted public keys to Ellucian for the Git repositories and have received credentials for the Ellucian Artifactory server prior to proceeding. You access the Ellucian hosted Git repositories using SSH (with the default port 22). You are required to submit an RSA public key before you can gain access. To generate and submit a public key to Ellucian, follow the instructions in the Ellucian Support Center Article 9008: 1-1A3GVQO: Git repository RSA Key. To request Artifactory credentials, follow the instructions in Ellucian Support Center Article 34716: 34716:Requesting Ellucian Artifactory credentials for use in building Banner HR 9.0 source code. Overview Component Methods, Event Handlers and Interaction See the Banner Extensibility Handbook 9.2 for more information. Demo Applications When you install Page Builder in a development environment, the sample pages are installed in the following directory: plugins\banner-sspb.git\test\testData\model The virtual domains are installed in this directory: plugins\banner-sspb.git\test\testData\virtualDomain 1. Copy these files to the configured directories on the Page Builder Server File system. They are automatically imported when you restart Page Builder. 2. Review the roles for each page and virtual domain. You may need to add the Page Builder Developer role to perform testing on the virtual domains and pages. 3. Add table privileges to the ban_default_pagebuilder_m role as indicated in the Summary of Demo Applications table . In this lesson, a number of patterns and interactions are illustrated using the demo applications. PageModel2 By default the page lists Employees for all departments in a grid ©2018 Ellucian. Confidential & Proprietary 72 The grid interacts with the Empdept Resource, which is a Restful resource operating against the empdept virtual domain. This virtual domain operates against the emp and dept tables. ©2018 Ellucian. Confidential & Proprietary 73 The grid component properties define the details of how this grid works. Model specifies the Resource to which the grid is bound. Parameters are used to provide a filter for the restful resource and are passed as URL parameters in the restful get request. In this case, the DEPTNO parameter passes the value in the SelectDept Dropdown that we will discuss in the next paragraph. The Allow * check boxes determine the operations against the backend that are allowed. Corresponding Controls are automatically shown. The On Click handler specifies an action to be performed when a field is selected. The On Error handler specifies how to handler failures in communication with the Restful resource. It depends on the implementation details of the backend what error messages can be expected. Load initially determines if the grid is populated from the Model resource immediately. If un-ticked, the grid would be empty until a load is performed after a user interaction. Master - detail The SelectDept Dropdown represents the master data. It is populated from the Dept Resource, using the department virtual domain, which lists records from the DEPT table (select * from dept). Inspect the SelectDept Select item. The Source model specifies the Resources. The Model property is empty as the selected value is not related to a specific backend data item. See the DEPTNO Select in the EmpDetails grid for an example where the model is used. The value shown to the user is the Department name, specified in the Label Key property. The Value Key specifies the key value to be used in the interaction (usually specifying the primary key or ID field of the domain). ©2018 Ellucian. Confidential & Proprietary 74 The On Update property in the SelectDept specifies how the page interacts with the user selecting a value in the Dropdown. The On Update simply instructs the EmpDetails Grid to reload its data. Since the value selected in the SelectDept dropdown is used in the parameters of the Grid, this will be sufficient to display the employees working for the department selected. Static Resource We have seen two usages of Rest resources, but if we want to use hardcoded values in a Select or Radio Button Group, you need to define a Static resource. The SEX Select is an example where the static resource Gender is used. ©2018 Ellucian. Confidential & Proprietary 75 ©2018 Ellucian. Confidential & Proprietary 76 Note that the Control to edit Static Data is somewhat limited at the moment. It may be needed to modify the JSON model directly using the Page Source View to get the static data you need. ©2018 Ellucian. Confidential & Proprietary 77 JavaScript formula with client side calculation Field TOTAL is an example showing the sum of two fields, which is not available in the data being retrieved from the back end. For displaying the TOTAL a literal is used, which does not have a model (not connected to back end data) and its value can show information available in the context. The grid control provides the $item variable exposing the currently rendered row. The formula is: {{$item.SAL + $item.COMM | number:2}} The result is formatted using I18N compliant number formatting, showing two fraction digits by using the number filter. Summary of Demo applications Page Patterns Table privileges to add to ban_default_ pagebuilder_m role PageModel1 PageModel2 ©2018 Comment Do not use Edit employees working for a department. Employees are optionally filtered by department. Patterns: • Editable grid Ellucian. Confidential & Proprietary EMP DEPT Requires EMP and DEPT tables from the SCOTT schema installed in old versions of Oracle. 78 • Synchronize data between components (like in a Master – Detail interaction) • Static and dynamic Dropdowns in a grid • JavaScript formula to calculate the sum of Salary and Commission • Restful and Static resources PageModel3 PageModel4 Recently a chat was published in chatter group XEPBUG where to find scripts. Search for Programme demo. Filter by Term, Campus, College and Level. STVTERM Patterns: • Interacting Drop downs. Dropdown options are adjusted based on selection on other dropdown. • Button On click handler to load data and display the matching Programmes • Change visibility of Form programmatically (to implement previous bullet) • Drill down into detals • Paging through lists of programmes STVCAMP Address Page allowing a Banner user to modify address details. STVSTAT SOBTERM SMRPRLE SMBPGEN SOBCURR STVCOLL STVLEVL STVNATN Patterns: • Details control with On Error handler to report issue when data load fails • Dropdown (select) State is reloaded when Dropdown Country is changed • State Dropdown using Source Parameters • On Update event handler on Country Dropdown PageModel5 Flow Demo. Employees and Managers navigate through a different flow to fill in a number of forms. SPRADDR STVATYP EMP Patterns: ©2018 Ellucian. Confidential & Proprietary 79 • Flow component usage (a list of forms to traverse) • Data component usage (pattern to use a rest resource not associated with a visual component) • Validation with pattern, maxlength and minlength • Reference of page variables PageModel6 Validation Control Demo Page. Patterns: • A required text control with validation to allow numeric input between 2 and 3 characters • An optional number control to allow numbers between -10 and 100, minimum length of 2 and showing 2 fraction digits. • A text control with a pattern validation using expression ^\w+$ (allow multiple word characters) • Form only accepts if all inputs are valid. bcmPersonSe arch pbadm.Export Pages Person Search SPRIDEN Patterns: • Form submitting filter criteria SPBPERS Export Pages N/A Patterns: • Refresh grid after typing characters in filter • Calling a Restful resource post method in a button On Click handler • Restful resource associated with a Grails service ©2018 Ellucian. Confidential & Proprietary 80