Get Element's attributes, including UID

Ask us anything How do I?
1

Given a variable snippets of the form

{ 
"<uuid1>": "snippet 1 text",
"<uuid2>": "snippet 2 text"...
}

I would like to bind a text input to its corresponding value based on the weweb Editors provided UID.

How do I access the uuidwithin the javascript editor ?

image
image694×66 4.78 KB

image
image1688×604 57.6 KB

2

I think there is currently no good way to do this

  • Be aware that repeated items and linked section have the same uuid, so it may be a problem for you
  • the formula has no this context

A better approach will probably to use an id from your data on both element you are trying to connect.
Can you explain me more your usecase?

1 Like
3

Thanks for the reply, @aurelie

I don’t have any intention of using the UUID with repeated items. It’s only to be utilized with bound-text elements.

I am hacking together a headless CMS to allow my team to freely edit copy on our site without requiring a full re-build.

I have two tables,snippets and element_snippet_map:

CREATE TABLE "web_content"."snippets" (
    "snippet_id" uuid NOT NULL DEFAULT uuid_generate_v4(),
    "content" text,
    "description" text,
    PRIMARY KEY ("snippet_id")
);

CREATE TABLE "web_content"."element_snippet_map" (
    "element_id" uuid NOT NULL,
    "snippet_id" uuid,
    "typography_id" uuid,
    "description" text,
    CONSTRAINT "element_snippet_map_snippet_id_fkey" FOREIGN KEY ("snippet_id") REFERENCES "web_content"."snippets"("snippet_id"),
    PRIMARY KEY ("element_id")
);

-- Column Comment
COMMENT ON COLUMN "web_content"."element_snippet_map"."element_id" IS 'This is the UUID from WeWeb';

In WeWeb, I have configured the following

  1. collection site-snippets: an array of objects of the form

    [
    {
    "element_id": "UUID1", "content":"This is the copy for UUID1" 
    },
    ...
   {
    "element_id": "UUID99", "content":"This is the copy for UUID99" 
   }
]

  2. variable snippet-lookup: a dictionary derived from site-snippets of the form

    {
    "uuid1":"this is the copy for UUID1",
     ...
    "uuid99":"this is the copy for UUID99",
}

Whenever I create a new text element in WeWeb that should be customized with our copy, I create a new record in element_snippet_map, setting element_id (the primary key) equal to the WeWeb’s element UUID.

Then, I would bind the text to snippet-lookup[this.elements.uuid]

I currently have it working for page-specific copy - because the page_id is exposed in the WeWeb Editor.

e.g., each page has a record in element_snippet_map, and I can populate the page’s title via snippet-lookup[context.page['id']] (or snippet-lookup[CurrentPage['id']], same thing)

With those details in mind, are you aware of a reasonable method of obtaining CurrentElement['id'] or something similar?

4

Hi,
at the moment we do not expose the uid in the context, as it is an internal id.
There is two ways i can see this

  • Use an other id than the weweb id
  • Create your own text component, here you will have access to the uid, and provide it as a context to your text, with the help of wwLayoutItemContext. But then depending if your component is wrap or not inside a repeat, this can make accessing other “normal” context more difficult (your repeat context will be inside the context.parent.data, instead of just context.data)

Second option is the best current hack if you really want the weweb uid, but i strongly advise to go more on the first option

Currently how are you extracting the weweb uuid?

1 Like
5

Given that the UIDs are plastered all over everywhere in the WeWeb Editor Interface, I figured I would have access to them

supamkt WeWeb 2023-02-24 at 1.09.02 PM
supamkt WeWeb 2023-02-24 at 1.09.02 PM3052×1384 264 KB

Yes, Option 1 is reasonable - I could create my own ID. It’s just an extra (and unecessary in this context ) step for me to manage, but I can make it work

6

Hi @justifi,
the different uid are displayed when you are on dev mode. There are mainly here for debugging, as the uid is the way to go to see the raw data of a component.
I take notes on your usecase, and gave the feedback to the product team, so we might in the future add the uid in the context of an element.

Just for information, the uid is the id on our database of a component configuration. You may have several components on the page with the same uid (on a repeat for example, all repeat have the same uid, but receive different context so that formula are evaluated with different results).
It may be the behavior you want (meaning like us, you want them to share a common configuration) or not.
The base uid is the “type” of component (aka “the source code”)

Let me know if having the uid will be enough for your usecase.
Does having base uid can also be relevant for you? (i don’t think so for this usecase because they will all be “text”, but maybe you have other usecase in mind?)

Other question: what is currently your process to create your rows on the element_snippet_map table? You manually copy the uid? (just to understand 100% your usecase and have it in mind to maybe improve things in the futur). Who is responsible to create it? Dev team, product team? (what type of user?)

1 Like
7

hi @aurelie . thanks for another thoughtful response

I [think I] understand the implications and limitations of the element UID. And thank you for clarifying what a ‘base UID’ is - that was a mystery. makes sense.

Yes :slightly_smiling_face: :upside_down_face: :slightly_smiling_face:. Its not an elegant solution; i’m aware .

  1. create the element in WeWeb
  2. Copy the UID from WeWeb to element_snippet_table in postgres.
  3. add some placeholder content in postgres
  4. reload the collection site-snippet; refreshing my variable snippet-lookup
  5. bind the element from step 1. with the value of snippet-lookup[page_uid/section_uid]

Obviously the above only works for pages and sections, for which the editor is aware of the UID.
So I took your earlier advice and created a separate, standalone key, and am no longer referring to the element UIDs

It’s working just fine! I don’t think there’s a great need for your product team to consider my original request - I just needed someone to explain it to me. Thanks again @aurelie

1 Like