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
Brandon Barb 4Brandon Barb 4 

Link to Record's Detail Page

I am creating a visualforce page that display an object and allows searching/sorting of the list with AngularJS. 

My code is below - How can I get the {{ c.Name }} field to hyperlink to the record's detail page?

Thank you for any help you can provide!



<apex:page applyHtmlTag="false" applyBodyTag="false" showHeader="false" sidebar="false" standardStylesheets="false">
<html>
<head>
<title>Testing</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<apex:remoteObjects >
<apex:remoteObjectModel name="con_AppCatalog__c" fields="Name,Branch__c,Functional_Area__c,Description__c" jsShorthand="dbContacts"/>
</apex:remoteObjects>
<script>
                    var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                $scope.sortType = 'Name'; // set the default sort type
                $scope.sortReverse = false;
                $scope.contacts=[];
                $scope.searchText='';
                $scope.fetchContacts = function() {
                    var dbCon = new SObjectModel.dbContacts();
                    console.log(dbCon);
                    dbCon.retrieve({where: {
                        or:{
                            Name: {
                                like: '%'+$scope.searchText+'%'
                            },
                            Branch__c: {
                                like: '%'+$scope.searchText+'%'
                            }
                        }
                    },
                                    limit: 500
                                   },
                                   function(err, records, event){
                                       $scope.$apply(function () {
                                           if(err) {
                                               alert(err.message);
                                           }
                                           else {
                                               $scope.contacts.splice(0,$scope.contacts.length);
                                               records.forEach(function(record) {
                                                   $scope.contacts.push({"Name" :record.get("Name"),"Functional_Area__c":record.get("Functional_Area__c"),"Description__c":record.get("Description__c"),"Branch__c":record.get("Branch__c")}); // it was % in place of $ with scope earlier
                                               });
                                           }
                                       });
                                   });
                };
            });
            </script>
</head>

<body>
<div class="container" ng-app="myApp" ng-controller="myCtrl" ng-init="fetchContacts()">
<div class="well well-sm">
<h3>Contacts list with search</h3>
</div>
<div class="col-sm-4 pull-right">
<div class="col-sm-2">
<label for="searchText">Search:</label>
</div>
<div class="col-sm-10">
<input class="form-control" type="text" ng-model="searchText" id="searchText" ng-change="fetchContacts()"/>
</div>
</div>

<table class="table table-bordered table-striped">
<thead><tr>
<th>
<a href="#" ng-click="sortType = 'Name'; sortReverse = !sortReverse">
First Name
<span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Branch__c'; sortReverse = !sortReverse">
Branch
<span ng-show="sortType == 'Branch__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Branch__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Functional_Area__c'; sortReverse = !sortReverse">
Functional Area
<span ng-show="sortType == 'Functional_Area__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Functional_Area__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Description__c'; sortReverse = !sortReverse">
Description
<span ng-show="sortType == 'Description__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Description__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in contacts | orderBy:sortType:sortReverse">
<td>{{ c.Name }} </td>
<td>{{ c.Branch__c }}</td>
<td>{{ c.Functional_Area__c }}</td>
<td>{{ c.Description__c }}</td>
</tr>
</tbody>
</table>
</div>
</body>


</html>
</apex:page>

Best Answer chosen by Brandon Barb 4
Raj VakatiRaj Vakati
You know what is wrong . "Id "should  Capital Id

All Answers

Raj VakatiRaj Vakati
Use the below code
  
<td><a href="/{{c.Id}}"> {{ c.Name }} <a/></td>

 
Raj VakatiRaj Vakati
<td><a href="/{{c.Id}}"> {{ c.Name }} </a></td>

 
Brandon Barb 4Brandon Barb 4
@Raj  I tried your suggestion, but it doesn't seem to pull the Id for some reason. It just takes me to an invalid page. Any ideas?
Raj VakatiRaj Vakati
Complete code
  
 


