1. Looking at various Rich Message options in KRAD Kuali University: Apply Now 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

2. Lab: Rich Messages Messages can be styled, including capability to support line breaks, rich text (fonts, colors, and other stylistic aspects) and images Messages can include active links to other information (urls) or to other functions within the Kuali application or Rice infrastructure Messages can include input fields (e.g. a dropdown choice embedded in a sentence). 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) 2

3. 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 3 Lab: rich messages

4. 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 <property name="messageText" value="Click [0] to get a full list of additional documents required."/> 4 Lab: Rich Messages 8) Start up your application and see the result of the rich messages you added

5. Solution:

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

7. Advanced Features:

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

9. 9 [id= property1=value property2=value] [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] [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] [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] [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] [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] [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