There are two strategies that could be used here. 

1. You could wrap the VF page in an iFrame in the template component.   Don’t change your VF code - just call it from the iFrame. 

2. You could take the contents of your VF page and adjust them so tehy are Javascript resources in your skuid page.  

A: Each referenced resource in the script above would need to be resources called from the Static Resource.  (See this help file:  http://help.skuidify.com/m/supercharge-your-ui/l/102514-including-custom-javascript-in-a-skuid-page) 

B: The script statement in the VF page would become a Inline Javascript resource. 

C: Finally - a template component would be used to actually put the “Chart” div on the page. 

See this forum post where Glenn Elliott outines his strategy for including Kendo charts on Skuid pages.   https://community.skuid.com/t/google-charts-in-skuid-template  (I know it says Google Charts - but Glenn describes his Kendo Strategy in some detail). 

Hi Rob,

First, thanks for the timely response. Very much appreciated.

I prefer option 2. What is not clear to me is whether Skuid can support ZIP file static resources? Glen’s post seems to indicate Skuid does whereas your comment seems to indicate that Skuid does not. The online documentation is a little ambiguous.

So that I am clear, I will need to add a static resource for each and every JS and CSS file and it must be uncompressed?

Here’s the error I get when referencing the Kendo UI library currently as a ZIP-ed file static resource.

Here’s the screenshot of the static resource definition:

Here’s my snippet:

skuid.$(function() { skuid.$('#perfTab').on('tabshow', function(e, data){ console.log('KendoUI ...'); function createChart() { skuid.$("#chart-incremental-revenue").kendoChart({ title: { text: "Incremental Revenue", align: "center", position: "top", visible: true }, legend: { visible: false }, series: s{ type: "bullet", currentField: "current", targetField: "target", data: , { current: 127500, target: 135000} ] }], categoryAxis: { majorGridLines: { visible: false }, majorTicks: { visible: false } }, valueAxis: u{ plotBands: t{ from: 100000, to: 120000, color: "red", opacity: .3 }, { from: 120000, to: 135000, color: "orange", opacity: .3 }, { from: 135000, to: 150000, color: "green", opacity: .3 }], majorGridLines: { visible: false }, min: 100000, max: 150000, minorTicks: { visible: true } }], tooltip: { visible: true, shared: true, template: "Current: #= value.current # 

 Prescribed: #= 150000 # 

 Proposed: #= value.target # 

 Target: #= 135000 #" } }); } setTimeout(function() { // Initialize the chart with a delay to make sure // the initial animation is visible createChart(); }, 400); }); }); 

My issue was not understanding how to properly define static resources in Skuid that were saved in Salesforce as a ZIP file. Yeah, I was a little slow but figured it out. Kendo UI charts are working nicely.

Glad to hear!  Would you mind posting a picture of what your finished page looks like?  We love to see some of these more advanced use cases…

Here you go:

Looks great!

Worth keeping an eye on this, though: https://community.skuid.com/t/wow-winter-15-skuid-sneak-peak

Yep, waiting for the Skuid bits.