1. Goal: Ensure you have a working environment for the project 1 Lab 0: Confirm Working Training Instance Instructions 1) Install a copy of virtualbox (www.virtualbox.org)www.virtualbox.org 2) Download a copy of virtual box image (vm-krtrain.0*.ova) 3) Click on the File -> Import Appliance 4) From the Import Wizard Select Choose 5) Select the vm-krtrain.ova from the proper file location and select Open 6) On the appliance Import Settings, select the import button. - You may need to lower the RAM based on your system 7) double click the new VM appearing in your VM Manager

2. Instructions 2) double-click the green leaf icon on (Spring Tool Suite) 3) Right click on the krworkshop project and select refresh 2 Lab 0: Confirm Working Training Instance

3. Instructions 4) Right click on the ‘Spring Tomcat Server’ in the Servers Tab (bottom left) and select clean then publish 5) Double Click on the server start button (green button with arrow) located in the Server Tab 3 Lab 0: Confirm Working Training Instance

4. Instructions 6) Open Chrome and Select ‘KRAD Workshop Page’ 7) Login as admin (only username is required) 4 Lab 0: Confirm Working Training Instance

5. Instructions 8) Click on the ‘Kuali University - Lab 1: Components and Containers’ link 9) Confirm a spare but working page 5 Lab 0: Confirm Working Training Instance

6. Starting from a blank page we will setup the basic pieces for our application Kuali University: Apply Now Lab 1: Containers and Groups Lab Objectives Configure the application view and theme Setup the page and sections Add and modify input fields for the application

7. Lab 1 Containers and Groups  Main job of containers is to hold a list of components and render them using a layout.  For today we will discuss Views and Groups  A container is divided into three parts: 7

8. Lab 1 Containers and Groups  Views are a top level component as well as a container  May not be included in any other component  Quick overview on View  Made up of Pages (a type of Group)  Pages are made up of Sections (another type of Group)  Groups are made up of fields, content elements, and groups 8

9. Lab 1 Containers and Groups  Overview of Lab 1  View  Add a new title  Update the theme  Page  Modify Title  Add a section components  Groups  Add fields to group  Modify Group Types  Fields  Add basic input fields  Modify look and feel of field through with small changes  At the end of each step you can refresh your page and see your changes 9

10. Instructions 1) Add a title 'Kuali University Student Application Form’ to the View xml 2) Take a look at the TrainingApplicationForm.java (Shortcut - Ctrl-Shift-R ) If you’re familiar with Spring MVC, think of this as the form backing object 3) Update theme from Uif-ClassicKnsTheme to Uif-KradTheme and uncomment additionalCssFiles (this will add special styling for this view) 10 Lab 1 Containers and Group

11. At this point your page should look like (minus styling) 11 Lab 1 Containers and Group

12. Instructions 4) Uncomment and add page title 'Application Info’ 5) Uncomment Campus Info Section to your page 12 Lab 1 Containers and Group

13. At this point your page should look like Notice that our list include bean with a reference a parent. For the sections in this lab we’re already included all the parent beans. 6) Create new sections with parent 'Training-StudentInfo-Lab1' and 'Training-StudentAddress-Lab1’ 13 Lab 1 Containers and Group

14. At this point your page should approximately look like (minus styling) You should have two new sections for ‘About Me’ and ‘Address’. Lets add some input to this form 14 Lab 1 Containers and Group

15. Instructions 7) Uncomment Dropdown Fields inside ’Training-CampusInfo-Lab1’ Update the term and college beans to use ‘Uif-InputField-LabelTop’ 8) Add a new dropdown field labeled ‘Campus’, its label placed on top. Add field values ‘east’ and ‘west’ representing ‘East Campus’ and ‘West Campus’ respectively 15 Lab 1 Containers and Group

16. At this point your page should approximately look like this (minus styling) Lets continue to build this form out 16 Lab 1 Containers and Group

17. Instructions 9) Uncomment first, last, and email list fields inside ‘Training-StudentInfo- Group1-Lab1’ bean 10) Add field with id ‘email’ with label 'Email Address’ 17 Lab 1 Containers and Group

