info@getoncrm.com
+91-7405042484
GetOnCRM Solutions
  • Company
    • About
  • Services
    • Salesforce Sales Cloud
    • Salesforce Service Cloud
    • Salesforce Community Cloud
    • Salesforce Lightning
    • Salesforce Pardot
    • Salesforce CPQ
    • Contract Lifecycle Management
    • Salesforce Appexchange
    • Salesforce Integration
    • Data Management
    • Salesforce Mobile Application
    • Salesforce Commerce Cloud
    • Apttus CPQ
    • Salesforce Einstein
    • Salesforce Marketing Cloud
  • Case Study
  • Blog
  • Career
  • Contact Us
  • Let’s talk
GetOnCRM Solutions
  • Company
    • About
  • Services
    • Salesforce Sales Cloud
    • Salesforce Service Cloud
    • Salesforce Community Cloud
    • Salesforce Lightning
    • Salesforce Pardot
    • Salesforce CPQ
    • Contract Lifecycle Management
    • Salesforce Appexchange
    • Salesforce Integration
    • Data Management
    • Salesforce Mobile Application
    • Salesforce Commerce Cloud
    • Apttus CPQ
    • Salesforce Einstein
    • Salesforce Marketing Cloud
  • Case Study
  • Blog
  • Career
  • Contact Us
  • Let’s talk
GetOnCRM Solutions
  • Company
    • About
  • Services
    • Salesforce Sales Cloud
    • Salesforce Service Cloud
    • Salesforce Community Cloud
    • Salesforce Lightning
    • Salesforce Pardot
    • Salesforce CPQ
    • Contract Lifecycle Management
    • Salesforce Appexchange
    • Salesforce Integration
    • Data Management
    • Salesforce Mobile Application
    • Salesforce Commerce Cloud
    • Apttus CPQ
    • Salesforce Einstein
    • Salesforce Marketing Cloud
  • Case Study
  • Blog
  • Career
  • Contact Us
  • Let’s talk
  • Company
    • About
  • Services
    • Salesforce Sales Cloud
    • Salesforce Service Cloud
    • Salesforce Community Cloud
    • Salesforce Lightning
    • Salesforce Pardot
    • Salesforce CPQ
    • Contract Lifecycle Management
    • Salesforce Appexchange
    • Salesforce Integration
    • Data Management
    • Salesforce Mobile Application
    • Salesforce Commerce Cloud
    • Apttus CPQ
    • Salesforce Einstein
    • Salesforce Marketing Cloud
  • Case Study
  • Blog
  • Career
  • Contact Us
  • Let’s talk
Blog
Home Salesforce Integration Building Angular Applications on Salesforce
Salesforce Integration

Building Angular Applications on Salesforce

getoncrm September 26, 2019 0 Comments

In this post, I am going to share the information about salesforce integration and how you can use AngularJS with Visualforce to display records onto your Visualforce Page.

Introduction Of Angular Js:-

  • AngularJS is a structural framework for dynamic web apps. Angular is a Google-produced MVC framework where you can generate web applications and maintain them.
  • AngularJS is what HTML would have been, had it been designed for applications. AngularJS allows the easy development of Visualforce pages.
  • If you need to display Salesforce data to people other than those that have Salesforce accounts, Visualforce pages is the best way to go.
  • For developers creating Visualforce apps is way easier than creating ad-hoc third-party web apps that call upon Salesforce data.
  • JS remoting allowed you to access server-side apex controller methods through JS directly
  • Along with Remote Objects, this allowed more flexibility and dynamic usage of Visualforce pages resulting in even greater adoption of the tool.
  • JavaScript remoting gave you the ability to access server-side apex controller methods via JS directly, so this enhanced the flexibility and dynamic usage of Visualforce pages resulting in the higher adoption of the tool.
  • When building a third-party framework web application in Salesforce, there are three ways to communicate with Apex:
  1. Web Services
  2. Rest API
  3. Remote Action

AngularJS directives attributes :-

  • The ng-app directive initializes an AngularJS application.
  • The ng-init directive initializes application data.
  • The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
  • The ng-repeat directive repeats an HTML element.
  • The ng-bind Sets the text of a DOM element to the value of an expression
  • The ng-controller it is used to call the controller of the module.

Learn more Angularjs, Please read this link
https://www.w3schools.com/angular/angular_directives.asp

Reasons to Choose AngularJS :-

Quick Started: – All you need to do is add some attributes to your HTML, and you can have your first, small Angular app in a matter of a few minutes.

Time-Saving: – AngularJS will take over and perform the rest of the functions for you. It saves you of the trouble of writing another code to bind the MVC components together again.

AngularJS Advantages:-

  • MVC architecture
  • Two-way data binding
  • Open-source JavaScript framework, developed by Google
  • Write less do more
  • Quite a number of ways to do same thins
  • Modify DOM directly

AngularJS Disadvantages:-

  • Limitation in watchers(not more than 2000)
  • Not build for mobile devices
  • Two-way binding checks all the variables twice for updating which makes the UI slow
  • Multiple ways to do the same thing, it is very hard for a developer to tell which is the best way.

