1. Creating Dashboards to Enhance the User Experience
User Group Meeting
October 8, 2014 Jim Adinolfi

2. Outline
Introduction
Navigation and UI
Reporting
Dashboards

3. Why Gadgets and Dashboards?
User Experience and Adoption (Navigation)
Creative usage enhances the user experience
Further customize system appearance
Familiar, icon-based gadgets flatten the learning curve
Data Visualization (Reporting)
Create high-level, dynamic view into KPIs
Highlight frequently run queries
Present data in easy-to-read graphs
Touch upon ordering and color coding link to signify importance
Bringing queries to the forefront by placing them on dashboards

4. Outline
Introduction
Navigation and UI
Reporting
Dashboards

5. Reinventing System Navigation
1) v4 introduced the ability to customize this. Limited to SuperTypeEntityTypeFunction within an Application

6. Reinventing System Navigation
Gadgets afford the ability to bring Function or EntityType to the forefront.
Can also intersperse functions from different EntityTypes
SEGUE: These are just two of the ways gadgets can be utilized…

7. Example Navigation Gadgets
Point is- whatever is important to your users comes to the forefront. You can bring “buried” links up (Queues), external links, etc.
Can create links to other dashboards to create a hierarchical view.
Again, can color coordinate.

8. How To: Navigation
<div id="content" class="appTile" style="border:solid 2px black; border-radius: 8px; overflow:hidden; background-color:#6BBFBD; width:190px; height:90px;text-align:left;padding-left: 10px; padding-top: 16px">
<p><b><a href="${servletUrl}?cmd=get&entityType=CORE%20DASHBOARD&entityId= ">
<img style="float:right; margin-right:0px; padding-right:11px;" src=" width="45%" height="45%" alt=“Inv" padding-right: "10px" border="20">
<br><span style="font-size: 17px; font-family: verdana,sans-serif">Inventory</span></a></b> </p>
</a></div>
<div style="clear:both;"></div>
Standard HTML (resources online).
Go through key points to change

9. How To: Navigation
<div id="content" class="appTile" style="border:solid 2px black; border-radius: 8px; overflow:hidden; background-color:#6BBFBD; width:190px; height:90px;text-align:left;padding-left: 10px; padding-top: 16px">
<p><b><a href="${servletUrl}?cmd=get&entityType=CORE%20DASHBOARD&entityId= ">
<img style="float:right; margin-right:0px; padding-right:11px;" src=" width="45%" height="45%" alt=“Inv" padding-right: "10px" border="20">
<br><span style="font-size: 17px; font-family: verdana,sans-serif">Inventory</span></a></b> </p>
</a></div>
<div style="clear:both;"></div>
Standard HTML (resources online).
Go through key points to change

10. Reworking Queries

11. Reworking Queries

12. How To: Query Gadget
<div id="content" class="appTile" style="border:solid 2px black; border-radius: 8px; overflow:hidden; background-color:#99B2DD;height:190px;width:190px;text-align:left;padding-left: 7px; padding-top: 5px">
<form action="${servletUrl}" method="post">
<input type="hidden" name="entityType" value="PATIENT">
<input type="hidden" name="queryDestination" value="listReport">
<input type="hidden" name="cmd" value="query">
<span style="font-size: 12px; font-family: verdana,sans-serif; color: white">
<u>Search Patients</u>
<br> Accession Number: <p><input type="text" name="ci_patient_accessionno"><br></p>
<br><p> Gender: <select name="ci_patient_gender">
<option value="">Any</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<select><br></p>
<br> Consented: Yes<input type="radio" value="Yes" name="ci_patient_consent">No<input type="radio" value="No" name="ci_patient_consent"><br></p>
<br><input type="reset">
<input type="submit" name="Submit">
</form>
</div>
1) Tell the story of the Patient Sample Gadget

13. Hands-On: Navigation Try It Yourself If You Finish Early…
Navigate to Gadget GDT64 and copy it
In a new tab, navigate to create a new Raw Material sample page to find URL command
Edit your gadget’s URL to link to the above page and update Text Display (Hint: Add a gadget name)
Test your gadget
If You Finish Early…
Experiment with the functionality of other cmds
getall (List All pages)
query-form (Query pages)
list-functions (List Functions pages)
Try It Yourself
Navigate to Gadget GDT65 and copy it
Change Material Type to Material Function as a search criteria (see Main Admin Panel)
Test your gadget (Search for ‘Thickener’)
If You Finish Early…
Add search criteria for another attribute
Remember to increase the height of the gadget!

