1. Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014

2. What is Bootstrap? CSS and Javascript framework used to speed up the development of websites and web applications Open Source project available from GitHub Supports HTML5 and CSS3 Supported by all major browsers Uses LESS which controls the CSS, adding features that allow greater complexity and customisation while improving maintainability

3. Why use Bootstrap? Fast Easy Maintainable Cross Platform

4. Bootstrap Features – Grid System

5. Bootstrap Features – CSS

6. Font Awesome

7. Bootstrap Features – Javascript

8. Bootstrap – Responsive Design

9. Bootstrap and E:Vision

10. Bootstrap CSS-based TKT and different Field Input Types TTQs records Record Picker TTQ within the bootstrap dropdown Date Picker TTQ Dynamic ListBox TTQ Button Type TTQ

11. Old Application Decision Entry search screen

12. Bootstrap user interface and mimicking the Ajax by using the iframes based framework SRL within the iframe

13. Bootstrap Modals

14. Showing the state of the application within the modal e.g. Search or Processing

15. Zooming the text within the modal

16. Running the Task or SRL within the modal/iframe – STEP1

17. Running the Task or SRL within the modal/iframe – STEP2

18. Running the Task or SRL within the modal/iframe – STEP3

19. Running modal in the background to perform the DMU actions – STEP1

20. Running modal in the background to perform the DMU actions – STEP2

21. Ajax

22. Ajax to help solve the performance issue

23. Last Step – onload() assign values to the variables on the parent screen On Close button click run the jquery/ajax function to update the table Last Step – onload() assign values to the variables on the parent screen On Close button click run the jquery/ajax function to update the table

24. Setup variables on the parent Bulk Clearance Check screen

25. Execute the function with Ajax GET request to retrieve data from the SITS database, create the Json object and update the details on the parent screen

26. SRL and RQI records called by the ajax GET equest to return the Json object with the details of updated record

27. Table updated by the Ajax request without the need of refreshing the screen

28. Bootstrap UI Examples

29. UKBA – Immigration Overview Screen

30. Configuration Management System screen

31. Bursary Applications Management screen

32. Student Self Service – Course Details screen

33. Exam Attendance Screen

34. UKBA – Maintain Passport Details Screen

35. Questions? Tomasz Pogoda – tomasz.pogoda@ed.ac.uktomasz.pogoda@ed.ac.uk Jon Martin – jon.martin@ed.ac.ukjon.martin@ed.ac.uk