I have the need to bolt on some custom flavors of pages that will be used for searching external Web services and other things without using apex. I would like to use skuid api and add on html pages to handle some of the custom features and do $.Ajax type call outs and then integrate with skuid models. Today I have these pages in visualforce pages that are launched within skuid popups in a template iframe, this approach doesn’t allow the page access to skuid api. I have also done this with pure javascript injection of html to the Dom within the skuid page, this seems like a hard non maintainable approach and not scalable. I would like to have access to the parent skuid page api and use it in conjuction with some custom pages. Is there any good examples or ideas of an integrated custom approach to doing such things?
integrating angular.js with skuid
+8
+11Jarrod,
Very timely post. I was thinking along same lines just yesterday. I don’t have a specific use case but more about the feasibility.
What about a custom component based on Angular backed by a data service that uses Skuid models? The custom component would have a controller with a DI service. Just thinking out loud.
Irvin
+8I haven’t create a custom component yet but that be the best bet. It would be nice to have the hook to load in an integrated angular. I need to read more on custom components in skuid and see if anyone has a good examples.
+8Here’s a page I played with about a year ago. It pulls in data from a model into angular. I didn’t get it to react in real time to changes in the models though. But at least it’s a start.
<skuidpage unsavedchangeswarning="yes" showsidebar="true" showheader="true"> <models> <model id="Contacts" limit="20" query="true" createrowifnonefound="false" sobject="Contact"> <fields> <field id="FirstName"/> <field id="LastName"/> </fields> <conditions/> <actions/> </model> </models> <components> <custom name="AngularComp"/> <skootable showconditions="true" showsavecancel="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Contacts" buttonposition="" mode="read"> <fields> <field id="FirstName" valuehalign="" type=""/> <field id="LastName" valuehalign="" type=""/> </fields> <rowactions> <action type="edit"/> <action type="delete"/> </rowactions> <massactions usefirstitemasdefault="true"> <action type="massupdate"/> <action type="massdelete"/> </massactions> <views> <view type="standard"/> </views> </skootable> </components> <resources> <labels/> <javascript> <jsitem location="external" name="angular" cachelocation="false" url="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js">var params = arguments[0], $ = skuid.$; </jsitem> <jsitem location="inlinecomponent" name="AngularComp" cachelocation="false" url="">var element = arguments[0], $ = skuid.$; element.html('&lt;ul&gt;&lt;li ng-repeat="contact in contacts"&gt;{{contact.FirstName}} {{contact.LastName}}&lt;/li&gt;&lt;/ul&gt;&lt;div ng-repeat="contact in contacts"&gt;&lt;input ng-model="contact.FirstName"&gt;&lt;/input&gt;&lt;input ng-model="contact.LastName"&gt;&lt;/input&gt;&lt;/div&gt;'); element.attr('ng-controller','MyController'); angular.module('myApp', []) .controller('MyController', ['$scope', function ($scope) { $scope.contacts = skuid.model.getModel('Contacts').data; $scope.$watch('contacts', function(oldval,newval){ console.log('Old: ' + oldval); console.log('New: ' + newval); }); }]); angular.element(element).ready(function() { angular.bootstrap(element, ['myApp']); });</jsitem> </javascript> <css/> </resources> </skuidpage>
Also of note… I really have no idea how to use Angular, so I may be doing everything wrong 😦
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.