SlideShare una empresa de Scribd logo
1 de 15
Descargar para leer sin conexión
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 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© 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 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© 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© 2012-14 SirionLabs Private Limited.
`
How We Achieved
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© 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 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© 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 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© 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© 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 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.

Más contenido relacionado

La actualidad más candente

Data Analytics Strategies & Solutions for SAP customers
Data Analytics Strategies & Solutions for SAP customersData Analytics Strategies & Solutions for SAP customers
Data Analytics Strategies & Solutions for SAP customersVisual_BI
 
Build Data Lakes & Analytics on AWS: Patterns & Best Practices
Build Data Lakes & Analytics on AWS: Patterns & Best PracticesBuild Data Lakes & Analytics on AWS: Patterns & Best Practices
Build Data Lakes & Analytics on AWS: Patterns & Best PracticesAmazon Web Services
 
Monitoring your Power BI Tenant
Monitoring your Power BI TenantMonitoring your Power BI Tenant
Monitoring your Power BI TenantAngel Abundez
 
Building the Data Lake with Azure Data Factory and Data Lake Analytics
Building the Data Lake with Azure Data Factory and Data Lake AnalyticsBuilding the Data Lake with Azure Data Factory and Data Lake Analytics
Building the Data Lake with Azure Data Factory and Data Lake AnalyticsKhalid Salama
 
Actions rules and workflow in alfresco
Actions rules and workflow in alfrescoActions rules and workflow in alfresco
Actions rules and workflow in alfrescoAlfresco Software
 
Power BI & SAP - Integration Options and possible Pifalls
Power BI & SAP - Integration Options and possible PifallsPower BI & SAP - Integration Options and possible Pifalls
Power BI & SAP - Integration Options and possible PifallsJJDE
 
Modernizing to a Cloud Data Architecture
Modernizing to a Cloud Data ArchitectureModernizing to a Cloud Data Architecture
Modernizing to a Cloud Data ArchitectureDatabricks
 
AWS를 통한 빅데이터 활용 고객 분석 및 캠페인 시스템 구축 사례 - 임혁용 매니저, AWS / 윤성준 차장, 현대백화점 :: AWS S...
AWS를 통한 빅데이터 활용 고객 분석 및 캠페인 시스템 구축 사례 - 임혁용 매니저, AWS / 윤성준 차장, 현대백화점 :: AWS S...AWS를 통한 빅데이터 활용 고객 분석 및 캠페인 시스템 구축 사례 - 임혁용 매니저, AWS / 윤성준 차장, 현대백화점 :: AWS S...
AWS를 통한 빅데이터 활용 고객 분석 및 캠페인 시스템 구축 사례 - 임혁용 매니저, AWS / 윤성준 차장, 현대백화점 :: AWS S...Amazon Web Services Korea
 
Db2 Warehouse ご紹介資料 20170922
Db2 Warehouse ご紹介資料 20170922Db2 Warehouse ご紹介資料 20170922
Db2 Warehouse ご紹介資料 20170922IBM Analytics Japan
 
Data Catalog & ETL - Glue & Athena
Data Catalog & ETL - Glue & AthenaData Catalog & ETL - Glue & Athena
Data Catalog & ETL - Glue & AthenaAmazon Web Services
 
Bonitasoft BPMN Presentation
Bonitasoft BPMN PresentationBonitasoft BPMN Presentation
Bonitasoft BPMN PresentationKashif Captain
 
Data Quality Best Practices
Data Quality Best PracticesData Quality Best Practices
Data Quality Best PracticesDATAVERSITY
 
Enterprise guide to building a Data Mesh
Enterprise guide to building a Data MeshEnterprise guide to building a Data Mesh
Enterprise guide to building a Data MeshSion Smith
 
Analysing and Troubleshooting Performance Issues in SAP BusinessObjects BI Re...
Analysing and Troubleshooting Performance Issues in SAP BusinessObjects BI Re...Analysing and Troubleshooting Performance Issues in SAP BusinessObjects BI Re...
Analysing and Troubleshooting Performance Issues in SAP BusinessObjects BI Re...BI Brainz
 
Migrating Monoliths to Microservices -- M3
Migrating Monoliths to Microservices -- M3Migrating Monoliths to Microservices -- M3
Migrating Monoliths to Microservices -- M3Asir Selvasingh
 
Change Management for Oracle Database with SQLcl
Change Management for Oracle Database with SQLcl Change Management for Oracle Database with SQLcl
Change Management for Oracle Database with SQLcl Jeff Smith
 
Discover SAP BusinessObjects BI 4.3 SP03
Discover SAP BusinessObjects BI 4.3 SP03Discover SAP BusinessObjects BI 4.3 SP03
Discover SAP BusinessObjects BI 4.3 SP03Wiiisdom
 
Building Serverless ETL Pipelines
Building Serverless ETL PipelinesBuilding Serverless ETL Pipelines
Building Serverless ETL PipelinesAmazon Web Services
 

La actualidad más candente (20)

Data Analytics Strategies & Solutions for SAP customers
Data Analytics Strategies & Solutions for SAP customersData Analytics Strategies & Solutions for SAP customers
Data Analytics Strategies & Solutions for SAP customers
 
Build Data Lakes & Analytics on AWS: Patterns & Best Practices
Build Data Lakes & Analytics on AWS: Patterns & Best PracticesBuild Data Lakes & Analytics on AWS: Patterns & Best Practices
Build Data Lakes & Analytics on AWS: Patterns & Best Practices
 
Data Sharing with Snowflake
Data Sharing with SnowflakeData Sharing with Snowflake
Data Sharing with Snowflake
 
Monitoring your Power BI Tenant
Monitoring your Power BI TenantMonitoring your Power BI Tenant
Monitoring your Power BI Tenant
 
Building the Data Lake with Azure Data Factory and Data Lake Analytics
Building the Data Lake with Azure Data Factory and Data Lake AnalyticsBuilding the Data Lake with Azure Data Factory and Data Lake Analytics
Building the Data Lake with Azure Data Factory and Data Lake Analytics
 
Actions rules and workflow in alfresco
Actions rules and workflow in alfrescoActions rules and workflow in alfresco
Actions rules and workflow in alfresco
 
Power BI & SAP - Integration Options and possible Pifalls
Power BI & SAP - Integration Options and possible PifallsPower BI & SAP - Integration Options and possible Pifalls
Power BI & SAP - Integration Options and possible Pifalls
 
Modernizing to a Cloud Data Architecture
Modernizing to a Cloud Data ArchitectureModernizing to a Cloud Data Architecture
Modernizing to a Cloud Data Architecture
 
AWS를 통한 빅데이터 활용 고객 분석 및 캠페인 시스템 구축 사례 - 임혁용 매니저, AWS / 윤성준 차장, 현대백화점 :: AWS S...
AWS를 통한 빅데이터 활용 고객 분석 및 캠페인 시스템 구축 사례 - 임혁용 매니저, AWS / 윤성준 차장, 현대백화점 :: AWS S...AWS를 통한 빅데이터 활용 고객 분석 및 캠페인 시스템 구축 사례 - 임혁용 매니저, AWS / 윤성준 차장, 현대백화점 :: AWS S...
AWS를 통한 빅데이터 활용 고객 분석 및 캠페인 시스템 구축 사례 - 임혁용 매니저, AWS / 윤성준 차장, 현대백화점 :: AWS S...
 
Db2 Warehouse ご紹介資料 20170922
Db2 Warehouse ご紹介資料 20170922Db2 Warehouse ご紹介資料 20170922
Db2 Warehouse ご紹介資料 20170922
 
Data Catalog & ETL - Glue & Athena
Data Catalog & ETL - Glue & AthenaData Catalog & ETL - Glue & Athena
Data Catalog & ETL - Glue & Athena
 
Bonitasoft BPMN Presentation
Bonitasoft BPMN PresentationBonitasoft BPMN Presentation
Bonitasoft BPMN Presentation
 
Data Quality Best Practices
Data Quality Best PracticesData Quality Best Practices
Data Quality Best Practices
 
Enterprise guide to building a Data Mesh
Enterprise guide to building a Data MeshEnterprise guide to building a Data Mesh
Enterprise guide to building a Data Mesh
 
Analysing and Troubleshooting Performance Issues in SAP BusinessObjects BI Re...
Analysing and Troubleshooting Performance Issues in SAP BusinessObjects BI Re...Analysing and Troubleshooting Performance Issues in SAP BusinessObjects BI Re...
Analysing and Troubleshooting Performance Issues in SAP BusinessObjects BI Re...
 
Migrating Monoliths to Microservices -- M3
Migrating Monoliths to Microservices -- M3Migrating Monoliths to Microservices -- M3
Migrating Monoliths to Microservices -- M3
 
Elastic Data Warehousing
Elastic Data WarehousingElastic Data Warehousing
Elastic Data Warehousing
 
Change Management for Oracle Database with SQLcl
Change Management for Oracle Database with SQLcl Change Management for Oracle Database with SQLcl
Change Management for Oracle Database with SQLcl
 
Discover SAP BusinessObjects BI 4.3 SP03
Discover SAP BusinessObjects BI 4.3 SP03Discover SAP BusinessObjects BI 4.3 SP03
Discover SAP BusinessObjects BI 4.3 SP03
 
Building Serverless ETL Pipelines
Building Serverless ETL PipelinesBuilding Serverless ETL Pipelines
Building Serverless ETL Pipelines
 

Destacado

Inside the mind of Generation D: What it means to be data-rich and analytica...
Inside the mind of Generation D:  What it means to be data-rich and analytica...Inside the mind of Generation D:  What it means to be data-rich and analytica...
Inside the mind of Generation D: What it means to be data-rich and analytica...Derek Franks
 
Creating Data Driven HTML5 Applications
Creating Data Driven HTML5 ApplicationsCreating Data Driven HTML5 Applications
Creating Data Driven HTML5 ApplicationsGil Fink
 
Creating Data Driven HTML5 Applications
Creating Data Driven HTML5 ApplicationsCreating Data Driven HTML5 Applications
Creating Data Driven HTML5 ApplicationsGil Fink
 
Designing Configurable and Customizable Applications
Designing Configurable and Customizable ApplicationsDesigning Configurable and Customizable Applications
Designing Configurable and Customizable ApplicationsDesign for Context
 
Java Script Based Client Server Webapps 2
Java Script Based Client Server Webapps 2Java Script Based Client Server Webapps 2
Java Script Based Client Server Webapps 2kriszyp
 
2015년 UX 최신 트렌드 및 전망
2015년 UX 최신 트렌드 및 전망2015년 UX 최신 트렌드 및 전망
2015년 UX 최신 트렌드 및 전망Billy Choi
 
(BDT313) Amazon DynamoDB For Big Data
(BDT313) Amazon DynamoDB For Big Data(BDT313) Amazon DynamoDB For Big Data
(BDT313) Amazon DynamoDB For Big DataAmazon Web Services
 
Ndc12 이창희 render_pipeline
Ndc12 이창희 render_pipelineNdc12 이창희 render_pipeline
Ndc12 이창희 render_pipelinechangehee lee
 
DDD 구현기초 (거의 Final 버전)
DDD 구현기초 (거의 Final 버전)DDD 구현기초 (거의 Final 버전)
DDD 구현기초 (거의 Final 버전)beom kyun choi
 
Amuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform ThinkingAmuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform ThinkingYury Vetrov
 
Interaction designers vs algorithms
Interaction designers vs algorithmsInteraction designers vs algorithms
Interaction designers vs algorithmscxpartners
 
Hortonworks Data in Motion Webinar Series Part 7 Apache Kafka Nifi Better Tog...
Hortonworks Data in Motion Webinar Series Part 7 Apache Kafka Nifi Better Tog...Hortonworks Data in Motion Webinar Series Part 7 Apache Kafka Nifi Better Tog...
Hortonworks Data in Motion Webinar Series Part 7 Apache Kafka Nifi Better Tog...Hortonworks
 
도메인 주도 설계의 본질
도메인 주도 설계의 본질도메인 주도 설계의 본질
도메인 주도 설계의 본질Young-Ho Cho
 
Startup Metrics for Pirates
Startup Metrics for PiratesStartup Metrics for Pirates
Startup Metrics for PiratesDave McClure
 

Destacado (15)

Inside the mind of Generation D: What it means to be data-rich and analytica...
Inside the mind of Generation D:  What it means to be data-rich and analytica...Inside the mind of Generation D:  What it means to be data-rich and analytica...
Inside the mind of Generation D: What it means to be data-rich and analytica...
 
Creating Data Driven HTML5 Applications
Creating Data Driven HTML5 ApplicationsCreating Data Driven HTML5 Applications
Creating Data Driven HTML5 Applications
 
Creating Data Driven HTML5 Applications
Creating Data Driven HTML5 ApplicationsCreating Data Driven HTML5 Applications
Creating Data Driven HTML5 Applications
 
Designing Configurable and Customizable Applications
Designing Configurable and Customizable ApplicationsDesigning Configurable and Customizable Applications
Designing Configurable and Customizable Applications
 
Java Script Based Client Server Webapps 2
Java Script Based Client Server Webapps 2Java Script Based Client Server Webapps 2
Java Script Based Client Server Webapps 2
 
2015년 UX 최신 트렌드 및 전망
2015년 UX 최신 트렌드 및 전망2015년 UX 최신 트렌드 및 전망
2015년 UX 최신 트렌드 및 전망
 
(BDT313) Amazon DynamoDB For Big Data
(BDT313) Amazon DynamoDB For Big Data(BDT313) Amazon DynamoDB For Big Data
(BDT313) Amazon DynamoDB For Big Data
 
Ndc12 이창희 render_pipeline
Ndc12 이창희 render_pipelineNdc12 이창희 render_pipeline
Ndc12 이창희 render_pipeline
 
Benefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular jsBenefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular js
 
DDD 구현기초 (거의 Final 버전)
DDD 구현기초 (거의 Final 버전)DDD 구현기초 (거의 Final 버전)
DDD 구현기초 (거의 Final 버전)
 
Amuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform ThinkingAmuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform Thinking
 
Interaction designers vs algorithms
Interaction designers vs algorithmsInteraction designers vs algorithms
Interaction designers vs algorithms
 
Hortonworks Data in Motion Webinar Series Part 7 Apache Kafka Nifi Better Tog...
Hortonworks Data in Motion Webinar Series Part 7 Apache Kafka Nifi Better Tog...Hortonworks Data in Motion Webinar Series Part 7 Apache Kafka Nifi Better Tog...
Hortonworks Data in Motion Webinar Series Part 7 Apache Kafka Nifi Better Tog...
 
도메인 주도 설계의 본질
도메인 주도 설계의 본질도메인 주도 설계의 본질
도메인 주도 설계의 본질
 
Startup Metrics for Pirates
Startup Metrics for PiratesStartup Metrics for Pirates
Startup Metrics for Pirates
 

Similar a Creating a Data Driven UI Framework

Developing XPages Applications
Developing XPages ApplicationsDeveloping XPages Applications
Developing XPages ApplicationsNiklas Heidloff
 
BP207 - Easy as pie creating widgets for ibm connections
BP207 - Easy as pie   creating widgets for ibm connectionsBP207 - Easy as pie   creating widgets for ibm connections
BP207 - Easy as pie creating widgets for ibm connectionsMikkel Flindt Heisterberg
 
Kony one studio technical training
Kony one studio technical trainingKony one studio technical training
Kony one studio technical trainingNiranjan Kumar Reddy
 
OCTO BOF - How to build Netvibes with AngularJS
OCTO BOF - How to build Netvibes with AngularJSOCTO BOF - How to build Netvibes with AngularJS
OCTO BOF - How to build Netvibes with AngularJSJonathan Meiss
 
From Idea to Web - Creating Linked Data Apps
From Idea to Web - Creating Linked Data AppsFrom Idea to Web - Creating Linked Data Apps
From Idea to Web - Creating Linked Data AppsBenjamin Nowack
 
Comparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAsComparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAsJennifer Estrada
 
Sumit_SharePoint
Sumit_SharePointSumit_SharePoint
Sumit_SharePointSumit Y
 
Narender Soni Resume - Updated
Narender Soni Resume - UpdatedNarender Soni Resume - Updated
Narender Soni Resume - UpdatedNarender Soni
 
We4IT lcty 2013 - infra-man - whats new in ibm domino application development
We4IT lcty 2013 - infra-man - whats new in ibm domino application developmentWe4IT lcty 2013 - infra-man - whats new in ibm domino application development
We4IT lcty 2013 - infra-man - whats new in ibm domino application developmentWe4IT Group
 
Entity Framework and Domain Driven Design
Entity Framework and Domain Driven DesignEntity Framework and Domain Driven Design
Entity Framework and Domain Driven DesignJulie Lerman
 
Learn everything about IBM iNotes Customization
Learn everything about IBM iNotes CustomizationLearn everything about IBM iNotes Customization
Learn everything about IBM iNotes CustomizationIBM Connections Developers
 
PayaPal-Resume
PayaPal-ResumePayaPal-Resume
PayaPal-ResumePayal Pal
 
SPCA2013 - Building Windows Client Applications for SharePoint 2013
SPCA2013 - Building Windows Client Applications for SharePoint 2013SPCA2013 - Building Windows Client Applications for SharePoint 2013
SPCA2013 - Building Windows Client Applications for SharePoint 2013NCCOMMS
 
JEE Conf 2015: Less JS!
JEE Conf 2015: Less JS!JEE Conf 2015: Less JS!
JEE Conf 2015: Less JS!_Dewy_
 
Practical Field Experience: Using Ajax / Dojo with WebSphere Portlet Factory
Practical Field Experience: Using Ajax / Dojo with WebSphere Portlet FactoryPractical Field Experience: Using Ajax / Dojo with WebSphere Portlet Factory
Practical Field Experience: Using Ajax / Dojo with WebSphere Portlet FactoryDavalen LLC
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...Mark Leusink
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...Mark Roden
 

Similar a Creating a Data Driven UI Framework (20)

Developing XPages Applications
Developing XPages ApplicationsDeveloping XPages Applications
Developing XPages Applications
 
Manikanta_Chimata
Manikanta_ChimataManikanta_Chimata
Manikanta_Chimata
 
BP207 - Easy as pie creating widgets for ibm connections
BP207 - Easy as pie   creating widgets for ibm connectionsBP207 - Easy as pie   creating widgets for ibm connections
BP207 - Easy as pie creating widgets for ibm connections
 
Resume ankur new
Resume ankur newResume ankur new
Resume ankur new
 
Kony one studio technical training
Kony one studio technical trainingKony one studio technical training
Kony one studio technical training
 
OCTO BOF - How to build Netvibes with AngularJS
OCTO BOF - How to build Netvibes with AngularJSOCTO BOF - How to build Netvibes with AngularJS
OCTO BOF - How to build Netvibes with AngularJS
 
From Idea to Web - Creating Linked Data Apps
From Idea to Web - Creating Linked Data AppsFrom Idea to Web - Creating Linked Data Apps
From Idea to Web - Creating Linked Data Apps
 
Comparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAsComparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAs
 
Sumit_SharePoint
Sumit_SharePointSumit_SharePoint
Sumit_SharePoint
 
Resume
ResumeResume
Resume
 
Narender Soni Resume - Updated
Narender Soni Resume - UpdatedNarender Soni Resume - Updated
Narender Soni Resume - Updated
 
We4IT lcty 2013 - infra-man - whats new in ibm domino application development
We4IT lcty 2013 - infra-man - whats new in ibm domino application developmentWe4IT lcty 2013 - infra-man - whats new in ibm domino application development
We4IT lcty 2013 - infra-man - whats new in ibm domino application development
 
Entity Framework and Domain Driven Design
Entity Framework and Domain Driven DesignEntity Framework and Domain Driven Design
Entity Framework and Domain Driven Design
 
Learn everything about IBM iNotes Customization
Learn everything about IBM iNotes CustomizationLearn everything about IBM iNotes Customization
Learn everything about IBM iNotes Customization
 
PayaPal-Resume
PayaPal-ResumePayaPal-Resume
PayaPal-Resume
 
SPCA2013 - Building Windows Client Applications for SharePoint 2013
SPCA2013 - Building Windows Client Applications for SharePoint 2013SPCA2013 - Building Windows Client Applications for SharePoint 2013
SPCA2013 - Building Windows Client Applications for SharePoint 2013
 
JEE Conf 2015: Less JS!
JEE Conf 2015: Less JS!JEE Conf 2015: Less JS!
JEE Conf 2015: Less JS!
 
Practical Field Experience: Using Ajax / Dojo with WebSphere Portlet Factory
Practical Field Experience: Using Ajax / Dojo with WebSphere Portlet FactoryPractical Field Experience: Using Ajax / Dojo with WebSphere Portlet Factory
Practical Field Experience: Using Ajax / Dojo with WebSphere Portlet Factory
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
 

Más de Ankur Bansal

Re orienting urban-planning towards local agenda 21
Re orienting urban-planning towards local agenda 21Re orienting urban-planning towards local agenda 21
Re orienting urban-planning towards local agenda 21Ankur Bansal
 
Pricing of petroleum products in India
Pricing of petroleum products in IndiaPricing of petroleum products in India
Pricing of petroleum products in IndiaAnkur Bansal
 
Alum requirement for surface water
Alum requirement for surface waterAlum requirement for surface water
Alum requirement for surface waterAnkur Bansal
 
Predicting Time for Corrosion Initiation in Reinforced concrete
Predicting Time for Corrosion Initiation in Reinforced concretePredicting Time for Corrosion Initiation in Reinforced concrete
Predicting Time for Corrosion Initiation in Reinforced concreteAnkur Bansal
 
Life cycle cost analysis
Life cycle cost analysisLife cycle cost analysis
Life cycle cost analysisAnkur Bansal
 

Más de Ankur Bansal (6)

Re orienting urban-planning towards local agenda 21
Re orienting urban-planning towards local agenda 21Re orienting urban-planning towards local agenda 21
Re orienting urban-planning towards local agenda 21
 
Hydrogeology 408
Hydrogeology 408Hydrogeology 408
Hydrogeology 408
 
Pricing of petroleum products in India
Pricing of petroleum products in IndiaPricing of petroleum products in India
Pricing of petroleum products in India
 
Alum requirement for surface water
Alum requirement for surface waterAlum requirement for surface water
Alum requirement for surface water
 
Predicting Time for Corrosion Initiation in Reinforced concrete
Predicting Time for Corrosion Initiation in Reinforced concretePredicting Time for Corrosion Initiation in Reinforced concrete
Predicting Time for Corrosion Initiation in Reinforced concrete
 
Life cycle cost analysis
Life cycle cost analysisLife cycle cost analysis
Life cycle cost analysis
 

Último

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 

Último (20)

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 

Creating a Data Driven UI Framework

  • 1. 1© 2012-14 SirionLabs Private Limited. Creating a Data Driven UI Framework February 28, 2014
  • 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© 2012-14 SirionLabs Private Limited. Write Once, Run Everywhere
  • 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© 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© 2012-14 SirionLabs Private Limited. ` How We Achieved
  • 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© 2012-14 SirionLabs Private Limited. Demo Image: Specific Handling For Complex UI Components
  • 9. 9© 2012-14 SirionLabs Private Limited. • Directive for Tables Demo Code: Specific Handling For Complex UI Components
  • 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© 2012-14 SirionLabs Private Limited. Solution: Data Binding For UI Element Angularjs two-way Data Binding
  • 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© 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© 2012-14 SirionLabs Private Limited. JSON Driven Template For Different Views
  • 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.