18. Instructions 11) Uncomment Training-StudentInfo-Group2-Lab1 fields and Training- StudentAddress input fields 12) Change Uif-DropdownControl to Uif-HorizontalRadioControl 13) Add a new 'Uif-DateControl' control to Date of Birth Field 18 Lab 1 Containers and Group

19. 14) Add instructionalText property to the ethnicity field to: 'Please select the ethnicity/race(s) you most closely identify yourself as’ and change: ‘Uif-DropdownControl’ to 'Uif-VerticalCheckboxesControl’ 19 Lab 1 Containers and Group

20. Solution:

21. Your page should look approximately like this (yours will have different styling): 21 Lab 1 Containers and Group

22. Starting with our inputs, we will add some constraints to enable client-side validation Kuali University: Apply Now Lab 2: Validation and Constraints Lab Objectives Understand how validation works in the UI Setup some constraints Demonstrate different types of constraints

23. Lab 2 Validation and Constraints Now that we have the sections and InputFields set up, lets add some constraints Constraints allow us to apply validations to our InputFields All validations performed by constraints are supported on the client-side (as well as the server side through a validation service) The user will immediately see the result of constraint validation when they make a mistake, allowing them to fix it easily Attempting to submit a form without fixing errors will halt that action and give the user a summary of fields/sections that have errors All of this functionality is automatic by just setting up your constraints on your InputFields! 23

24. Instructions 1) Open up the file view definition file TrainingApplicationView-Lab2.xml 2) Find the field that has a validCharactersConstraint on it (the firstName property field). This InputField is applying an AlphaPatternConstraint to its input (users can only enter alpha characters for this field) 24 Lab 2 Validation and Constraints 3) Copy the validCharactersConstraint property (and its inner content) 4) Let’s put this same constraint on other InputFields where it makes sense: Add it to the lastName, city, and state InputFields.

25. Instructions 5) Let’s add some more validCharactersConstraints to the other fields. Following the same validCharactersConstraint property process, add different constraints for: email - EmailAddressPatternConstraint zip – ZipcodePatternConstraint address1 - AlphaNumericWithBasicPunc address2 – AlphaNumericWithBasicPunc dob - BasicDatePatternConstraint 6) Now find the firstName field again. You may have noticed a property called “required” set with “true”. This constraint property means that this field is required by the user to fill out before the form can be submitted. Add this property to every InputField on the View besides the field campus, address2, and emailList. 25 Lab 2 Validation and Constraints 7) Additionally, add the property minLength and maxLength to the zip InputField and set both minLength to “5” and maxLength to “10”. These constraints will ensure the user enters only 5-10 characters in this field. Do the same for the state InputField, but set both the values to “2”. 8) Start up your application and see the result of the validation constraints you added by typing in invalid input or skipping required fields. Then see the result of correcting the invalid input.

26. Solution:

27. Partial Solution - Your code should look approximately like this: 27 Lab 2 Validation and Constraints

28. Partial Solution - Your code should look approximately like this : 28 Lab 2 Validation and Constraints

29. Advanced Features:

30. 30 Lab 2 Extra Info and Exercises There are additional constraints that you can apply for even more types of validations:  exclusiveMin, inclusiveMax (for minimum and maximum numeric values)  Prerequisite Constraints  Must Occur Constraints  Case Constraints  Additional validCharactersConstraint options You can even apply constraints based on the “state” of an object through State-based Validation

31. Lab 2 Extra Info and Exercises Prerequisite Constraints A prerequisite constraint defines what fields must be filled out WITH this field. Extra Exercise 1: 1) Let’s add a PrerequisiteConstraint for address2, requiring that address1 be filled out before you can fill out address2. 2) Set the “dependencyConstraints” property on the InputField to the following: 3) Start the app and see what happens when you try to fill out address2 after putting nothing in address1 31

32. Lab 2 Extra Info and Exercises Must Occur Constraints MustOccurConstraint is used to identify fields that are required before this field can be filled out. This differs from PrerequisiteConstraints because the number of fields required from different sets of fields can be defined. 32  This means that field11 OR field12 with field13 must be filled out before the field this constraint applies to can have a value. This particular constraint as defined here also allows all 3 fields to be filled out. However, if max at the top level was 1 instead, it would mean: either field11 OR field12 with field13 must be filled out (all 3 together not allowed).

