Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1© 2012-14 SirionLabs Private Limited.
Creating a Data Driven UI Framework
February 28, 2014
2© 2012-14 SirionLabs Private Limited.
Problems Faced
• Repetitive field’s code in a single view
• Repetitive group’s code...
3© 2012-14 SirionLabs Private Limited.
Write Once, Run Everywhere
4© 2012-14 SirionLabs Private Limited.
Requirement XYZ
Requirement PQR
Write Once, Run Everywhere
Requirement ABC Requirem...
5© 2012-14 SirionLabs Private Limited.
Write Once, Run Everywhere
Independent UI Framework
• JSON Dependent UI with no ser...
6© 2012-14 SirionLabs Private Limited.
`
How We Achieved
7© 2012-14 SirionLabs Private Limited.
JSON Based Field Population
• Field type, validations, data model, specific
propert...
8© 2012-14 SirionLabs Private Limited.
Demo Image: Specific Handling For Complex UI Components
9© 2012-14 SirionLabs Private Limited.
• Directive for Tables
Demo Code: Specific Handling For Complex UI Components
10© 2012-14 SirionLabs Private Limited.
Explanation :Specific Handling For Complex UI Components
How these tables are gett...
11© 2012-14 SirionLabs Private Limited.
Solution: Data Binding For UI Element
Angularjs two-way Data Binding
12© 2012-14 SirionLabs Private Limited.
Dynamic Template Generation Based On Layout JSON
Solution: Multiple Templates For ...
13© 2012-14 SirionLabs Private Limited.
JSON
Higher Order
DOM
Generator
DOM
Generator
DOM
HTML Template free DOM Generatio...
14© 2012-14 SirionLabs Private Limited.
JSON Driven Template For Different Views
15© 2012-14 SirionLabs Private Limited.
Demo Explained: JSON Driven Template For Different Views
How is JSON Creating the ...
Upcoming SlideShare
Loading in …5
×

Creating a Data Driven UI Framework

The presentation will be about the data driven UI generation with the help of angularjs. Some of the powerful features of angularjs like
Two way data binding,
Dynamic templates, and
On the go compilation of the HTML
are used to achieve the goal.
Generally, multiple HTML templates are created for different views in a web application but we are going to discuss an approach where we create dynamic dom generator based on the JSON received and what to do to write the reusable code.

Creating a Data Driven UI Framework

  1. 1. 1© 2012-14 SirionLabs Private Limited. Creating a Data Driven UI Framework February 28, 2014
  2. 2. 2© 2012-14 SirionLabs Private Limited. Problems Faced • Repetitive field’s code in a single view • Repetitive group’s code in application Specific Handling For Complex UI Components • Populate UI from received data • Populate data from user inputs Data Binding For UI Elements • Even if the views have similar elements, we still had to write different html files. Multiple HTML Templates For Different Views
  3. 3. 3© 2012-14 SirionLabs Private Limited. Write Once, Run Everywhere
  4. 4. 4© 2012-14 SirionLabs Private Limited. Requirement XYZ Requirement PQR Write Once, Run Everywhere Requirement ABC Requirement ABC Requirement PQR Requirement XYZ Write Once, Run Once Write Once, Run Everywhere Let’s code Again more code Tired of writing it again Let me plan and code Oh! I can reuse the previous code Ah! This is already taken care of
  5. 5. 5© 2012-14 SirionLabs Private Limited. Write Once, Run Everywhere Independent UI Framework • JSON Dependent UI with no server side rendering (Avoid php, jsp etc. for HTML generation) and independent of the technology used at back-end. Create Generic UI Components • Write UI code with a vision to use the same code for future usage. Assume that all the things that can change will change.
  6. 6. 6© 2012-14 SirionLabs Private Limited. ` How We Achieved
  7. 7. 7© 2012-14 SirionLabs Private Limited. JSON Based Field Population • Field type, validations, data model, specific properties are there in JSON Custom Html Tags Using Angularjs Directives • For repetitive fields like data tables with custom needs and for repetitive groups like dependent dropdowns, angularjs directives were used. Solution: Specific Handling For Complex UI Components
  8. 8. 8© 2012-14 SirionLabs Private Limited. Demo Image: Specific Handling For Complex UI Components
  9. 9. 9© 2012-14 SirionLabs Private Limited. • Directive for Tables Demo Code: Specific Handling For Complex UI Components
  10. 10. 10© 2012-14 SirionLabs Private Limited. Explanation :Specific Handling For Complex UI Components How these tables are getting created • HTML is specifying the component we need to pick (this is also conditional, depending on the parent field) • myTable directive picks up the options, layout url and layout data url based on the JSON and draw the table accordingly. • Events are also handled inside the directive at element level (no global selectors)
  11. 11. 11© 2012-14 SirionLabs Private Limited. Solution: Data Binding For UI Element Angularjs two-way Data Binding
  12. 12. 12© 2012-14 SirionLabs Private Limited. Dynamic Template Generation Based On Layout JSON Solution: Multiple Templates For Different Views Every UI component is treated as a field. Each field’s information lies in JSON: • Components like tabs, tab-content, tables, buttons, popups, text input, text area, select etc. are all fields. • Field attributes like editable/non-editable, validations, data-source etc. are contained in JSON.
  13. 13. 13© 2012-14 SirionLabs Private Limited. JSON Higher Order DOM Generator DOM Generator DOM HTML Template free DOM Generation Layout Info (from JSON) Data Binding Auto Update Based on values in DOM
  14. 14. 14© 2012-14 SirionLabs Private Limited. JSON Driven Template For Different Views
  15. 15. 15© 2012-14 SirionLabs Private Limited. Demo Explained: JSON Driven Template For Different Views How is JSON Creating the layout • Hierarchical structure of JSON is specifying the box structure of HTML • Type tabs specifies that a tab is needed • Next, type basic indicates the form type layout then type borderbox is asking to draw a box and at further level fields like input, dynamic table are inserted based on the type specified in JSON. • Each field has a name associated with it which binds that field to data.

×