Is there a way to add elements to a container with different attributes in an automated way?
I want to create database forms using Custom Components but not via the GUI. Once the components are placed, I’d use the GUI.
Ideally, I’d create some javascript with an array of components with Component Name, Table Name, Column Name, etc. Then Elements could use the array add the Components to a Container in the order defined in the array. Once placed, I’d manually organize the Container…
Hmm, I don’t think there’s a way to currently automate this…
But, I’m wondering what you’re actually trying to do? It might be better to build a single component to take in your data and add controls in the component inspector to manage it.
If you could give us more details, I’m sure we could work with you to find a solution
I’d like the benefits of the Elements GUI, but I don’t look forward to adding database labels and fields manually.
I create database-driven web apps for small biz that are not static sites but more of a List Detail interface where you click on a Record in the List and it populates fields in the Detail. The pic at the bottom shows some of the Contacts Module.
I created a proof of concept Custom Component with some attibutes:
Instead of dragging and manually setting a Component for each Column from the Table, I’d like to create a JSON array of Components with their names and property values and then ask Elements to add them.
That’d be huge for automating. I could use my SQL Table Schema to create the JSON sorted in the correct order and plop them into the GUI in no time!
Just that would rock, but being able to create a hierarchy would be next level. Imagine having JSON that defines a Card… Start with a Container with a sub Container for a Title, a sub Container for the Body, then place Custom Components in the Body. You’d end up with a Cards like in my pic below without dragging and dropping everything.
So if I understand you correctly, you want to loop over a list of items (people for example), and when each item is clicked, display more details on that item.
Is that correct?
I think the way to tackle this would be to create a single component in Elements that loops over the data array — perhaps you have an API endpoint to get the JSON?
This way you could design a card using the components in Elements, and feed it data from each item dynamically.
There are a few different ways to achieve this, you could server side render the content with PHP (or similar) or you could render the content client-side with javascript.
Am I on the right track here? If so, I can expand on this and give you more of a concrete example of how to achieve this in Elements
I want to build JSON that describes components and their attributes and have Elements add the described components to the page in bulk. Adding 30 database inputs by hand is tedious. I want to paste json into Element and have it instantiate each component described in the JSON.
Even better be able to add components to other components.
I just want to automate dragging on to the page and automate setting attributes.
At the moment, we don’t have any plans to support programmatically adding components to a page from within Elements itself.
That said, it might be worth approaching this from a different angle:
Is there a reason you couldn’t dynamically render a list of components using PHP or JavaScript instead?
For example, you could design a single “template” card in your project, and then use a script to fetch data from a JSON file, looping through it to generate a new card for each data entry. This way, you’re not manually adding components — you’re generating them dynamically based on your data source.
Does that approach sound like it could work for you?
You’d still be able to drag and drop to create the template component.
It’d work similar to how I had things setup in the Blogging Preview video from a couple of weeks ago — rather than getting the data from markdown files, you’d fetch the data from a JSON file/endpoint.