33. Lab 2 Extra Info and Exercises Case Constraints A CaseConstraint provides the ability to only apply a certain constraint when a defined case/condition is satisfied. The constraint or constraints used can be any of the constraints discussed, in addition to nesting another CaseConstraint within itself. Extra Exercise 2: 1) Let’s add a CaseConstraint for campus, making it required when college equals “csc” or “art”. 2) By default, CaseConstraint does an equals comparison. We set the propertyName on CaseConstraint to “college” and fill out the rest of the constraint to look like this  3) Start up the app and see that campus is required when you select csc or art. 33 art csc

34. Lab 2 Extra Info and Exercises Notes on Case Constraints There is a list of WhenConstraints in case constraints, by adding additional WhenConstraints, it is equivalent to OR (if this property equals value A apply this constraint OR if this property equals value B apply this other constraint). By adding nested CaseConstraints within WhenConstraints it is equivalent to AND (if this property equals value A AND this other property equals value B, then apply this constraint) CaseConstraint also allows other operators other than equals: NOT_EQUAL, GREATER_THAN_EQUAL, LESS_THAN_EQUAL, GREATER_THAN, LESS_THAN, and HAS_VALUE (has value means has any value) 34

35. 35 Lab 2 Extra Info and Exercises AlphaNumericPatternConstraint AlphaPatternConstraint AnyCharacterPatternConstraint CharsetPatternConstraint NumericPatternConstraint AlphaNumericWithBasicPunc AlphaWithBasicPunc NumericWithOperators FixedPointPatternConstraint IntegerPatternConstraint DatePatternConstraint BasicDatePatternConstraint FloatingPointPatternConstraint PhoneNumberPatternConstraint TimePatternConstraint Time24HPatternConstraint UrlPatternConstraint NoWhitespacePatternConstraint JavaClassPatternConstraint EmailAddressPatternConstraint TimestampPatternConstraint YearPatternConstraint MonthPatternConstraint ZipcodePatternConstraint All Available default ValidCharactersConstraints (many have options to customize further):

36. 36 Lab 2 Extra Info and Exercises In addition to the above defined ValidCharacterConstraints, you can define your own ValidCharactersConstraint by defining the regex property “value” directly. Custom configurations must have a messageKey defined. All Available default ValidCharactersConstraints (many have options to customize further): <bean parent="Uif-InputField" p:instructionalText="custom valid characters constraint - this one accepts only 1 alpha character followed by a period and then followed by a number (a.8, b.0, etc)" p:propertyName="field1"> <bean parent="ValidCharactersConstraint" p:value="^[a-zA-Z]\.[0-9]$" p:messageKey="validation.aDotNumTest"/> Bonus Exercise: Change one of your InputFields to use a customized ValidCharactersConstraint that you define the regex for (just set messageKey anything – configuring messages and messageKeys is an different topic entirely)

37. Let’s demonstrate some KRAD Action Components Kuali University: Apply Now Lab 3: Actions Lab Objectives Understand how to setup an action that invokes a method on the server in our Controller Setup an action that calls a simple js function Learn about different action options

38. Lab 3 Actions Now that we have the page setup with some controls and validation lets set up some buttons Due to time constraints this lab will not save to a db, invoke any service, or submit to workflow on the controller, as you would normally do in a real scenario However, we will be manipulating the form on the server and sending it back KRAD Actions can be A server call to the method on your controller A call to a javascript function A mixture of both – js before server call, the server call, and js after the server call 38

39. Instructions 1) Open up the file view definition file TrainingApplicationView-Lab3.xml 2) Find the commented out “footer” property in the Page Training-CollegeApplicationPage (these are items of the Page’s footer – this is where we will be placing our actions, but Action components can be placed in ANY group). Uncomment out the footer. 3) You’ll notice we have two items here a “Uif-PrimaryActionButton” and a “Uif-ActionLink” – these are both Action components; we are going to add some properties to them. For the button we want to make a call to a method on the server, give it an appropriate label, and turn on client-side validation for this button. Set the following properties: p:methodToCall=“submit” - we will be calling the “submit” method on the controller p:actionLabel=“Submit” – the name of the button p:performClientSideValidation="true“ - this will perform client-side validation on all fields we are submitting to catch validation issues before anything is sent to the server (sidenote: the @{!#view.readOnly} expression means only show this component when the view is not readOnly) 39 Lab 3 Actions

