This is the library, I have been playing around since couple of days, I am amazed to see the potential of designs you can make with bare minimum code. Salesforce mobile pack for polymer is designed by mobile sdk team, which is now an open source project. The project solely sits on top of Google Polymer platform. Basically, these are collection of web-components that links the data to Salesforce. On the back-end, the components connects to Salesforce using Forcetk and other JavaScript libraries with collection of style-sheet that follow design guideline provided by Salesforce, these are available as components.What is Google Polymer and Web Components?
In my last post here, I have discussed the architecture and what define a web component and how they work with Google Polymer.
What does this Library Do ?
This library provides fundamental building blocks to create application on HTML5 that runs on top of mobile platform. I would like to give special thanks to mobile team lead here +Akhilesh Gupta for spending great time about insight and potential of the library. Again, this library is under heavy development and feel free to raise issue/question either github or Salesforce Mobile SDK team.
This library provides fundamental building blocks to create application on HTML5 that runs on top of mobile platform. I would like to give special thanks to mobile team lead here +Akhilesh Gupta for spending great time about insight and potential of the library. Again, this library is under heavy development and feel free to raise issue/question either github or Salesforce Mobile SDK team.
Mobile UI elements are web components made on top Google Polymer Framework and allows you custom design elements. Polymer platform provide designer (studio like) UI for components, this designer lets you drag and drop components and link to your salesforce organization to pull data from your salesforce organization.
Login : One click to connect with Salesforce and authorize to use your org.
Drag and Drop UI : Smoothly drag and drop UI components from the side-panel.
You can drag-drop elements in the designer app (similar to design studio) which allows you to freely drag-drop the UI elements and plug in with data source to populate.
Primarily the library is collection of two sets of elements, the data-elements and visual-element (UI-elements), the data-elements are data binders, that lets developers, link to data source and comes with attributes to filter and manipulate data, while on the other hand, UI components are visible components which you can see while dropping them on designer studio and again comes with attributes related to design (like color, size and more)
Data Elements - Attach data elements, the data elements are the data binders that bind the object with view, these are polymer components to be used for linking data source, you can attach/bind/link any custom or standard object of Salesforce with them.
List View - One data is attached you create the list view, you can change the query and queryType to SOQL, SOSL depending on type of query you want to make. The list view gives details of records that match criteria, just drag the header and details view provide the details of record
Detail View - For each record, you can pull header and related list.
Toggle for Auto-Generated Code : Just with one click, you can toggle between designer/code and interestingly you see the total line of code reduced to significant level, which is the power encapsulation that polymer leverages by importing HTML and lots of JavaScript from back-end.
Login : One click to connect with Salesforce and authorize to use your org.
Drag and Drop UI : Smoothly drag and drop UI components from the side-panel.
You can drag-drop elements in the designer app (similar to design studio) which allows you to freely drag-drop the UI elements and plug in with data source to populate.
Primarily the library is collection of two sets of elements, the data-elements and visual-element (UI-elements), the data-elements are data binders, that lets developers, link to data source and comes with attributes to filter and manipulate data, while on the other hand, UI components are visible components which you can see while dropping them on designer studio and again comes with attributes related to design (like color, size and more)
Data Elements - Attach data elements, the data elements are the data binders that bind the object with view, these are polymer components to be used for linking data source, you can attach/bind/link any custom or standard object of Salesforce with them.
List View - One data is attached you create the list view, you can change the query and queryType to SOQL, SOSL depending on type of query you want to make. The list view gives details of records that match criteria, just drag the header and details view provide the details of record
Detail View - For each record, you can pull header and related list.
Toggle for Auto-Generated Code : Just with one click, you can toggle between designer/code and interestingly you see the total line of code reduced to significant level, which is the power encapsulation that polymer leverages by importing HTML and lots of JavaScript from back-end.
Works with iPhone and iPad : Tested on both iPad and iPhone
How do I jump start ?
You need to get some basic tools to get started
- Git Client ( I also prefer Iterm or standard mac terminal)
- Node.js
Go to simple.html in the git repo (directory) and replace the session Id and instance url as shown here
Make sure your Node.js proxy server is running, in-case your come across any other issue, please feel free to post comment or else add issue to this GitHub Repository
+Akhilesh Gupta have just added a proxy on Node.js to run the application locally which is required to avoid Cross Domain Reference error and another proxy has been added for Heroku platform.
Tip * - Login to your salesforce instance and grab the instance session Id and instance url, you can run anonymous apex to get session ID running anonymous apex in developer console.
Try your hands on designer tool here . In my next post, you will find some of the components I used to demo the application to another level where I am building an application that link to custom object and present data in newer fashion.
Check out this video of +sfhtml5 conference happened next door, presented by +Eugene Oksman and +Akhilesh Gupta
0 comments:
Post a Comment