14. Hands-On: Test Gadget Hints
Copy Gadget 64 so HTML content is in your new gadget
Find URL of page you want to gadget to link to
Change URL and Display Name

15. Hands-On: Search Gadget Hints
Copy Gadget 65 so HTML content is in your new gadget
Review available attributes to search on for Raw Materials in Details page
Edit gadget to change attribute from Material Type to Material Function

16. Outline
Introduction
Navigation and UI
Reporting
Dashboards

17. Reporting Gadgets Many different types all generated by ZingCharts
Report data, metrics, etc.

18. Pre-Requisites Save as Report Query
Save query criteria and report format
Differences between Live and Scheduled reports

19. How To: SmartGrid Gadget
var gridConfig = new Object();
var dataset = gadgetConfig.dataset;
var divIdToRenderTo = gadgetConfig.myDiv.id;
gridConfig.title = 'Target A Samples';
ExtGridUtil.loadGrid(gridConfig, dataset, divIdToRenderTo);

20. How To: Zing Gadget Report – DataSet Gadget "fields": [ {
"createGridColumn": false,
"fieldType": "NUMERIC_DATA",
"columnWidth": 100,
"fieldLabel": “H Bond Donors",
"barcodeFieldKey": "barcode",
"fieldKey": “H_DONORS_3" },
"fieldType": "ENTITY_NAME",
"fieldLabel": "name",
"fieldKey": "name" } …
var chartConfig = new Object();
chartConfig.chartType = 'bar';
var dataSeries = new Object();
dataSeries.fieldKey = 'H_DONORS_3';
chartConfig.dataSeries = dataSeries;
chartConfig.title= '# of H Bond Donors';
chartConfig.xAxisTitle= '# of H Bond Donors';
chartConfig.yAxisTitle= '# of Molecules';
chartConfig.numBins = 5;
var chart = ZingUtil.loadChart(chartConfig, gadgetConfig.dataset, gadgetConfig.myDiv.id);

21. Outline
Introduction
Navigation and UI
Reporting
Dashboards

22. Dashboards
Discuss ideas (combinations of links and reports, what the end user wants to see).
SEGUE: Screen real estate

23. Dashboard Layout Mobile Dashboard Widths Gadget Width (1)
Gadget Height (1)
Dashboard Height (2)
Relationship between dashboard and gadget widths
Dashboard
Width (5)
Mobile Dashboard Widths
Tablet (landscape) – 8
Phone (portrait) – 2

24. Dashboard Gadget Order
Dashboards fill left to right, top to bottom

25. How To: Dashboards
Application

26. Hands-On: SmartGrid Gadget
Try It Yourself
Navigate to Gadget GDT66
Change Title
Change Report Association to “Search All Polymers” (Barcode LRPT3)
Test your gadget

27. Hands-On: Dashboards Try It Yourself If You Finish Early…
Navigate to Dashboard AAQ5 (Quality Control Dashboard)
Add the Gadgets you created in previous exercises
Change Display Title
Test your Dashboard
If You Finish Early…
Modify the layout of the dashboard

28. Hands-On: Smart Grid Gadget Hints
Copy Gadget 66 so javascript content is in your new gadget
Modify Title
Associate report to add report content

29. Hands-On: Dashboard Hints
Use Quick Find to find Dashboard page
Click on Edit Dashboard hyperlink
Select gadgets and add order

30. Looking Forward (v5.0) User Experience and Adoption (Navigation)
Creative usage enhances the user experience.
Further customize system appearance.
Familiar, icon-based gadgets flatten the learning curve.
Data Visualization (Reporting)
Create high-level, dynamic view into KPIs.
Highlight frequently run queries
Present data in easy-to-read graphs

31. Summary
When used creatively, gadgets unlock the freedom to customize system visualization and enhance the user experience
Reporting gadgets afford high-level, easy to read views into key data
User Experience and Adoption (Navigation)
Creative usage enhances the user experience.
Further customize system appearance.
Familiar, icon-based gadgets flatten the learning curve.
Data Visualization (Reporting)
Create high-level, dynamic view into KPIs.
Highlight frequently run queries
Present data in easy-to-read graphs

32. Backup/Extra Slides

33. References HTML Reference Color Selection http://www.w3schools.com/