40. Instructions 4) For the actionLink lets add: p:actionLabel=“Clear All” p:actionScript=“clearAll()” – this will be a method defined in our javascript file 5) Now find the additonalScriptFiles property and uncomment it. This property is pointing to an additional javascript file that we want the view to use. This javascript file will contain our clearAll function. 6) Open up the script file and find the clearAll() function. Uncomment the code inside the function – this code is a js call that uses jQuery to select the form’s fields and clears them. 7) Now lets open of the Controller class “TrainingApplicationController.java”. In here there is a method called submit, uncomment this method. The method does the following: changes the View to readOnly and adds a message to the messageMap (this will display this message on the screen). Now add the following tag directly above the method: @RequestMapping(method = RequestMethod.POST, params = "methodToCall=submit") This tag is important! This method expects data to come from a post, and its methodToCall name to be submit. When this methodToCall name is a match this is the method that will be called on the controller. Note that the method to call name is the same as the Java method signature name. 8) Start your server and click on your new action components – the button should invoke the method on the server and the link should clear all your form data. 40 Lab 3 Actions

41. Solution:

42. Partial Solution - Your code should look approximately like this: 42 Lab 3 Actions <bean parent="Uif-PrimaryActionButton" p:render="@{!#view.readOnly}" p:actionLabel="Submit" p:methodToCall="submit" p:performClientSideValidation="true"/> <bean parent="Uif-ActionLink" p:render="@{!#view.readOnly}" p:actionLabel="Clear all" p:actionScript="clearAll()"/>

43. Advanced Features:

44. 44 Lab 3 Extra Info and Exercises You can add a pre and post callback scripts to the action. This allows you to put any javascript functionality before or after a call to the server (or both – as seen below). Extra Exercise 1: 1) Let’s add a preSubmitCall our “submit” button. Add the preSubmitCall property with the value “function(){return confirm(‘Submit?’);}”. preSubmitCall expects a return that returns true to continue proceeding with the action, and false if you need to halt processing. 2) Let’s add a successCallback with the value “alert(‘Submit Successful!’)” 3) Start the app and see what happens when you click the submit button with the new property options set

45. Lab 3 Extra Info and Exercises KRAD supplies a few different looks for actions by using the following parent beans: Uif-PrimaryActionButton Uif-SecondaryActionButton Uif-PrimaryActionButton-Small Uif-SecondaryActionButton-Small Uif-ActionLink Actions can even have images in them by setting the actionImage property (url) and actionImagePlacement property (string - TOP, BOTTOM, LEFT, RIGHT, or IMAGE_ONLY) to place the image in relation to your actionLabel. Extra Exercise 2: 1) Using what you have learned about actions create your own Action component of your choosing that does anything! 2) Start the app and see what happens when you click your new action 45

46. Making things appear and disappear like a magician Kuali University: Apply Now Lab 4: Progressive Disclosure Lab Objectives   We’ll cover Progressive Disclosures and Conditional Refreshes   What are they and how can they be used   Hands-on: Adding a progressive disclosure to the form   Configuration options

47. 47 Lab 4: Progressive Disclosure Progressive Disclosures - What are they? Allows fields and groups to be shown or hidden based on some condition (i.e. a different field’s value)

48. 48 Lab 4: Progressive Disclosure Progressive Disclosures - How can they be used?  Displaying fields and groups only when they are needed  Delay sending of data until it’s needed

49. 49 Lab 4: Progressive Disclosure Progressive Disclosures - How to use them? <bean parent="GenericTextField" p:label="Describe your Diet:" p:progressiveRender="field34 eq 'yes'" p:propertyName="field35" />

50. 50 Lab 4: Progressive Disclosure Component Refreshes - What are they? Allows component to be updated when the form changes

51. 51 Lab 4: Progressive Disclosure Component Refreshes - How can they be used?  Change the disabled or read-only state of a component  Change the options for a control  Refresh content for a control when another control changes use simpler refreshWhenChanged

