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 - linklink Individual page examples – Example: TablesTables – Example: Search & Select, Search ResultsSearch & SelectSearch Results – Example: MultiplicityMultiplicity – 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

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

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