The document discusses the Kuali Student open source student administration software's need for a customizable user experience and interface. It introduces the User Interaction Model and Framework, which provide reusable interface components and the ability to configure fields, sections, and functionality through documentation and code. Examples are given of how to configure fields, sections, and other areas of the interface using this framework. The next steps discussed include further improvements to the documentation and frameworks.

1. open source administration software for education
next generation student system
Using the Kuali Student Configurable
User Interaction Model & Framework
Brian Smith - User Interaction Development Lead, San Joaquin Delta College
William Washington - User Experience Architect, University of Washington

2. open source administration software for education
Outline
• Kuali Student Needs: User Experience & Customization
• Solution: Reusable Components
• Implementation: User Interaction Model & Framework
• User Interaction Model: Overview & examples
• User Interaction Framework: Overview & examples
• Next Steps

3. open source administration software for education
Kuali Student Needs
• A great user experience
– Clear navigation, headers, input labels, instructions,
messaging, and help
• Institutional configuration
– Fields and field labels
• Customize fields
• Add/Remove fields
– Headers
– Sections (Pages)
– Functionality

4. open source administration software for education
Solution
• Reusable & configurable user interface elements
– Small “components”
• Buttons, Links
• Input fields (e.g. radio button, checkbox, text input)
– Big “composites”
• Tables
• File Upload tool; Commenting tool
• Benefits
– Consistent behavior across the application
– Consistent look and feel
– Reusable code

5. open source administration software for education
Implementation
• User Interaction Model (UIM)
– Documentation that specifies the behavior of
modular user interface elements for the developers
of the framework
– Interface design guide for implementers and code
contributors.
• User Interaction Framework (UIF)
– Leverages Google Web Toolkit (GWT), and is the
working code that will allow implementers to
configure the user interface.

6. open source administration software for education
User Interaction Model (UIM)
• Specifies the behavior and display of modular
user interface elements
• Evolving UI guide for implementers and
contributors
• UIM doesn’t describe how to configure UI
elements

7. open source administration software for education
UIM: Examples
• UIM structure - link
• Individual page examples
– Example: Tables
– Example: Search & Select, Search Results
– Example: Multiplicity
– Example: Sections and Fields

8. open source administration software for education
UIM: Example: Sections and Fields
Field (FieldDescriptor)
Section (GroupSection)
Requiredness
Explanatory Help
Label
Input
Instructions
Watermark
Constraints
Requiredness (by state)

9. open source administration software for education
User Interaction Framework (UIF)
• The GWT framework for Kuali Student which
presents and handles our layouts and data
• The UIF is responsible for navigation,
controllers, views, and laying out fields and
widgets on the screen – the functional
requirements of the UI
• Also responsible for interacting with the data
model, and services through RPC calls

10. open source administration software for education
UIF: Architecture

11. open source administration software for education
UIF: Components
SectionView (VerticalSectionView)
LayoutController (MenuSectionController)
Field (FieldDescriptor)
Section (GroupSection)

12. open source administration software for education
UIF: Components
• FieldDescriptors
– Fields that map to a data element that exists in the data dictionary
– Most fields are auto-generated based on their dictionary metadata, but
can be further customized
• Section
– Contain sections, which themselves contain fields
– SectionViews are sections that are also Views
• LayoutControllers
– Contain Views
– Handle the layout, navigation, and breadcrumbs for a defined section
automatically
– The LayoutController is also responsible for sending and receiving data
from the server
– An example of a LayoutController is the CourseProposalController

13. open source administration software for education
UIF: How To Configure
• Defining Fields and Sections on a screen
– Course and Program screens use a configurer class to define
the fields displayed on the screen
– To override: define a configurer which extends the default
configurer and override its methods to change the content
that appears on the screen. Then, use GWT deferred
binding to use your custom configurer instead.
• Customizing widgets
– Similarly, some widgets in the UIF can be customized by
institutions through deferred binding
• Visual Design Theme
– The existing Theme can also be overridden in a similar
fashion through deferred binding

14. open source administration software for education
UIF: Examples
• Field Configuration
– Change label
– Add a new field
– Advanced field configuration
• Section configuration
– Change field location
– Change section location