52. 52 Lab 4: Progressive Disclosure Component Refreshes - How to use them? <bean parent="GenericTextField" p:propertyName="field89" p:label="Food Item" p:optionsFinderClass=“…FoodKeyValuesFinder“ p:conditionalRefresh="field88 eq 'Fruits' or field88 eq 'Vegetables' ">

53. 53 Lab 4: Progressive Disclosure Component Refreshes - How to use them? <bean parent="GenericTextField" p:propertyName="field89" p:label="Food Item" p:optionsFinderClass=“…FoodKeyValuesFinder“ p:refreshWhenChanged="field88">

54. 54 Lab 4: Progressive Disclosure Instructions 1)Open up the view definition file TrainingApplicationView-Lab4.xml 2)Locate the bean with the label=“Campus” 3)Add a progressiveRender property so that this field is only rendered when the college is Art or Computer Science

55. 55 Lab 4: Progressive Disclosure Instructions 1)Open up the view definition file TrainingApplicationView-Lab4.xml 2)Locate the bean with the label=“Campus” 3)Add a progressiveRender property so that this field is only rendered when the college is Art or Computer Science 4)Hint: p:progressiveRender=“@{college eq 'art' or college eq 'csc‘}"

56. Solution:

57. 57 Lab 4: Progressive Disclosure Solution Your code should look approximately like this: <bean parent="Uif-InputField-LabelTop" p:label="Campus" p:propertyName="campus" p:progressiveRender=“@{college eq 'art' or college eq 'csc‘}">

58. Advance Features:

59. 59 Lab 4: Progressive Disclosure progressiveRender default (no other flags set) Content is sent initially and rendered as hidden on page load (if progressiveRender condition is false) progressiveRenderViaAJAX=“true” Content is retrieved when component is rendered for the first time, then kept for future hide/show operations progressiveRenderAndRefresh=“true” Content is retrieved each time the component is shown

60. Looking at various Collection layouts and options in KRAD Kuali University: Apply Now Lab : Collections Lab Objectives Understand what Collections are and how they can be used in UI Setup Table Layout Collection Configure some Collection options

61. Lab: Collections Collections are lists of objects that are grouped together. There are 2 predefined layouts for collection groups in KRAD : TableLayout and StackedLayout. The layout managers for these different layouts has many options to change the way the collection groups behave Functions like adding and deleting from collections are already built in the KRAD framework TableLayout Collections allow for paging, sorting, grouping of rows, and totaling of numeric columns on the client Example of TableLayout with a separate add line : 61

62. Instructions 1) Open up the view definition file TrainingApplicationView-Lab6.xml 2) Create a new bean named Training-StudentReferences using Uif-TableCollectionSection as parent. The Uif- TableCollectionSection uses a TableLayoutManager and has the RichTable widget set by default. 3) Set the following properties : collectionObjectClass to the TrainingApplicationReference class (include package) propertyName to ‘references’ – this must be a collection property on the collectionObjectClass headerText to ‘References’ instructionalText to ‘Please list any references we can contact’ layoutManager.generateAutoSequence to ‘true’ 4) Now we need to add the TrainingApplicationReference fields to the list of items in the collection group. Add an Uif-InputField in the items list of Training-StudentReferences the for each of the fields in the TrainingApplicationReference class. 5 ) Add this bean to the list of items in the Training-CollegeApplicationPage 6) Start the application and test the collection group 62 Lab: Collections

63. Solution:

64. Partial Solution - Your code should look approximately like this: 64 Lab: Collections

65. Advanced Features:

66. 66 Lab: Advanced Features 1)Set the property on the Training-StudentReferences collection to display the add line outside of the table. Hint : use the ‘layoutManager.separateAddLine’ and ‘layoutManager.addLineGroup.layoutManager.numberOfColumns’ properties 2)Add watermark text to the ‘phone’ item and validate the value with a consraint. Hint : use ‘watermarkText’ on the control property of the InputField add a PhoneNumberPatternConstraint. 3) Add a drop down control on the ‘relationship’ field. Add the following options : 4) Add a StackedCollectionGroup for the ‘previousEducation’ property. Hint: Use Uif-Disclosure-StackedCollectionSection

