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?
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?
-
2,330 Points
Posted 4 years ago
Irvin Waldman, Champion
-
9,026 Points
Ben Hubbard, Employee
-
12,550 Points
Here'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('<ul><li ng-repeat="contact in contacts">{{contact.FirstName}} {{contact.LastName}}</li></ul><div ng-repeat="contact in contacts"><input ng-model="contact.FirstName"></input><input ng-model="contact.LastName"></input></div>');
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>
Ben Hubbard, Employee
-
12,550 Points
Also of note... I really have no idea how to use Angular, so I may be doing everything wrong :(
Rob Hatch, Official Rep
-
44,828 Points
But Ben DOES know how to do Skuid....
-
2,330 Points
Very cool stuff, at least its a starting point. Thanks Ben!
Jarrod Hinson