15. open source administration software for education
UIF: Changing Field Labels
• Changing a Label
– A field is defined with a message key that
corresponds with messages in the DB
– You can change the value of the message in the DB
using SQL or by using the Rice message utility for KS
– Alternatively, hardcode the text in the code when
you override the configurer, if you do not need to
change the text during runtime
addField(section, COURSE + "/" + COURSE_TITLE, generateMessageInfo(“courseTitle”));

16. open source administration software for education
UIF: Changing Field Labels - Example
• Before
• After

17. open source administration software for education
UIF: Changing Field Labels - Example

18. open source administration software for education
UIF: Additional Field Label changes -
Example
• Change additional labels of a field
– “-instruct” for instructions
– “-help” for help
– “-watermark” for watermarks in text fields
– “-constraints” for constraint help text below the
input field

19. open source administration software for education
UIF: Add a new field
1. Add a new data field in your custom
dictionary extension/override
<bean id="org.kuali.student.lum.course.dto.CourseInfo"
parent="org.kuali.student.lum.course.dto.CourseInfo-parent" >
<property name="attributes">
<list merge="true">
<ref bean="courseInfo.newField" />
</list>
</property>
</bean>
<bean id="courseInfo.newField" parent="baseString">
<property name="name" value="newField" />
<property name="minOccurs" value="1" />
<property name="maxLength" value=“4" />
<property name="dynamic" value="true" />
</bean>

20. open source administration software for education
UIF: Add a new field
2. Add the field using its field key to a section in
your custom configurer
VerticalSectionView section = initSectionView(CourseSections.COURSE_INFO,
LUConstants.INFORMATION_LABEL_KEY);
…
addField(section, COURSE + "/" + "newField", generateMessageInfo("New
Field"));
…

21. open source administration software for education
UIF: Add a new field
3. Use your custom configurer, instead of the
default one, in your gwt module through
deferred binding
<replace-with
class="edu.kuali.config.lum.lu.ui.client.course.configuration.SampleCourseConfigurer"
>
<when-type-is
class="org.kuali.student.lum.lu.ui.course.client.configuration.CourseConfigurer"/>
</replace-with>

22. open source administration software for education
UIF: Add a new field
4. Test:
• Note the field’s size and required indicator –
the field is generated based on its metadata:
maxLength = 4 and minOccurs = 1

23. open source administration software for education
UIF: Advanced Field Configuration
• You can change the field’s widget:
• You can also change its binding (when there are
differences between how data is stored and how it is
represented in the UI; ie, the translation)
FieldDescriptor addField(Section section, String fieldKey, MessageKeyInfo messageKey,
Widget widget)
fieldDescriptor.setModelWidgetBinding(myNewBinding);

24. open source administration software for education
UIF: Change Field Location
• Simply change the order of the fields in a
section
• You can also delete fields from a section by
removing the addField call
addField(section, COURSE + "/" + COURSE_TITLE,
generateMessageInfo(LUConstants.COURSE_TITLE_LABEL_KEY));
addField(section, COURSE + "/" + TRANSCRIPT_TITLE,
generateMessageInfo(LUConstants.SHORT_TITLE_LABEL_KEY));

25. open source administration software for education
UIF: Change Section Location
• Move a section by changing the order of the
addSection calls on its parent section
• Change the menu items by moving/deleting
the addMenuItem calls
• Result:
layout.addMenuItem(sections, generateCourseInfoSection());
layout.addMenuItem(sections, generateGovernanceSection());
layout.addMenuItem(sections, generateCourseLogisticsSection());

26. open source administration software for education
UIF: Configurable UI Areas
• Following similar configuration patterns
shown, the following areas are also
configurable (with some divergence)
– Curriculum Management Home
– Course Proposal
– Course Summary Table
– View Course
– View and Edit Program Major
– View and Edit Program Specialization

27. open source administration software for education
Next Steps
• Planned UIM improvements
– General design principles
– Page flow patterns & principles
– Page layout templates and patterns
• Planned UIF improvements
– Investigating GWT 2.1 and MVP framework
– Improved documentation
• KS is looking at complementing the UIF with
KNS/KRAD for the development of some KS
administration screens in it’s next release

28. open source administration software for education
Q & A