1. Liferay and Water For People From Data to Information Steve Clement Sr. Java Developer at EffectiveUI, Inc.#WaterForPeopleLR

2. Liferay Symposium 2013Agenda Introduction About EffectiveUI Water For People: Re-Imagine Reporting What we did: DEMO How we did it Q&A#WaterForPeopleLR 3. Liferay Symposium 2013 Worlds most mature and award winning user-focused technology firm Silver Partner with Liferay Founded April, 2005, ~100 full-time employees Denver (headquarters) Rochester, NY Manhattan Seattle San Francisco#WaterForPeopleLR 4. Liferay Symposium 2013The ClientWater For People brings together local entrepreneurs, civil society, governments, and communities to establish creative, collaborative solutions that allow people to build and maintain their own reliable safe water systems.#WaterForPeopleLR 5. Liferay Symposium 2013The Challenge Provide a transparent reporting platform to show not only the financial and water/sanitation service data, but also the narrative story for the locales served by Water For People#WaterForPeopleLR 6. Liferay Symposium 2013Why Liferay? Industry leader Support for a mix of content publishing and custom application Wealth of out-of-box tools Open source Shared vision of making a better world#WaterForPeopleLR 7. Liferay Symposium 2013Data begins at the sourceMonitoring: Data collected into a system known as FLOW#WaterForPeopleLR 8. Liferay Symposium 2013Data goes from FLOW to Excel#WaterForPeopleLR 9. Liferay Symposium 2013Additional Data Financial Community surveys Readiness Surveys Narrative contentmore spreadsheets#WaterForPeopleLR 10. Liferay Symposium 2013But what does it all mean?#WaterForPeopleLR 11. Liferay Symposium 2013Requirements Location Hierarchy: roll up the data Get spreadsheet data into application Visualize data meaningfullyStart with the ending#WaterForPeopleLR 12. Liferay Symposium 2013DEMO Water For People: Re-Imagine Reporting#WaterForPeopleLR 13. Liferay Symposium 2013End DemoLets talk about data#WaterForPeopleLR 14. Liferay Symposium 2013Location Hierarchy Four levels: district, country, region, global Data is tied to district level Data needs to roll up to higher levels#WaterForPeopleLR 15. Liferay Symposium 2013Warning! Its about to get technical#WaterForPeopleLR 16. Liferay Symposium 2013Location Hierarchy: Data Model District Region region_id PK Name latitude longitude etc.Country country_id PK region_id FK country_name latitude longitude etc.district_id PK country_id FK district_name latitude longitude etc.DistrictScore Possible solution: latitude and longitude can help plot data points on map.#WaterForPeopleLRdistrict_score_id PK district_id FK num_water_points year etc. 17. Liferay Symposium 2013But waitNavigation = Location Hierarchy! Control Panels Site Pages:Child page navigation perfectly matches our location hierarchy!#WaterForPeopleLR 18. Liferay Symposium 2013Navigation as Data Model Liferays Layout table to provide us with our We can use foreign key. The relationship of child to parent is already provided. LayoutDistrictScoreplid PK parentLayoutId name friendlyURL etc.district_id PK district_plid FK num_water_points year etc.#WaterForPeopleLR 19. Liferay Symposium 2013Service Builder We use districtLayoutPlid as a foreign keyFinder methods include all districts for a year#WaterForPeopleLR 20. Liferay Symposium 2013From here to there: how do we do this? Database Register a dedicated data folder in Documents & Media Let the admins associate the spreadsheets with parsers for that data type Register parsers with parser data types Extract data from spreadsheet and insert into Db using classes generated by Service Builder #WaterForPeopleLR 21. Liferay Symposium 2013Register Data Folder ID Get Folder ID 1. URL includes &_20_folderId=10531 2. Or SQL: SELECT folderId FROM lportal.dlfolder where name = 'Data';Then, in portal-ext.properties: data.folder.id=10531#WaterForPeopleLR 22. Liferay Symposium 2013Get Folder Id Where Spreadsheets Live Spring MVC Controller Add FileEntry objects and data type codes to model#WaterForPeopleLR 23. Liferay Symposium 2013Display dataTypes and FileEntries Create drop down of parser data typesIterate to display in table#WaterForPeopleLR 24. Liferay Symposium 2013Admins select a file and associates with a parser type#WaterForPeopleLR 25. Liferay Symposium 2013Spring for map of parsers: dependency injectionIn Spring Controller, inject parser map#WaterForPeopleLR 26. Liferay Symposium 2013Extract Data From Spreadsheet Apache POI Java API for Microsoft DocumentsGet the POI Workbook from Liferays FileEntry object#WaterForPeopleLR 27. Liferay Symposium 2013Pull out data of spreadsheet Column index from cell Appropriate data type from cell#WaterForPeopleLR 28. Liferay Symposium 2013Service Builder has created our model and utility classes to interact with the databaseWe look up the DistrictScore by unique compound key. If we dont have it, we create it. Otherwise, we update the values.#WaterForPeopleLR 29. Liferay Symposium 2013Show the data rolled up in the pin What are we really asking for? Answer: Two scores keyed to a location name and rendered in a specific location on the map#WaterForPeopleLR 30. Liferay Symposium 2013Multiple Web Content portlets need to get the data for the map pins#WaterForPeopleLR 31. Liferay Symposium 2013From Database to Pin Structured Content / Template System Portlet for Ajax call Render data using Highcharts#WaterForPeopleLR 32. Liferay Symposium 2013Structured Content Central America (174, 103)Need to put in X and Y coordinates of map point Possible default values if data not in system but still known#WaterForPeopleLR 33. Liferay Symposium 2013Template for structured contentCall JavaScript function with structured content data#WaterForPeopleLR 34. Liferay Symposium 2013JavaScript calls for efScores resource and expects JSON response called scoreMap#WaterForPeopleLR 35. Liferay Symposium 2013Create a system portlet for serving resources called from theme liferay-portlet.xml#WaterForPeopleLR 36. Liferay Symposium 2013In the call for the efScores resource, we get the current layout (i.e., the page we are on) and pass it and the year parameter into a service class Spring MVC Controller used to serve JSON resourceCurrent pagescoreMap returned in JSON view#WaterForPeopleLR 37. Liferay Symposium 2013So how do we get the rollup?Liferays Layout API!#WaterForPeopleLR 38. Liferay Symposium 2013We can start with the current layout plid and walk down to all the district-level plids using the API: Pseudo code: IF layout.hasChildren() THEN List children = layout.getChildren() //Go through all children until we get to lowest level ELSE Add layout.getPlid() to collection of district-level plids#WaterForPeopleLR 39. Liferay Symposium 2013Service Builder Finder Methods#WaterForPeopleLR 40. Liferay Symposium 2013Average the District Scores and group by the Layout names that are one level beneath the current layout Guatemala Service: 65 Sustainability: 28#WaterForPeopleLRExample: Central America Guatemala Honduras Nicaragua 41. Liferay Symposium 2013Get the scores from scoreMap[location name]If we dont have a score defined in the content structure (-1), get the score from the map.Send to function for creating pins#WaterForPeopleLR 42. Liferay Symposium 2013Create HTML element containers for the pins and then call Highcharts API#WaterForPeopleLR 43. Liferay Symposium 2013Rich charting and graphing tool with JavaScript API#WaterForPeopleLR 44. Liferay Symposium 2013Successes Rapid development Complex data rendered into easily understood visual information Out-of-box tools for CMS and DMS helped guide solution Liferay Theming gave consistent look and feel Customizing existing portlets gave us exactly what we needed Portlets as page composition: breaking up development tasks into manageable units#WaterForPeopleLR 45. Liferay Symposium 2013Looking forward Show trends Establish as a platform for other non-profits Continue innovation based on Water for Peoples rich data and Liferays capabilities Improve lives#WaterForPeopleLR 46. Liferay Symposium 2013Thank you! Questions: #WaterForPeopleLR ResourceURLEffectiveUIwww.effectiveui.comWater For Peoplewww.waterforpeople.orgWater For People: Re-imagine Reportingreporting.waterforpeople.orgSpring MVC and Liferaywww.effectiveui.com/blog/2013/09/17/l iferay-and-spring-mvcApache POI - the Java API for Microsoft Documentspoi.apache.orgHighcharts JSwww.highcharts.com/#WaterForPeopleLR