A Unified Admin UI and the use of Angular JSJohn ShepherdsonUK Data Service, UK Data Archive

IASSIST 2016Bergen, Norway

What is the UK Data Service?

The UK Data Service provides unified access to the UK’s largest collection of social, economic and population data.• Access to high-quality local, regional, national and

international social and economic data• Support for policy-relevant research in the higher

education, public and commercial sectors• Guidance and training for the development of skills in

data use• The development of best practice data preservation and

sharing standards• The sharing of expertise with international data

providers to remove barriers to accessing data

Who Delivers the UK Data Service?

Delivered by staff with specialise expertise in research data, based at higher education institutions across the UK• UK Data Archive, University of Essex• Jisc• The Cathie Marsh Institute for Social Research

(CMIST), University of Manchester• School of Geography, University of Leeds• Geography and the Environment, University of

Southampton• Department of Information Studies and the Centre for

Advanced Spatial Analysis, University College London• EDINA, University of Edinburgh

Objective

To migrate away from legacy systems and develop a set of applications to manage the entire lifecycle of the repository and archiving process.

A schema-neutral database offer supports for current and future versions of DDI (and other metadata required to support our collections).

• Support core business workflow• Pre-Ingest• Ingest• Access – User account portal• Administration - Controlled Vocabulary/User Manager

Problem

• User experience• Too many applications can be overwhelming• Different layouts increase learning curve• Access control – repetitive authentication

• Technical development• Risk of code duplication• Hard to maintain• Increased complexity as new applications/functionality

is implemented

Solution

• A unified user experience delivered by a core reusable framework.

• CDN – Content Delivery Network• Serves assets which are shared between applications• Provides a single location where code can be modified and

shared – DRY (Don’t Repeat Yourself)• Easier maintenance going forward• Increases productivity and reduces developer resources required

for delivery

• SSO – Single Sign On and permissions handling

Unified Admin UI Framework

Features

• Unified look and feel – reduced learning curve• Responsive themes• Context aware tutorials and help tooltips

• Authentication, session and permission handling• Form handling

• Control library• Automatic data validation

• Agent support• Individuals• Organisations

• Controlled vocabulary• Update mechanism

Unified look and feel

• Bootstrap framework• Master layout

Unified look and feel

• Example

Unified look and feel

• Navbar

Unified look and feel

• Sidebar

Unified look and feel

• Modals

Unified look and feel

Unified look and feel

• SASS - Syntactically Awesome Stylesheets• Compiles into CSS• Variables• Structure• Loops

• Theming• User experience• Improve navigational awareness