67. KRAD makes it easy to handle HTML events in your webpage. Kuali University: Apply Now Lab 6: Fun with HTML Events Lab Objectives HTML Events – what are they? How to add javascript event handlers to components Add some event handling flair to our web page

68. 68 Lab 6: HTML Events HTML Events- What are they? Dynamic HTML allows for interactive web-pages. HTML can process events from the keyboard and mouse, and also some other special events. Mouse Events onclickOccurs on a mouse click ondblclickOccurs on a mouse double clicked onmousedownOccurs when mouse button is pressed onmouseupOccurs when mouse is released onmouseoverOccurs when a mouse moves onto an element onmouseoutOccurs when a mouse pointer moves away from an element onmousemoveOccurse when a mouse moves while it is over the element

69. 69 Lab 6: HTML Events HTML Events- What are they? Keyboard Events onkeydownOccurs when a key is pressed onkeypressOccurs when the key is pressed and released onkeyupOccurs when the key is released Other Events onfocusOccurs when an elements gains focus onblurOccurs when an element loses focus onchangeOccurs when a control loses foces and has been modified since gaining focus onsubmitOccurs when a form is submitted onloadOccurs when a window or frame finishes loading

70. 70 Lab 6: HTML Events For processing of events we use JavaScript. KRAD components have properties defined to make adding event handlers to your page elements easy. For each event, there is a corresponding property. For example, to display an alert box when an element is clicked, simply set the onClickScript property. Let’s add some event handling to our page to liven it up a bit…

71. 71 Lab 6: Fun with HTML events Instructions 1) Open up the view definition file TrainingApplicationView-Lab6-Events.xml We’ll start with something simple but not so exciting. We’ll display an alert box when the “Gender” radio component is clicked. 2)Locate the InputField bean with the label=“Gender” 3)Add the onClickScript property to the component to display an alert box with a fixed message. (Tip: see the previous screen for an example) 4)Re-load the page and test it out

72. 72 Lab 6: Fun with HTML events Let’s try something a little more exciting. 5) Add a drop down select box component labeled “Affiliation” into the CampusInfo section right after the “Campus” drop down box. Note that this select box uses a different approach to setting it’s options. The list of options is defined near the bottom of the TrainingApplicationView- Lab6-Events.xml file. 6) Add an onChangeScript property to the Uif-DropdownControl bean, with the following java script: 7) Re-load the page and test it out

73. 73 Lab 6: Fun with HTML events Embedding JavaScript in your view definitions like that is a bit sloppy and not considered a “best practice”. It leads to maintenance hassles and isn’t re-usable. Let’s change our event to call a javascript function instead. 8) Go back to the “Affiliation” component in our view definition. 9) Let’s cut out the script and call a.js function instead. 10) Re-load the page and check it out

74. More Fun: If you have more time, Let’s add some other events

75. 75 Lab 6 Extra Exercises With JQuery and CSS, you can quickly and easily add all sorts of animations to your page. Of course you could add serious business to your application, but for today, let’s try a couple of silly exercises.

76. Lab 6: Extra Exercises Extra Exercise 1: onMouseOver event 1) Change your page so that when the user moves the mouse over the “About Me” section, all of the text in the section changes to red (or some other color). 2) And change it back to black when the mouse leaves the section. Yep, most events apply to groups and sections as well as individual elements. 76

77. Lab 6: Extra Exercises Extra Exercise 1: Solution 1) Change your page so that when the user moves the mouse over the “About Me” section, all of the text in the section changes to red (or some other color). 2) And change it back to black when the mouse leaves the section. 77 <bean id="Training-StudentInfo-Lab6" parent="Uif-HorizontalBoxSection" p:onMouseOverScript="jq(this).stop().css({ 'color': 'red'});" p:onMouseOutScript="jq(this).stop().css({ 'color': 'black'});">

78. Lab 6: Extra Exercises Extra Exercise 2: onMouseOver event Add a trick button to the page. 1. Create a button offering “Click here for a free scholarship” 1a. Create a separate group for the button 1b. Add the button to the group. 2. Add a mouse over event handler to the button which moves the button before they get a change to select it. 78

79. Lab 6: Extra Exercises Extra Exercise 2: Solution Add a trick button to the page. 1. Create a button offering “Click here for a free scholarship” 1a. Create a separate group for the button 1b. Add the button to the group. 2. Add a mouse over event handler to the button which moves the button before they get a change to select it. 79

