EDS custom block | How to read properties in js file

[pradeepdubey82]

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

[Shashi_Mulugu]

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/dev...

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/dev...

Hope this helps.

[pradeepdubey82]

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]

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]

Hi @pradeepdubey82 

here is the example of card block

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

[pradeepdubey82]

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 · Accepted solution]

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