This page is being served by the web api example, allowing you to search and find the records you need. This can be coded anyway you like (ajax, angular js, anything). This page can also live wherever you need it to live. With the Web API, you do not need to depend on Centralpoint to code or render your page, you can do it yourself, depending on Centralpoint to aggregate your information and serve it to your page (trigger, hook or content fragment) wherever you may need it. PLEASE SEE DEVELOPMENT/ WEB API within the Client Console.
AngularJS Generic Sample
This module (results-details) was developed in the HTML view of this attribute using AngularJS. It is backed by two Development > Web API records: Generic Results and Generic Details. To modify the AngularJS source behind this module click the HTML button at the bottom of this editor. The following items break down the source available in the HTML view of this attribute. This record and the code within is for use as a starting point for AngularJS module development within the client console. This documentation should be removed in a production environment.
-
AngularJS APIs
The AngularJS 1.6.0 libraries required to run this code are included directly in this attribute. These elements can be removed if they are already on the page or referenced locally if available.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-sanitize.min.js"></script>
-
Module, Service, and Controllers
The generic module, service, and controllers have been uploaded and referenced from the Uploads directory. These references can be copied to apply custom functionality for one module or modified for this site. They have been added as references for brevity, but the source could also be copied in place of the references.
<script src="/uploads/angularjs/generic/module.js"></script>
<script src="/uploads/angularjs/generic/sservice.js"></script>
<script src="/uploads/angularjs/generic/results-controller.js"></script>
<script src="/uploads/angularjs/generic/details-controller.js"></script>
-
Routing & Configuration
The .config portion of this code handles routing (navigation) within the module. The results are displayed initially and the details are displayed when an ID is provided. Next, in the .config section, a constant is initialized with values that will be read by the Service referenced above to determine how to request data from the Web API methods. The Token parameter contains a WebApiInternalToken CpScript that works in coordination with Web API methods when Security Mode = Internal Only. The Results and Details parameters configure the Web API methods respectively. The Method parameter should contain the Method Name and the Request parameter can be used to initialize the web method Request to something other than the defaults. The documentation for the Request parameters is available in the related Web API record. It is most commonly used to preview attributes and execute CpScripting.
<script type="text/javascript">
angular.module('generic')
.config(['$routeProvider', '$locationProvider', '$logProvider', function ($routeProvider, $locationProvider, $logProvider) {
$routeProvider
.when('/', { controller: 'resultsController as results', templateUrl: 'results.html' })
.when('/:id', { controller: 'detailsController as details', templateUrl: 'details.html' })
.otherwise({ redirectTo: '/' });
$locationProvider.hashPrefix('!');
$logProvider.debugEnabled(false);
}])
.constant('config', {
Token: "[cp:scripting key='WebApiInternalToken' /]",
Results: {
Method: 'generic-results',
Request: { }
},
Details: {
Method: 'generic-details',
Request: { }
}
});
</script>
-
Views / Templates
The AngularJS app (ng-app) is initialized with a scope within this attribute and a view (ng-view) is included as the source of the routing. Then the templates are added in script tags to prevent them from executing until they are called upon. The route provider in the previous section references these templates by ID. They could have been added as HTML files in the Uploads directory, but they were placed here to make changes easier. The results.html template handles the display of the Results View via the Generic Results Web API method and details.html handles the Details View via the Generic Details Web API method.
<div ng-app="generic" ng-cloak>
<div ng-view></div>
<script type="text/ng-template" id="results.html">
<style type="text/css">
.generic-search { padding-bottom: 10px; }
.generic-results { list-style-type: none; margin: 5px 0; padding: 0; }
.generic-pager { }
</style>
<div class="generic-search">
<input type="text" ng-model="results.search" onkeypress="if (event.which == 13) { event.preventDefault(); $('#generic-search-button').trigger('click'); }" />
<button id="generic-search-button" type="button" ng-click="results.request.Page = 1; results.request.Search = results.search;">Search</button>
</div>
<ul class="generic-results">
<li ng-repeat="row in results.DataTable">
{{row.cpsys_RowNum}}. <a href="#!/{{row.AutoNumber}}">{{row.Title}}</a>
<p>{{row.Summary}}</p>
</li>
<li ng-if="results.TotalRecords == 0"><strong>Sorry. No results were found.</strong></li>
</ul>
<div class="generic-pager" ng-show="results.TotalPages > 0">
<button type="button" ng-disabled="results.request.Page <= 1" ng-click="results.request.Page = (results.request.Page - 1);">Prev</button>
<span> Page {{results.request.Page}} of {{results.TotalPages}} </span>
<button type="button" ng-disabled="results.request.Page >= results.TotalPages" ng-click="results.request.Page = (results.request.Page + 1);">Next</button>
</div>
</script>
<script type="text/ng-template" id="details.html">
<style type="text/css">
.generic-details { }
.generic-back { padding: 10px 0 0 0; }
</style>
<div class="generic-details" ng-show="details.Attributes">
<strong>{{details.Attributes.Title}}</strong>
<p ng-bind-html="details.Attributes.RTFEditor1"></p>
</div>
<div class="generic-details" ng-show="!details.Attributes">
<strong>Sorry. I couldn't find what you were looking for.</strong>
</div>
<div class="generic-back"><a ng-href="#!/">< Results</a></div>
</script>
</div></pre>