integrating angular.js with skuid

  • 1
  • Question
  • Updated 3 years ago
  • Answered
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?
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Jarrod,

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
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
I 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.
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,470 Points 10k badge 2x thumb
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('&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>
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,470 Points 10k badge 2x thumb
Also of note... I really have no idea how to use Angular, so I may be doing everything wrong :(
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
But Ben DOES know how to do Skuid.... 
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
Very cool stuff, at least its a starting point. Thanks Ben!