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

2

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

3

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

controllerp:actionLabel=“Submit” – the name of the buttonp: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)

Lab 3 Actions

4

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.

Lab 3 Actions

Solution:

6

Partial Solution - Your code should look approximately like this:

Lab 3 Actions

<property name="footer"> <bean parent="Uif-FooterBase"> <property name="items"> <list> <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()"/> </list> </property> </bean> </property>

Advanced Features:

8

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

9

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