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

Outline Introduction Navigation and UI Reporting Dashboards

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

Outline Introduction Navigation and UI Reporting Dashboards

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

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…

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.

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=6904045"> <img style="float:right; margin-right:0px; padding-right:11px;" src="http://www.platformforscience.com/icons/white/set-q/q09.png" 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

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=6904045"> <img style="float:right; margin-right:0px; padding-right:11px;" src="http://www.platformforscience.com/icons/white/set-q/q09.png" 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

Reworking Queries

Reworking Queries

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

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!

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

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

Outline Introduction Navigation and UI Reporting Dashboards

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

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

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);

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);

Outline Introduction Navigation and UI Reporting Dashboards

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

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

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

How To: Dashboards Application

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

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

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

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

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

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

Backup/Extra Slides

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