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.
Powerful Start- the Key to Project Success, Barbara Laskowska
Using the Kuali Student Configurable User Interface Framework
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
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”));
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
William: provide an example screen shot? Mention breadcrumbs
User knowing where they are: breadcrumbs, page title, clearly indicated navigation
Once the begin working, meaningful labels on forms, good instructions and clean messaging, and help when they need it.
Configuration
Customize field:
Change label
Change widget (to a widget that supports the data type)
Constraints – requiredness, min/max chars.
Remove fields
Add fields – Thru dynamic attributes
Change field labels - Change "Course Number" to say "Subject Number" on the Course Id component for
Remove/change headers
Sections: Take almost all the fields and put them on a single screen for data entry so it is more like MIT's current course screen.
Functionality: versioning, LO categories
On a wiki
Not a configuration guide
Defines how things behave and look
UIM TOC (v2)
Page template
UIF takes UIM and based on configuration needs, makes some components configurable.
What’s in it?
On a wiki
Not a configuration guide
Defines how things behave and look
UIM TOC (v2)
Page template
UIF takes UIM and based on configuration needs, makes some components configurable.
In-depth example: Sections and fields
Screenshots with call outs
Show UIM evolved page
Show specific UIM pages for above
Show real working example
What are the pieces
Where the UIF fits in the “grand scheme”
What does the UIF contain?
Where are the boundaries of the UIF?
Simple View of our technical architecture for Kuali StudentUIF fits at the top of this stack and interacts directly with the userIt contains the controllers, views, configurers. It also contains theming such as css and images.It also talks to underlying business services and additional utility services such as the message serviceThese business services talk to our core entity services such as the lu serviceEverything on the diagram that has the wrench and screwdriver icon is configurable within KSI will be talking about how to configure some aspects the UIF today
This is a screenshot of KS as it will appear in R1.1I have highlighted the different parts of the screen, and their respective controllerThe LayoutController controls the display of the views, but also provides the object header and menu for navigation
You do this easily by using the Rice Message utility without touching any code
Once you have your intitution’s configuration project created
Changes to the constraints also give you on the fly UI validation against those constraints when the user interacts with your new field