80. Lab 6: Extra Exercises Extra Exercise 3-n: Create your own events Use your imagination to create your own event handlers! 80

81. Looking at various Rich Message options in KRAD Kuali University: Apply Now Extra Lab : Rich Messages Lab Objectives Understand what Rich Messages are and how they can be used in UI Setup some Rich Messages Demonstrate different types of Rich Messages

82. Extra Lab: Rich Messages Messages can be styled, including capability to support line breaks, rich text (fonts, colors, and other css) and images Messages can include active links to other information (urls) or to other functions (actions) within the Kuali application or Rice infrastructure Messages can include input fields (e.g. a dropdown choice embedded in a sentence). This functionality is provided through the use of special tags wrapped with brackets (“[]”) within the message text (these characters must be escaped if needed within the message text) Here are some of the places where Rich message text can be used  text (message)  constraint and Instructional text  checkbox and radio button items  error messages (includes inline validation messages) - styling and links only  hover help (tooltips) - styling and links only  other help content (from help icon) - styling and links only  headers (section titles, view header, page header, application header and footer content, banner content) 82

83. Instructions 1) Open up the view definition file TrainingApplicationView-Lab-RM.xml 2) Find the field that has a label p:label=“zip” 3) Add the following to the constraintText property of the input field "Only [color=red]digits[/color] allowed.“ This should add a constraint text for Zip with ‘digits’ in red color 4) Let’s add some more rich messages Find the bean with label "Race/Ethnicity“ and change the instructional text to “Please select the [link='http://kuali.org']ethnicity/race(s)[/link] you most closely identify yourself as” This should add an instructional text with a link in it 83 Extra Lab: rich messages

84. 5) Now lets try a message with inlineComponent. Inline component allows for using placeholders in the message with the patternof [n]. With inline component we can then refer to a text field, link field, images, input fields Find the bean with id=“Training-CollegeApplicationPage” and add the following bean as the last element after 6) Start up your application and see the result of the rich messages you added 84 Lab: Rich Messages <property name="messageText" value="Click [0] to get a full list of additional documents required."/>

85. Solution:

86. Partial Solution - Your code should look approximately like this: 86 Lab: rich messages <property name="messageText" value="Click [0] to get a full list of additional documents required."/>

87. Advanced Features:

88. 88 Lab: Advanced Features Within Rich Message text you can reference an external bean using an id. The pattern used is [id=‘beanId’]. This will put the component inline with the message content. Besides the id, you can also specify other property values to override in the referenced bean. E.g [id='Demo-SampleMessageInput3' propertyName=field12 required=false label='Label Text'] Look at the “other” checkbox option (that was added for this exercise) inside the race/ethnicity InputField for an example of this pattern. You may have also noticed [b][/b] In one of the instructionalText properties. This is an example of html content tags. See the next slide for a full description of all Rich Message text options available

89. 89 [id= property1=value property2=value] insert component with id specified at that location in the message. You can also set/override properties of the component referenced through by specifying those additional properties (must be separated by spaces). Textual properties must be wrapped in single quotes. [n] insert component at index n from the inlineComponent list. [ ][/ ] insert html content directly into the message content at that location, without the need to escape the <> characters in xml. [color= ][/color] wrap content in color tags to make text that color in the message. This is the same as wrapping the content in a span with color style set. [css= ][/css] apply css classes specified to the wrapped content. This is the same as wrapping the content in a span with the class property set. [link= ][/link] an easy way to create an anchor that will open in a new page to the href specified. This is the same as wrapping the content in an a tag with the target set as “_blank”. [action= data= ][/action] create an action link inline without having to specify a component by id or index. The options below MUST be in a comma separated list in the order specified. Specify 1-4 always in this order – for example, options CANNOT be skipped if you would like to only set methodToCall and ajaxSubmit, you must still set validateClientSide to its default value (note: this is parallel to how javascript functions with optional parameters are passed). The options (in order) are: methodToCall(String) validateClientSide(boolean) - true if not set ajaxSubmit(boolean) - true if not set successCallback(js function or function declaration) - this only works when ajaxSubmit is true