I’m trying to add a custom component to several Skuid pages by just including a static resource. I’ve been able to get the custom component working by dragging the custom component component into the page and point it to the js component snippet I have, but we are adding this to all 150 of our pages. I’d like to be able to just include a static resource to each page and have it automatically add the component to the pages. One less step we have to take when implementing our new feature.
I’ve found a lot of resources on how to create a custom component, but they all seem to require that you drag and drop the custom component component onto the page.
How can I automatically add a custom component to a page using javascript?
Thank you
Question
Add component to Skuid Page automatically without adding custom component
+9This topic has been closed for replies.
+18The only way I know of to programatically change the content of your skuid pages would be to use skuid-grunt or skuid-cli to get the XML for all your pages, run some kind of script to add your component to the XML, and then push it all back again.
+5- Nintex Employee
Hey Sam,
Matt is right on the money here. You won’t be able to add the components to a page just by including them in a static resource, that just makes them addable to the page.
Skuid components are typically added declaratively within the App Composer, which updates the XML of the Skuid page. However, since it’s XML, you can make those changes in any text editor if you know what you’re doing. For what you’re trying to do I’d suggest getting an idea of how the XML changes with that new component added by doing a before-and-after:
- Looking at the XML for a page before adding your custom component by clicking the View/Edit XML, located in the very bottom right of the canvas within the App Composer.
- Copying and putting that XML aside.
- Adding your custom component to the same page from the Components tab in the App Elements pane.
- Clicking Save.
5. Clicking View/Edit XML to see how the XML has changed to include your custom component.
Compare the two versions of the XML to see how adding your component has changed the markup. This will give you an idea of what should change for all of your pages.
From there I’d do as Matt suggested: pulling down all relevant pages (likely using a module to group the pages you’ll need) using the skuid CLI. Depending on your regex-fu and page design needs, you could then look at doing a multi-file find+replace across those XML files, or maybe you’d script out the changes if you’ll be doing that consistently in the future.
From there, use the skuid CLI to push those pages back to your org.
Hope this helps!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.