EDS custom block | How to read properties in js file | Adobe Higher Education
Skip to main content
P
pradeepdubey82
Level 5
June 26, 2025
Beantwortet

EDS custom block | How to read properties in js file

  • June 26, 2025
  • 2 Antworten
  • 790 Ansichten
Hi Folks, I recently started writing my first Universal Editor compatible block in 'EDS'. Block has title as text field and description as richtext field. How could I read the values of these block properties in js file? Actually the use case is to arrange the text on page with some custom styles. Any help is highly appreciated. Thanks, Pradeep
Beste Antwort von arunpatidar

Hi @pradeepdubey82 

It depends how did you configure the component-model. If you don't use component grouping then you need to read the content from each row. If you use content grouping then you need to read just children nodes

https://www.aem.live/developer/component-model-definitions#element-grouping 

 

2 Antworten

Shashi_Mulugu
Community Advisor
Shashi_MuluguCommunity Advisor
Community Advisor
June 26, 2025

Hi @pradeepdubey82 , EDS is new way of development and its a bit challenging for mind shift but once you master this we can  build blocks and pages with ease. 

 

Coming to your question of access fields in JS. We dont actually access fields in js, EDS renders content as html in output and we can play with HTML using JS for functionality or styling.

 

https://experienceleague.adobe.com/en/docs/experience-manager-learn/sites/edge-delivery-services/developing/universal-editor/5-new-block

 

So using above documentation when you create a block, pls provide ID for the block along with your block definition, model, filter etc.

 

Once you choose to author this block in your page, universal editor shows these fields in content panel, once you author content,  EDS generates HTML for you.

 

Now using Block CSS and JS you can customizations to it like below by targeting specific block with ID and its underneath elements.

 

https://experienceleague.adobe.com/en/docs/experience-manager-learn/sites/edge-delivery-services/developing/universal-editor/7b-block-js-css

 

Hope this helps.

 

 

 

 

 

 

 

 

    P
    pradeepdubey82Autor
    Level 5
    June 26, 2025

    I understood decorate function in js file is generating the html as per the need. But my question is 'block' attribute passed in decorate function, from the block reference how could I fetch the 'attributes' for that block?

     

    I want to format the values/text and do some manipulation before rendering on page. 

     

    Is it possible in EDS?

     

    ButhpurKiran
    ButhpurKiran
    Level 4
    June 26, 2025

    One way through JS could be

     

    import { attach } from "@adobe/uix-guest"; let guestConnection; useEffect(() => { (async () => { guestConnection = await attach({ id: extensionId }); })(); }, []); const editorState = await guestConnection.host.editorState.get(); const { editables } = editorState; const blockId = "your-block-id"; // Note : Replace with your block's ID const block = editables.find( (editable) => editable.id === blockId && editable.type === "reference" ); if (block) { const { resource, value } = block; console.log("Block Resource:", resource); console.log("Block Value:", value); } const formattedValue = formatRichText(value);

    PS: You'll need to make sure the script is executed before the page is rendered. Headers(Immediate Load)
    Footer(Lazy Load) - Need to hold rendering till the script is executed.

     

    Thanks,

    Kind regards,

    Kiran Buthpur

      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      July 1, 2025

      Hi @pradeepdubey82 

      here is the example of card block

      https://github.com/arunpatidar02/aem-xwalk-1/blob/main/blocks/cards/cards.js 

      Arun Patidar
        P
        pradeepdubey82Autor
        Level 5
        July 1, 2025

        Hi Arun,

         

        I have title and description field in in block. Card blcok has rows, so the logic is totally different here. Not sure how to fetch the individual fields from block object.

         

        arunpatidar
        Community Advisor
        arunpatidarCommunity AdvisorAntwort
        Community Advisor
        July 1, 2025

        Hi @pradeepdubey82 

        It depends how did you configure the component-model. If you don't use component grouping then you need to read the content from each row. If you use content grouping then you need to read just children nodes

        https://www.aem.live/developer/component-model-definitions#element-grouping 

         

        Arun Patidar
          Allgemeine NutzungsbedingungenAccessibility statement

          Loading footer...