SASS$themes: ( 'blue': #205081, 'green': #02680D, 'red': #812020, 'purple': #800080, 'teal': #006161, 'orange': #A06224);

@mixin generate-theme($color, $theme:'') { $lighterColor: scale-lightness($color, 15); $darkerColor: scale-lightness($color, -20);

#{$theme}.theme-color { color: $color !important; }

#{$theme}.theme-background { background-color: $color !important; }}

@each $theme, $color in $themes { @include generate-theme ($color, '.theme-#{$theme}');}

Theming

Integrated help system

• Tooltips• Allows additional descriptive text, explaining a particular UI

element• Used with form controls – built into form control library

• Tutorials (context aware)• Different help provided depending on the current page and

action being performed

• Complete customisation• Can be enabled/disabled per application/screen

Tooltips

Tutorials

• Detects if new user

Tutorials

• Numbered - step by step

JIRA integration

Form control library

• Reusable form controls which can be dropped into any application/page

• Textbox/textarea• Checkbox/radio• HTML editor• Select/dropdowns• Agent Picker• CV Picker• Single and multi repeating controls

Textbox example

• Configuration in razor…Utility.RenderControl(Html, new Textbox{

Label = "Title",NgModel = "title",Type = Textbox.Types.Text,Validations = new List<Validity> {

new Required(),new MinLength(10),new MaxLength(100)

},HelpText = "Enter the title for this study."

});

Alternative…<div class="row form-group" data-ng-class ="{ 'has-error' : @(ControlHelper.GetForm(Model) ).@(Model.NgModel.Replace( ".", string.Empty)).$invalid && vm.formSubmitted }">

<label for="@(Model.NgModel.Replace( ".", string.Empty))@(ControlHelper.GetForm(Model) != "form" ? "{{$index}}" : string.Empty)" class="col-sm-4 col-md-3 control-label @(ControlHelper.GetRequired(Model) )">@(Html.Raw(! string.IsNullOrEmpty(Model.Label) ? string.Format("{0}:", Model.Label) : string.Empty))</label>

<div class="col-sm-8 col-md-9 help-padding">

<input class="form-control" id="@(Model.NgModel.Replace( ".", string.Empty))@(ControlHelper.GetForm(Model) != "form" ? "{{$index}}" : string.Empty)" name="@(Model.NgModel.Replace( ".", string.Empty))" type="@(Model.Type == Textbox.Types.Date ? "{{dateInputType}}" : Model.Type.ToString().ToLower() )" placeholder ="@(Model.Placeholder ?? string.Empty)" data-ng-model ="@(ControlHelper.GetNgModelBase(Model) ).@(Model.NgModel )" @(Model.Type == Textbox.Types.Date ? "data-ukda-date-picker" : string.Empty) @(ControlHelper.GetRequired(Model) ) @(Html.Raw(ControlHelper.GetMinLength(Model)) ) @(Html.Raw(ControlHelper.GetMaxLength(Model)) ) @(Html.Raw(ControlHelper.GetMinNumber(Model)) ) @(Html.Raw(ControlHelper.GetPattern(Model)) ) @(Html.Raw(! string.IsNullOrEmpty(Model.CustomAttributes) ? Model.CustomAttributes : string.Empty))>

@if (ControlHelper.GetMaxLengthValue(Model) > 0) { <label data-model ="@(ControlHelper.GetNgModelBase(Model) ).@(Model.NgModel )" data-maximum ="@(ControlHelper.GetMaxLengthValue(Model) )" data-ukda-characters-remaining ></label> }

<label for="@(Model.NgModel.Replace( ".", string.Empty))@(ControlHelper.GetForm(Model) != "form" ? "{{$index}}" : string.Empty)" class="help-block" data-ng-show ="@(ControlHelper.GetForm(Model) ).@(Model.NgModel.Replace( ".", string.Empty)).$invalid && vm.formSubmitted"> <span data-ng-bind-html ="'@(Model.Label )' | validation: @(ControlHelper.GetForm(Model) ).@(Model.NgModel.Replace(".", string.Empty)).$error"></ span> </label>

@if (!string.IsNullOrEmpty(Model.HelpText)) { <a class="help-tooltip" href="#" data-toggle ="tooltip" title="@(Html.Raw(Model.HelpText) )" tabindex="-1">

<i class="fa fa-question-circle"></ i></a> }

</div>

</div>

Agent Picker example

• Configuration in razor…Utility.RenderControl(Html, new AgentPicker{

Label = "Assign to",NgModel = "assignedTo",Type = AgentPicker.Types.Staff,Validations = new List<Validity> {

new Required()},HelpText = "Select the assignee for this study."

});

Validation

• Example with required title

• Tabs highlight errors in complex forms

Repeating controls

• Single repeating control

• Nested repeating form

Controlled Vocabulary• Change made in CV Manager application• Version control• Automatic global detection of changes with option to

update

AngularJS

• An open-source JavaScript framework used to develop single page web applications

• Designed for use with client-side model–view–controller (MVC) and model–view–view-model (MVVM) architectures

• Maintained by Google

Benefits

• Fast and efficient – only loads what is required per page

• Single page vs. traditional website design

Architecture

• N-tier – Database, web service, application• AngularJS repository pattern – ngResource

Lifecycle (1) – Get the data

• JSON - JavaScript Object Notation

{ "genericId": "0011cd89-430f-48e1-b640-a3de60cdf68d" , "friendlyId": 12345, "title": "Example study name" , "currentStatus": "Released", "currentlyAssignedTo" : "Ashley Fox", "currentRelease": 1, "currentVersion": 1, "currentReleaseCreated" : "2016-04-25T09:40:41.433" , "createdDate": "2016-04-25T09:40:41.433" , "createdById": "d296e316-32bf-4385-bab2-198f7d759d57" , "createdBy": "Ashley Fox", "lastUpdatedById" : "d296e316-32bf-4385-bab2-198f7d759d57", "lastUpdated": "2016-04-25T09:40:41.433" , "lastUpdatedBy": "Ashley Fox", "isLocked": false}

Lifecycle (2) – Pass it on

• AngularJS controller – make data available to page(function () {

'use strict';

angular .module('ukda.app.modules.studies') .controller('ViewStudyController', ViewStudyController);

ViewStudyController.$inject = ['study'];

function ViewStudyController(study) { var vm = this; vm.study = study; vm.exampleMethod = exampleMethod;

////////////

function exampleMethod() { // Do something... } }

})();

Lifecycle (3) – Render the data

• HTML - HyperText Markup Language<div class="panel panel-default" > <div class="panel-body">

<div class="form-group"> <label>ID</label> <p data-ng-bind="vm.study.friendlyId" ></p> </div>

<div class="form-group"> <label>Title</label> <p data-ng-bind="vm.study.title"></p> </div>

<div class="form-group"> <label>Status</label> <p data-ng-bind="vm.study.currentStatus"></p> </div>

</div></div>

Lifecycle (4) – We’re done

• User interface - the end result

Summary

• Objective• To migrate away from legacy systems and develop a set of

applications to manage the entire lifecycle of the repository and archiving process.

•• Problem• User experience

• Too many applications can be overwhelming• Different layouts increase learning curve• Access control – repetitive authentication

• Technical development• Increased complexity as new applications/functionality is implemented• Hard to maintain• Risk of code duplication

Summary

• Shared resources – less code duplication• Easier to maintain• Increased developer productivity• Simple to use

Wider Adoption?

We are exploring the possibility of making the framework Open Source

- It could have great benefits for organisations which rely on a disparate developer community

- Reduce development effort- Provide consistent User Experience

- One potential beneficiary is CESSDA- components for its pan-European Research Infrastructure will

be developed by multiple agencies

Resources

• AngularJS• https://angularjs.org/• Bootstrap• http://getbootstrap.com/• JSON• http://www.json.org/• MVC• http://www.asp.net/mvc• SASS• http://sass-lang.com/

Questions

Thank you for listening