A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John...
Transcript of A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John...
![Page 1: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/1.jpg)
A Unified Admin UI and the use of Angular JSJohn ShepherdsonUK Data Service, UK Data Archive
IASSIST 2016Bergen, Norway
![Page 2: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/2.jpg)
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
![Page 3: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/3.jpg)
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
![Page 4: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/4.jpg)
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
![Page 5: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/5.jpg)
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
![Page 6: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/6.jpg)
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
![Page 7: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/7.jpg)
Unified Admin UI Framework
![Page 8: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/8.jpg)
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
![Page 9: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/9.jpg)
Unified look and feel
• Bootstrap framework• Master layout
![Page 10: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/10.jpg)
Unified look and feel
• Example
![Page 11: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/11.jpg)
Unified look and feel
• Navbar
![Page 12: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/12.jpg)
Unified look and feel
• Sidebar
![Page 13: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/13.jpg)
Unified look and feel
• Modals
![Page 14: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/14.jpg)
Unified look and feel
![Page 15: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/15.jpg)
Unified look and feel
• SASS - Syntactically Awesome Stylesheets• Compiles into CSS• Variables• Structure• Loops
• Theming• User experience• Improve navigational awareness
![Page 16: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/16.jpg)
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}');}
![Page 17: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/17.jpg)
Theming
![Page 18: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/18.jpg)
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
![Page 19: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/19.jpg)
Tooltips
![Page 20: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/20.jpg)
Tutorials
• Detects if new user
![Page 21: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/21.jpg)
Tutorials
• Numbered - step by step
![Page 22: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/22.jpg)
JIRA integration
![Page 23: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/23.jpg)
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
![Page 24: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/24.jpg)
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."
});
![Page 25: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/25.jpg)
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>
![Page 26: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/26.jpg)
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."
});
![Page 27: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/27.jpg)
Validation
• Example with required title
• Tabs highlight errors in complex forms
![Page 28: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/28.jpg)
Repeating controls
• Single repeating control
• Nested repeating form
![Page 29: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/29.jpg)
Controlled Vocabulary• Change made in CV Manager application• Version control• Automatic global detection of changes with option to
update
![Page 30: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/30.jpg)
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
![Page 31: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/31.jpg)
Benefits
• Fast and efficient – only loads what is required per page
• Single page vs. traditional website design
![Page 32: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/32.jpg)
Architecture
• N-tier – Database, web service, application• AngularJS repository pattern – ngResource
![Page 33: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/33.jpg)
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}
![Page 34: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/34.jpg)
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... } }
})();
![Page 35: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/35.jpg)
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>
![Page 36: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/36.jpg)
Lifecycle (4) – We’re done
• User interface - the end result
![Page 37: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/37.jpg)
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
![Page 38: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/38.jpg)
Summary
• Shared resources – less code duplication• Easier to maintain• Increased developer productivity• Simple to use
![Page 39: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/39.jpg)
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
![Page 40: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/40.jpg)
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/
![Page 41: A Unified Admin UI and the use of Angular JS · A Unified Admin UI and the use of Angular JS John Shepherdson UK Data Service, UK Data Archive IASSIST 2016 ... • The development](https://reader036.fdocuments.us/reader036/viewer/2022070721/5ee15bebad6a402d666c44fc/html5/thumbnails/41.jpg)
Questions
Thank you for listening