Grabbing the block name in Javascript and other model questions for UE | Community
Skip to main content
acntimlavelle
August 24, 2024

Grabbing the block name in Javascript and other model questions for UE

  • August 24, 2024
  • 2 replies
  • 825 views

Good morning - I've been doing some block development with UE and as I've been going through this, I wanted to ask a few questions. 

 

  1. In a recent GEM webinar, there was reference to appending foreground_ and background_ to block names and this would affect the grouping of divs in EDS. I tried to find documentation around this and other useful things to know when modelling, but I couldn't find it. 
  2. When modelling the block, we assign names in the JSON, is this name attribute available to use in the Javascript? 
    1. Reason is, if I have a model with multiple text types, these are outputted a P tag in a div. But I can't see a logical way to decorate specific children[n] of a block without knowing what I am decorating. 
    2. Simple Example: Block has Author Text and Summary Text block types. If I don't add a Author, but add a Summary, I don't want the Summary styled like the Author.
    3. What I would like to do, is add an ID to the P tags which corresponds with the block name

 

<div><p id="authorName-3D-printing-with-tim-lavelle">Author Name</p></div> <div><p id="summary-3D-printing-with-tim-lavelle">Author Name</p></div>

 

  • Is there a better way to handle restricting block component types from rendering to the DOM?
    1. Example: I create a select type component in a block to handle Style selections

 

{ "component": "select", "name": "teaserClassName", "value": "", "label": "Class", "valueType": "string", "options": [ { "name": "default", "value": "" }, { "name": "Card", "value": "card" }, { "name": "Banner", "value": "banner" } ] }

 

  • As this is a component block, the selected value is rendered in the DOM and would essentially be indexed and I wouldn't want that. 
  • Additionally, is there a way to block it from rendering, without having to use the JS to remove() it after it's been sent to the DOM already. 
  • This same question would apply for component type boolean as it outputs the boolean value to the EDS DOM.

 

Hope these aren't too many questions in one thread and thanks for stopping by and reading. 

 

Cheers

Tim

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

arunpatidar
Community Advisor
Community Advisor
August 26, 2024
Arun Patidar
kautuk_sahni
Community Manager
Community Manager
August 30, 2024

@acntimlavelle Did you find the suggestion helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

Kautuk Sahni
acntimlavelle
August 30, 2024

Hi @kautuk_sahni 

 

For my question around foreground_ and background_, the suggested link doesn't answer the question. It is a good link to see how we can group items together, but the Webinar suggested foreground_ and background_ and I can't find that documented anywhere. 

 

And for question #2, not answered. 

 

But for Question #3, that did indeed help.... but if I use this method, I can't write JS based on it and makes it harder to properly decorate. The good news is I am speaking to engineering at Adobe, so may get a better response in the next week or so.