Building Angular Applications on Salesforce

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.

Read More
getoncrm September 26, 2019 0 Comments

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

Prerequisites :-
1.Google dialogflow account
2.npm
3.ngrok.exe
This tutorial shows you how to do Salesforce Integration with dialogflow to build a simple Dialog flow agent, walking you through the most important features of Dialog flow. You’ll learn how to:

  • Create a Dialogflow account and your first Dialogflow agent, which lets you define a natural language understanding model.
  • Extract parameters with entities, which let you define how data is extracted from user utterances. Entities let you categorize important parts of user utterances. This lets you extract data that matches a category instead of a specific utterance, giving you more flexibility.
  • Manage states with contexts, which lets you persist conversation state across turns of a conversation.
  • Integrate with the Google Assistant, which lets you deploy your Dialogflow agent as actions that users can invoke through the Assistant

Create your Dialogflow account
Now that you’re signed into your Google account, you can sign into Dialogflow by following these steps:
1. Click the Google login button.

2.Create your first Dialogflow agent

  • Click Create agent in the left menu.
  • Enter your agent’s name, default language, and default time zone, then click the Create button.

3. Create Intents

From Intent Tab create Multiple Phrases for single question

  • For the Intent From Fulfilment it’s required to use this intent for the web hook.
  • Also We can add the text response related to phrases.

4. Create Entities in Dial flow

There are some standard entities available in dialogflow but if we want to create new entity then go with the entity tab and create entity and also add the synonyms for the entity.
5. Create Fulfilment for Google Action.

Here Two different types for call Fulfilment

1.Web HookIn Webhook we have to set URL for authentication through ngrok call a node.js code for call a rest services From
SalesforceInstead of ngrok we can create a heroku application for call node.js code for call rest services from Salesforce
2.Inline Editor(Powered by Cloud Functions for Firebase)In inline editor we can can direct use index.js and package.json

6. Integrations for Google Action.

From Google Assistant test the the application go with test and it’s redirect on the Google action page from dialog flow.
Here you can see the output get from Salesforce records.

Read More
getoncrm July 26, 2019 0 Comments

Amazon Alexa Integration With Salesforce

Amazon Echo

Amazon Echo is a voice command device with functions like question answering, playing music and controlling smart devices. Echo connects to Alexa which is a cloud-based voice service, to provide information, answer questions, read the news, and check the weather, etc. – instantly. You just need to ask. Echo starts working as soon as it detects the wake word.

Through Alexa, we can perform many tasks in by doing Salesforce Integration without the need to access the org on the computer. Just say the magic words and Alexa will do it for you! This video shows how we can perform actions on Leads records in Salesforce.

  • Get the List of Leads:
    You can get all the leads along with their status. Here in this video, you can see Alexa searches for Lead records and brings them to you.
  • Create New Lead:
    You can create a new Lead record in Salesforce. Tell Alexa the first name, last name, and company name and the Lead record will be created.
  • Modify Lead Record:
    You can also modify the Lead record as shown in this video. You need to tell Alexa first name, last name, and new status of Lead. Alexa will take care of the rest.

Development

Prerequisites: Knowledge of Node.js, and Heroku; the Amazon Echo App (iOS, Android & web); GitHub (for storing and retrieving code).

Procedure: If you are familiar with Node.js, development is straight forward after you understand invocations and intents. There are generally two main ways users begin interacting with a custom skill:

  • Invoking the skill and making a specific request at the same time (“intent”).
  • Invoking the skill with no specific request (“no intent”).

Skills: The simplest way to describe a skill is ‘an app for Alexa’.

Invocations: An invocation is the word or phrase used to trigger your skill.

A user invokes intents with their voice and invocations are the name that identifies the capability the user wants. Utterances, a text file, provide the mappings between the intents and the typical utterances that invoke those intents in a list of sample utterances. Heroku sends information to AWS and performs all the functionalities.

Read More
admin August 31, 2017 0 Comments