function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Subhasini Bhosal 10Subhasini Bhosal 10 

I want to know how to call Rest Service from a visualforce page built on Angular JS

Hi,

I am new to Salesforce. I have created Service based on REST API to create a case. 

@RestResource(urlMapping='/Case/*')
global with sharing class CaseCreater {
 @HttpGet
    global static Case getCaseById() {
        RestRequest req = RestContext.request;       
            String caseId = req.requestURI.substring(
                                      req.requestURI.lastIndexOf('/')+1);
        Case result =
                       [SELECT  Status,Origin from Case where  Id = :caseId];
        return result;
    }

@HttpPost
  global static Boolean updateCase(String caseId, String priority){
  Case c= new Case(
  Id=caseId,
  Priority=priority);
  update c;
  return true;}

    @HttpPost
    global static String createCase(String priority,String type, String status,
        String origin,String reason, String subject, String description ) {
        Case c = new Case(
        
            Priority=priority,
            Type= type,           
            Status=status,
            Origin=origin,
          Reason=reason,
          Subject=subject,
          Description=description         
          );
        insert c;
        return c.Id;
    }
}
-----

I want to create VF page in Angular JS which will create a case in on passing the values in JSOn format:

{
  "priority" :"Low",
  "type" :"Mechanical",
  "status" : "New",
  "origin" : "Phone",
  "reason" : "Breakdown",
  "subject" : "Mechanical Breakdown",
  "description" : "Mechanical Breakdown"
  }

---

vf page:


<apex:page sidebar="false" showHeader="false" standardController="Case" extensions="abc">
<h1> Welcome {!$User.FirstName}!!</h1><br></br>
<html>
<head>
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"/>
</head>
<script>

function submit(){
 var data= {
 priority: document.getElementById("priority").value,
 type: document.getElementById("type").value,
 status: document.getElementById("status").value,
 origin: document.getElementById("origin").value,
 reason: document.getElementById("reason").value,
 subject: document.getElementById("subject").value,
 description: document.getElementById("description").value
    }  
  //this is raw data need to passed to the service
}    
</script>
<body>
    <label> Priority</label>
        <input id= "priority" > </input><br></br>
     <label> Type</label>
        <input id= "type" > </input><br></br>
     <label> Status</label>
        <input id= "status" > </input><br></br>
     <label> Origin</label>
        <input id= "origin"></input><br></br>
      <label> Reason</label>
          <input id= "reason"></input><br></br>
      <label> Subject</label>
          <input id= "subject"></input><br></br>      
      <label> Description</label>
          <input id= "description"></input><br></br>
      <button type="button" onclick="submit()">Submit!</button>
    
</body>
</html>
</apex:page>
---------------
however I dont know how to call the service here. Can anyone please help?
Thanks,
Subhasini
@Karanraj@Karanraj
Check out this tutorial for Angular js and salesforce

1. https://developer.salesforce.com/blogs/developer-relations/2014/07/building-single-page-app-angularjs-salesforce-rest-api.html
2. http://blog.jeffdouglas.com/2013/06/10/angularjs-and-salesforce-com-tutorial/
3. http://www.oyecode.com/2013/06/getting-started-with-angularjs-on.html
Subhasini Bhosal 10Subhasini Bhosal 10
I modified my VF page but it is sayion $http is undefined:
--------------
<apex:page sidebar="false" showHeader="false" standardController="Case" extensions="abc">
<h1> Welcome {!$User.FirstName}!!</h1><br></br>
<html>
<head>
         <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script>

function submit(){
alert("hi")
 var data= {
 priority: document.getElementById("priority").value,
 type: document.getElementById("type").value,
 status: document.getElementById("status").value,
 origin: document.getElementById("origin").value,
 reason: document.getElementById("reason").value,
 subject: document.getElementById("subject").value,
 description: document.getElementById("description").value
    } 
   data= JSON.stringify(data);
    $http.post("/services/apexrest/Case", data).success(function(data, status) {
           console.log("success")
        }).error(function(error, response) {
            console.log(error)
        })
    
    console.log(data) 
   
}    
</script>
<body>
    <label> Priority</label>
        <input id= "priority" > </input><br></br>
     <label> Type</label>
        <input id= "type" > </input><br></br>
     <label> Status</label>
        <input id= "status" > </input><br></br>
     <label> Origin</label>
        <input id= "origin"></input><br></br>
      <label> Reason</label>
          <input id= "reason"></input><br></br>
      <label> Subject</label>
          <input id= "subject"></input><br></br>      
      <label> Description</label>
          <input id= "description"></input><br></br>
      <button type="button" onclick="submit()">Submit!</button>
    
</body>
</head>
</html>
</apex:page>
-------------------
Can you please tell me where I am going wrong?