Ashish Sharma Salesforce Blog

A Little background About this Post Now-a-days there are lot of UI frameworks available in Market and many of them can be utilized in visualforce pages to improve UI/UX. Recently I saw harshit pandey’s post shared by jitendra zaa on Google Material Design ,I did my hands dirty using angular-material framework based on Google material design .  What is Material Design ? Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices and different screen sizes. Please visit http://www.google.com/design/spec/material-design/introduction.html to understand it. What is Angular-Material Framework ? The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible UI components based on the Material Design system. Please visit https://material.angularjs.org/latest/#/  to understand it. Visual Samples :

A Little Background About This Post: In my previous AngularJS posts ,we have gone through AngularJS setup and AngularJS Data Search with dummy data . Here is the next step to display salesforce data instead of dummy data with angularJS.                                                                                     Below are the components of it. 1.     AngularJS MVC framework in Visualforce Page. 2.     Javascript Remoting to query salesforce data The main idea here is to display accounts and related contacts and opportunities in a console form to display related contacts and opportunities as soon as we click on accounts using angularJS ,javascript remoting in visualforce page . Apex Class : public class AccountsWithContactsController {     @RemoteAction     public static List<accountsWithContacts> getAccountsWithContacts(){     List<accountsWithContacts> accountWithContactWrapperList = new         List<accountsWithContacts>