hey guys, so I haven’t worked with coded components before. I want to learn how things work while using it in our instance. I found it hard to wrap my head around how things work in coded components. It would be very nice if there were some more simple examples of coded components and maybe a step-by-step guide to set it up. Also FYI I will be using it for a custom Gantt chart.
I apologize for being dumb
Hi, thank you for your question! There is no need to apologise - the coded component is a powerful tool but it is maybe the hardest component to begin with, and it isn’t very “no-code” either.
Here are some useful links that I recommend using to get started:
Our documentation where you can read more about the coded component and its key principles.
Appfarm Showroom where you can see how the component works from the user’s point of view. You can also access our Showroom through Appfarm Create to see how the developer has set it up as well.
If there are any specific questions relating to the setup in your use case, please feel free to send them here as a reply and myself or another member of the team will happily assist.
Thanks,
Rhys
hey sorry, but I forgot to mention I already checked the stuff in the showroom. Unfortunately, I did not get most of the parts. I think the confusing part is getting to know how the HTML content, script, resources, and namespace work together. Maybe an easier example would be good
Hi,
To access the data and actions you have defined in the component itself, you can use appfarm.data and appfarm.actions properties. You can also use appfarm.element to access the DOM element, and therefore the HTML content. If you change the Namespace, then you will need to make sure the correct namespace is used in place of ‘appfarm’ here.
I have described a simple use case below, where a coded component toggles between two images.
How it looks in Create:
The checkbox below the component is bound to the App Variable “toggle”.
HTML content:
<img style="width: 25; height: 25;"</img>
Script:
//Get image from HTML element
const image = appfarm.element.querySelector('img');
// Event handler when user clicks to change image
appfarm.data.toggle.on('change', (val) => {
image.src = val ? appfarm.data.src1.get() : appfarm.data.src2.get()
})
//Initial image value
image.src = appfarm.data.toggle.get() ? appfarm.data.src1.get() : appfarm.data.src2.get()
To recreate this setup, you can create a boolean App Variable, and add two images as Resource Files, and then copy the setup from here.
Thanks,
Rhys
hey, thanks for this example. It helped me to get a gist of it. However, if I want to work with a third-party library, I wonder what the steps might be. the confusing part is adding the resources to content security i think
Hi,
To add a third party library for your coded component to access, you can do so in Environment configuration, under Content Security and then Script Sources. You can also add third party CSS styling sources under Content Security, which could also be used by the coded component.
For example, if you wanted to add the Mapbox API to your coded component, you could add the link to the Script Sources like this:
Then you can add the third party link to your coded component resources like this:
Thanks,
Rhys
Hi. You need to add the source URLs under Environments. In my experience, it is a bit of try and fail. If it is a JavaScript library you need to add an entry under Script Sources. But your library might in turn call on other sources like Fonts, Image Sources or Web Request Targets. So you might have to add those as well. And you will have to do this for all Environments (which is a bit of a pain)
If you add each of the sources one by one and check the debugger in your browser (developer tools->inspect) you will see error messages. Good luck 
1 Like