What would need to generate Visualforce page with Angularjs:-

  1. Apex Class
  2. Static resource (store JavaScript Application)
  3. Visualforce Page Or Lightning Component (Load Js App)

Code structure: –
Now we can write a small example of Angularjs with Visualforce page. First of all, we can create an apex class with remote action method.

Global class sampleClassOfAngularjs {
@RemoteAction
Global static List accountList() {
Return json.serialize([select Id,Name from Account]);
}
}

@RemoteAction:-
Remote action function in salesforce allows user to access any method from any class through javasrcipt methods, and get the result as a javascript object for further manipulation.

Global static:-

The method must be Static and either Global and Public.

<apex:page showHeader = “false” controller = “sampleClassOfAngularjs” >

<head>

<meta charset=”utf-8″/>

<meta name=”viewport” content=”width=device-width, initial-scale=1″/>

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css”/>

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js”></script>

<script>

var App = angular.module(‘myApp’, []);

App.controller(‘myctrl’,

function ($scope) {$scope.

account = {! accountList }});

</script>

</head>

<body ng-app=”myApp” class=”container”

ng-controller=”myctrl”>

<table class=”table table-bordered”>

<tr>

<th>Name</th>

<th>Industry</th>

<th>Website</th>
</tr>

<tr ng-repeat=” account in Accouts| filter:query”>

<td>{{ account.Name}}</td>

<td>{{ account.Industry}}</td>

<td>{{ account. Website}}</td>

</tr>

</table>

</body>

</apex:page>

controller = “sampleClassOfAngularjs” :-Put your controller name into controller attribute.

angular.module :- A module is created by using the AngularJS function angular.module. The “myApp” parameter refers to an HTML element in which the application will run.

App.controller :- Add your controller in app.controller.

Conclusion :-

I hope the above is helpful to someone. Next up is to try to create some application that makes use of this Angular + VF Remoting technique. In this article, I showed how you could build a third-party JavaScript application. How to communicate data between your application and Apex.

Salesforce Salesforce Integration
14
935 Views
Top 5 reasons why you should switch to Salesforce LightningPrevTop 5 reasons why you should switch to Salesforce LightningSeptember 16, 2019
Introduction of Salesforce Einstein. How it is useful to boost your sales?October 15, 2019Introduction of Salesforce Einstein. How it is useful to boost your sales?Next

Related Posts

Salesforce Integration

Steps to Integrate Quickbooks with Salesforce

Quickbooks is an accounting software package built and marketed by intuit....

getoncrm March 23, 2020
Salesforce Integration

Integration of Salesforce With Dialogflow to Build Action For Google Home Assistant

Prerequisites :- 1.Google dialogflow account 2.npm 3.ngrok.exe This...

getoncrm July 26, 2019

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts
  • How Salesforce Community Cloud Help Nonprofit Organizations?
  • Most Popular Salesforce Integration For Your Business
  • Salesforce Community Cloud: Why It Is Important For Your Business?
  • Ways how CRM software converts leads into opportunities
  • Reasons Why CRM Is Essential For SMBs
Categories
  • Apttus 1
  • Contract Lifecycle Management 1
  • CRM 4
  • Sales Cloud 1
  • Salesforce 23
  • Salesforce AppExchange 2
  • Salesforce Commerce Cloud 3
  • Salesforce Community Cloud 4
  • Salesforce CPQ 9
  • Salesforce CRM 5
  • Salesforce Einstein 3
  • Salesforce Integration 9
  • Salesforce Lightning 10
  • Salesforce Mobile App 6
  • Salesforce Pardot 5
  • Service Cloud 3

We are a global Salesforce consulting company that serves a broad mix of businesses, ranging from startups to big corporations. We help our clients make significant and lasting improvements to their performance and realize their most important goals, using Salesforce as a platform to enable digital processes.

  • About
  • Career
  • Services
  • Case Study
  • Blog
  • Contact Us
  • Let’s Talk
GetOnCRM Solutions
INDIA
Ahmedabad: B/706, Ganesh Plaza, Nr. Navrangpura Bus Stand, Navrangpura, Ahmedabad, Gujarat-380009,India.
info@getoncrm.com
minkesh.asc
info@getoncrm.com            
minkesh.asc
+91-7405042484
info@getoncrm.com            
minkesh.asc
Vadodara: 1008, 10th floor, OCEAN, Nr. Centre Square Mall, Sarabhai Compound, Dr. Vikram Sarabhai Marg, Vadodara, Gujarat, India.
USA
Address: 3080 Cowper Street Palo Alto, California 94306, USA
+1 (650) 704-5436
CANADA
Address: 1204 29 Ave NW Edmonton, AB T6T 0K8, Canada
+1 (250) 329-6480

Terms of use | Privacy Environmental Policy

Copyright © 2020 GetonCRM.  All Rights Reserved.

Copyright © 2020 GetOnCRM.  All Rights Reserved.

Copyright © 2019 GetOnCRM.
All Rights Reserved.

Book a Consultation

    We use cookies to deliver the best possible experience to you. By using our website, you agree to the use of cookies Find out more.