How do you build a custom Skuid component that wraps Visualforce Standard Components?

  • 2
  • Question
  • Updated 4 years ago
  • Answered
We're using the Skuid Chatter Feed component <social> and understand that under the hood it is using the VF chatter:feedWithFollowers. We'd like to build something similar that uses VF chatter:newsfeed component instead but also allows pass-through of attributes, e.g. create a new <socialNewsFeed onComplete="myFn()">. It's probably very similar to the <social> component or an extension of it but there is a more powerful use case here where it could be other VF components like <flow:interview> which would allow embedding of visual flows within Skuid.

How do you build such a component or is there an easy way to "include" VF components in a Skuid page? I'd be happy to share the newsfeed custom component for others to use if I can get it up and running.
Photo of Stephen Chan

Stephen Chan

  • 956 Points 500 badge 2x thumb

Posted 4 years ago

  • 2
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Hi Stephen,

Adding Visualforce components to Skuid can be pretty tricky.  Here are a couple issues.

1. Certain components (like apex:tab) use an old Javascript library called Prototype.js. This library actually overwrites certain aspects of Javascript to behave differently than they normally do, causing Skuid to break.

2. Any Visualforce page that has ViewState, uses an actionFunction, or uses a rerender, will cause the page to reload.  As soon as an actionFunction or rerender happens, Visualforce will take over the whole page and the rest of your Skuid page is gone.

The reason the chatter component works is that is doesn't use any of these Visualforce features.  It is much more Javascript heavy. (A lot like Skuid).  Flows do not work in this manner and when we've tried to add them they break the page.

Iframes are the best way to get around all these issues.  If the Visualforce page is running in an iframe, they run in a completely different context and typically do not interfere with how Skuid works.

Right now, I don't think it would be feasible to build a component like Skuid's social component as a custom Skuid component, as it uses quite a bit of internal only functionality.  It's on our list to add the newsfeed as an item to the social component though.  Also hooking onComplete to a snippet or the action framework is a great idea.  I'll put that on the list as well.
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Hi Stephen, In our latest release of Skuid (5.7), we added the ability to add in a newsfeed with the chatter component.  We also added a way to do oncomplete actions.
Photo of Stephen Chan

Stephen Chan

  • 956 Points 500 badge 2x thumb
That sounds great Ben, thanks for listening to these new feature requests. The pass-through attributes are important to maximise built-in functionality so glad to hear you've managed to included that too.

I can't seem to find (5.7) in the release list (http://www.skuidify.com/skuidreleases) and have the Summer 14 (5.8) installed which doesn't have this new component. I'll wait for 5.9 to come out and see if it's there.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Stephen,  these features would be in 5.8. 

Once you add the Skuid Chatter component to your page layout you will be able to access the new features. 

1. Newsfeed:  A new Feed Type property lets you designate that Chatter will be showing a global newsfeed for the user,  or the specific feed for a particular record (defined by connecting it to a single model).


2. Action Integration:  The After-Post Actions let you establish particular actions after the feed has been updated. If you add tasks from a publisher action,  you can have the task model update this way so you immediately see the new task in your task tab. 



In addition:  If you are implementing a record feed,  you can show or hide the followers button and the topics for objects controls.  
Photo of Stephen Chan

Stephen Chan

  • 956 Points 500 badge 2x thumb
You're right, my bad, had installed Summer 14 a while ago in my dev org but didn't get the auto-update so was still on 5.5. Installed 5.8 and the component looks good, I think I can build what I need now. Thanks!