<apex:page applyHtmlTag="false" applyBodyTag="false" showHeader="false" sidebar="false" standardStylesheets="false">
<html>
<head>
<title>Testing</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<apex:remoteObjects >
<apex:remoteObjectModel name="con_AppCatalog__c" fields="Name,Branch__c,Id,Functional_Area__c,Description__c" jsShorthand="dbContacts"/>
</apex:remoteObjects>
<script>
                    var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                $scope.sortType = 'Name'; // set the default sort type
                $scope.sortReverse = false;
                $scope.contacts=[];
                $scope.searchText='';
                $scope.fetchContacts = function() {
                    var dbCon = new SObjectModel.dbContacts();
                    console.log(dbCon);
                    dbCon.retrieve({where: {
                        or:{
                            Name: {
                                like: '%'+$scope.searchText+'%'
                            },
                            Branch__c: {
                                like: '%'+$scope.searchText+'%'
                            }
                        }
                    },
                                    limit: 500
                                   },
                                   function(err, records, event){
                                       $scope.$apply(function () {
                                           if(err) {
                                               alert(err.message);
                                           }
                                           else {
                                               $scope.contacts.splice(0,$scope.contacts.length);
                                               records.forEach(function(record) {
                                                   $scope.contacts.push({"Name" :record.get("Name"),"Functional_Area__c":record.get("Functional_Area__c"),"Description__c":record.get("Description__c"),"Branch__c":record.get("Branch__c")}); // it was % in place of $ with scope earlier
                                               });
                                           }
                                       });
                                   });
                };
            });
            </script>
</head>

<body>
<div class="container" ng-app="myApp" ng-controller="myCtrl" ng-init="fetchContacts()">
<div class="well well-sm">
<h3>Contacts list with search</h3>
</div>
<div class="col-sm-4 pull-right">
<div class="col-sm-2">
<label for="searchText">Search:</label>
</div>
<div class="col-sm-10">
<input class="form-control" type="text" ng-model="searchText" id="searchText" ng-change="fetchContacts()"/>
</div>
</div>

<table class="table table-bordered table-striped">
<thead><tr>
<th>
<a href="#" ng-click="sortType = 'Name'; sortReverse = !sortReverse">
First Name
<span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Branch__c'; sortReverse = !sortReverse">
Branch
<span ng-show="sortType == 'Branch__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Branch__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Functional_Area__c'; sortReverse = !sortReverse">
Functional Area
<span ng-show="sortType == 'Functional_Area__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Functional_Area__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Description__c'; sortReverse = !sortReverse">
Description
<span ng-show="sortType == 'Description__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Description__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in contacts | orderBy:sortType:sortReverse">
<td><a href="/{{c.Id}}"> {{ c.Name }} <a/></td>
<td>{{ c.Branch__c }}</td>
<td>{{ c.Functional_Area__c }}</td>
<td>{{ c.Description__c }}</td>
</tr>
</tbody>
</table>
</div>
</body>


</html>
</apex:page>

 
Brandon Barb 4Brandon Barb 4
@Raj  Thank you, but it still seems to not pull the ID. I forgot to mention that I am using this in a Community - would that be causing any issues?
Raj VakatiRaj Vakati
Are you not getting only Id or other data also? 

Please check the user have an access to the record 
Brandon Barb 4Brandon Barb 4
@Raj It's only the ID that isn't showing up. It pulls the URL for my org, but leave outs the ID at the end. But if I swap {{ c.Id }} with {{ c.Name }}, it puts the name in the url as it should for the ID
Raj VakatiRaj Vakati
Change this line ..PUSH ID into Scope 
  
$scope.contacts.push({"Name" :record.get("Name"),"Id" :record.get("Id"),"Functional_Area__c":record.get("Functional_Area__c"),"Description__c":record.get("Description__c"),"Branch__c":record.get("Branch__c")}); // it was % in place of $ with scope earlier
044
                                               });



 
Raj VakatiRaj Vakati
You know what is wrong . "Id "should  Capital Id
This was selected as the best answer