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

[acntimlavelle]

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

[arunpatidar]

Hi @acntimlavelle 
Please check for content grouping : https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/edge-delivery/wy... 

Model definition for select : https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/dev... 

For differentiate the Author Text and Summary Text you can add a css class to these element inside decorate function.

[kautuk_sahni]

@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!

[acntimlavelle]

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.