Custom Component Bundle Structure?

Elements Custom Components
1

Reading the documentation here: Bundle Structure

I am trying to create an extremely simple Custom Component bundle structure which has this template:

<div id="{{id}}" class="p-sm text-lg text-center {{customColor}}">
    My HTML Element
</div>

and this property:

{
    "groups": [{
        "title": "Theme Color Example",
        "properties": [{
            "title": "Color",
            "id": "customColor",
            "format": "text-{{value}}",
            "themeColor": {
                "default": {
                    "name": "blue",
                    "brightness": 600
                }
            }
        }]
    }]
}

I was setting up the bundle structure and have come unstuck when trying to figure out how to include the template as the documentation states this:

...
templates (folder)
- index.html
- each (folder)
  + index.html
  + styles.css
- include (folder)
 + extra.html
- page (folder)
  + page.html

I can’t figure put how my simple template fits in that structure? :confused:

Would it be possible to have an example of a very simple Custom Component elementsdevpack (bundle) to look at.

2

Here’s the structure of a pack we use internal for some simple components.

The bundle is called “Awesome.elementsdevpack” and inside is the following:

CleanShot 2024-10-18 at 4 .02.58@2x
CleanShot 2024-10-18 at 4 .02.58@2x1920×685 350 KB

3

I am still unclear as to what the folder templates content should look like for the simple template example I gave, i.e. what the contents are and how the template example I gave should be setup inside it?

4

Okay, here’s the basics…

  • logrunner.elementsdevpack (folder)
    • Components (Folder)
      • com.logrunner.component.simple (folder)
        • properties.json (your properties code from above)
        • info.json (you’ll need this to describe your component, see docs)
      • templates
        • index.html (your Template HTML from above)

Let me know if you’re still stuck or have move questions!

5

Ok, so the ‘info.json’ in the docs, immediately inside of the components folder shouldn’t be there?

Shouldn’t the ‘templates’ folder be inside of the ‘logrunner’ folder?

6

Here is what my folder structure now looks like:

CleanShot 2024-10-19 at 12.36.15
CleanShot 2024-10-19 at 12.36.15318×328 17.6 KB

Not sure if this is 100% correct as the available information is slightly inconsistent?

My info.json is:

{
  "identifier": "com.logrunner.component.simple",
  "author": "Logrunner",
  "title": "simple",
  "group": "Fun",
  "build": "001",
  "version": "0.0.1",
}

The question now, is how to install and access it.

When I double click on logrunner.elementsdevpack, it appears to interact with Elements (i.e. launches Elements if it isn’t running) but doesn’t give any indication that it has received the new Custom Component. It doesn’t appear in the Components Gallery and there is no message saying it has been added. :thinking:

7

a quick video of how to a put a simple example would be great

2 Likes
8

The current betas won’t load dev components right now – we have it working internally (it’s how we build the built-in components), but it’s disabled in the builds we send out.

As you know we’re really trying to focus on customers/users right now, and to get a public beta shipped. We hope to open up developer support in Elements late this year — I’ll have more news on that soon-ish.

2 Likes