├── .DS_Store ├── AngularJSDemoController.cls ├── Angularjsdemo.page ├── JSForce with Angular.Page.html ├── README.md └── src ├── .DS_Store ├── classes ├── AngularTableController.cls └── AngularTableController.cls-meta.xml ├── components ├── AngularTable.component └── AngularTable.component-meta.xml ├── package.xml ├── pages ├── AngularTableList.page └── AngularTableList.page-meta.xml └── staticresources ├── AngularDataTable.resource └── AngularDataTable.resource-meta.xml /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mailtoharshit/Angular/8d2375e494b9da624010434035f41bcda91a43f5/.DS_Store -------------------------------------------------------------------------------- /AngularJSDemoController.cls: -------------------------------------------------------------------------------- 1 | public with sharing class AngularJSDemoController{ 2 | 3 | public String AccountList { get; set; } 4 | 5 | //Subclass : Wrapper Class 6 | public class Accountwrap { 7 | //Static Variables 8 | public string id; 9 | public string name; 10 | public string Phone; 11 | 12 | //Wrapper Class Controller 13 | Accountwrap() { 14 | Phone = ''; 15 | } 16 | 17 | } 18 | 19 | //Method to bring the list of Account and Serialize Wrapper Object as JSON 20 | public static String getlstAccount() { 21 | List < Accountwrap > lstwrap = new List < Accountwrap > (); 22 | List < account > lstacc = [SELECT Id, Name, Phone 23 | FROM Account limit 100 24 | ]; 25 | for (Account a: lstacc) { 26 | Accountwrap awrap = new Accountwrap(); 27 | awrap.id = a.id; 28 | awrap.name = a.name; 29 | if (a.Phone != null) { 30 | awrap.Phone = a.Phone; 31 | } 32 | lstwrap.add(awrap); 33 | } 34 | return JSON.serialize(lstwrap); 35 | } 36 | 37 | } -------------------------------------------------------------------------------- /Angularjsdemo.page: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 28 | 29 | 30 | 134 | 135 | 136 |
137 |
138 |
139 | Angular with Salesforce 140 | 144 |
145 |
146 | 147 | 148 |
149 | 150 |
151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 |
Id Name Phone 
164 | 179 |
{{item.id}}{{item.name}}{{item.Phone}}
189 |
190 | 191 | 192 | 193 | -------------------------------------------------------------------------------- /JSForce with Angular.Page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 19 | 20 |
21 |
22 |
23 | 24 | JSforce with Angularjs on Force.com - By OyeCode (Harshit) 25 |
26 |
27 |
28 |
29 | 30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 46 | 49 | 52 | 53 | 54 |
Id Name Phone 
42 | 43 | 44 | 45 | 47 | 48 | 50 | 51 |
55 |
56 |
57 | 58 | 74 | 75 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Angular Table Component for Salesforce Objects 2 | ========= 3 | 4 | This component can display any Object's Records as Paginated Table 5 | 6 | Written in Angular.JS 7 | 8 | TO-DO 9 | ----- 10 | 11 | - Support for Angular Routing, when user clicks a row, redirect to a detail page. 12 | - Support for Namespaces. Angular JS as some weird issue when using generic Visualforce.Remoting notation for JS Remoting, methods. 13 | 14 | Installation 15 | ------------ 16 | 17 | Click below to deploy the package in your org 18 | [![Button](https://raw.githubusercontent.com/afawcett/githubsfdeploy/master/src/main/webapp/resources/img/deploy.png)](https://githubsfdeploy.herokuapp.com/app/githubdeploy/logontokartik/Angular) 19 | 20 | After installation, you can take a look at the Sample AngularTableList Visualforce page for usage, 21 | 22 | Credits 23 | ---- 24 | 25 | I just extended the App by Harshit and Mohit to use it for any object by making is more generic and used JS Remoting [Angular JS and Salesforce Visualforce Pages](http://www.oyecode.com/2013/06/getting-started-with-angularjs-on.html) 26 | 27 | -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mailtoharshit/Angular/8d2375e494b9da624010434035f41bcda91a43f5/src/.DS_Store -------------------------------------------------------------------------------- /src/classes/AngularTableController.cls: -------------------------------------------------------------------------------- 1 | global with sharing class AngularTableController { 2 | 3 | public AngularTableController() { 4 | 5 | } 6 | 7 | public String v_sobjectName {get;set;} 8 | public String v_fieldSetName {get;set;} 9 | public String v_fieldCsv {get;set;} 10 | 11 | 12 | public List getFields(){ 13 | 14 | List fields = new List(); 15 | 16 | if(v_fieldSetName != null && v_fieldSetName != ''){ 17 | 18 | Schema.FieldSet fieldSet; 19 | 20 | for(Schema.FieldSet fSet : Schema.getGlobalDescribe().get(v_sobjectName).getDescribe().fieldSets.getMap().values()){ 21 | if(fSet.getLabel().equalsIgnoreCase(v_fieldSetName)){ 22 | fieldSet = fSet; 23 | break; 24 | } 25 | } 26 | 27 | if(fieldSet == null) 28 | throw new AngularException('Fieldset name provided is not found'); 29 | 30 | for(Schema.FieldSetMember fm : fieldSet.getFields()){ 31 | fields.add(fm.getFieldPath()); 32 | } 33 | 34 | 35 | }else if(v_fieldCsv != null && v_fieldCsv != ''){ 36 | for(String s : v_fieldCsv.split(',')){ 37 | fields.add(s.trim()); 38 | } 39 | 40 | }else{ 41 | throw new AngularException('Either Fieldset or FieldCSV must be supplied'); 42 | } 43 | 44 | return fields; 45 | } 46 | 47 | 48 | public Map getfieldLabelMap(){ 49 | return getFieldLabelMap(v_sobjectName); // returns the Map of Field Labels. 50 | } 51 | 52 | public List getfieldList(){ 53 | List fields = new List(); 54 | for(String s : v_fieldCsv.split(',')) 55 | fields.add(s.trim()); 56 | 57 | return fields; 58 | } 59 | 60 | /** 61 | * Remoting method to get the fieldLabMap for any SObject, basically would return labels to show on a Table 62 | * @param sobjectName - Salesforce SObjectName 63 | * @return Map 64 | */ 65 | 66 | @RemoteAction 67 | global static Map getFieldLabelMap(String sobjectName){ 68 | Map fieldLabelMap = new Map(); 69 | Map FsMap = Schema.getGlobalDescribe().get(sobjectName).getDescribe().fields.getMap(); 70 | 71 | for(String field : FsMap.keySet()){ 72 | fieldLabelMap.put( 73 | FsMap.get(field).getDescribe().getName(), 74 | FsMap.get(field).getDescribe().getLabel()); 75 | } 76 | 77 | return fieldLabelMap; 78 | } 79 | 80 | /** 81 | * Remoting method to getAllRecords 82 | * @param sobjectName - Salesforce SObjectName 83 | * @return List 84 | */ 85 | 86 | @RemoteAction 87 | global static List getAllRecords(String sobjectName, String fieldSetName, String fieldCsv){ 88 | 89 | List records = new List(); 90 | 91 | if(fieldSetName == null && fieldCsv == null){ 92 | throw new AngularException('Either FieldSet Name or FieldCSV must be provided'); 93 | } 94 | 95 | String selectorCsv = ''; 96 | if(fieldSetName != null && fieldSetName != ''){ 97 | 98 | Schema.FieldSet fieldSet; 99 | // Get the fieldset based on the Name 100 | for(Schema.FieldSet fSet : Schema.getGlobalDescribe().get(sobjectName).getDescribe().fieldSets.getMap().values()){ 101 | if(fSet.getLabel().equalsIgnoreCase(fieldSetName)){ 102 | fieldSet = fSet; 103 | break; 104 | } 105 | } 106 | 107 | if(fieldSet == null) 108 | throw new AngularException('Fieldset name provided is not found'); 109 | 110 | for(Schema.FieldSetMember fm : fieldSet.getFields()){ 111 | selectorCsv += fm.getFieldPath() + ','; 112 | } 113 | }else{ 114 | selectorCsv = fieldCsv; 115 | } 116 | 117 | selectorCsv = selectorCsv.removeEnd(','); 118 | 119 | // Add the Id if Selector does not contain Id. 120 | if(!selectorCsv.containsIgnoreCase('id')) 121 | selectorCsv = 'Id, ' + selectorCsv; 122 | 123 | records = Database.query('Select ' + selectorCsv + ' from ' + sobjectName + ' LIMIT 2000'); 124 | 125 | return records; 126 | 127 | } 128 | 129 | public class AngularException extends Exception {} 130 | 131 | } -------------------------------------------------------------------------------- /src/classes/AngularTableController.cls-meta.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 31.0 4 | Active 5 | 6 | -------------------------------------------------------------------------------- /src/components/AngularTable.component: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 14 | 15 | 21 | 22 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 47 | 48 | 54 | 55 | 56 | 57 |
58 |
59 |
60 |
61 |
62 | Salesforce1 Platform 63 |
64 |
65 | AngularJS 66 | 67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |

{!sobjectName} List

76 |
77 |
78 | 80 |
81 |
82 |
83 |
84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 119 | 120 |
Action{!fld} 
Open{{item['{!fld}']}}
103 |
104 |
    105 |
  • 106 | Prev 107 |
    • 108 |
  • 111 | 1 112 |
    • 113 |
  • 114 | Next 115 |
    • 116 |
117 |
118 |
121 |
122 |
123 | 124 |
125 |
126 |
127 | -------------------------------------------------------------------------------- /src/components/AngularTable.component-meta.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 31.0 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/package.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | AngularTableController 5 | ApexClass 6 | 7 | 8 | AngularTable 9 | ApexComponent 10 | 11 | 12 | AngularTableList 13 | ApexPage 14 | 15 | 16 | AngularDataTable 17 | StaticResource 18 | 19 | 31.0 20 | -------------------------------------------------------------------------------- /src/pages/AngularTableList.page: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/pages/AngularTableList.page-meta.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 31.0 4 | true 5 | false 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/staticresources/AngularDataTable.resource: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mailtoharshit/Angular/8d2375e494b9da624010434035f41bcda91a43f5/src/staticresources/AngularDataTable.resource -------------------------------------------------------------------------------- /src/staticresources/AngularDataTable.resource-meta.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Private 4 | application/octet-stream 5 | 6 | --------------------------------------------------------------------------------