I am using CKEditor inside a List widget in OutSystems. CKEditor requires a container ID to render the editor view.
Since the CKEditor is placed inside the List widget, the container is repeated for each record. When the data loads, I need to fetch the data and display it in the corresponding CKEditor instance. For this, CKEditor requires the specific container ID of each item.
How can I dynamically get or assign the container ID inside a List widget in OutSystems so that CKEditor can correctly render and load the data for each record?
If anyone has implemented CKEditor inside a List widget, please share the recommended approach.
Hi @Sathish Kumar R ,
If your list isn’t very large, you can wrap the container and its display logic inside a block and manage the assignment of the container ID within that block.
Hi @Mihai Melencu
I have already tried that logic, but the data is still not displaying.
Are you able to share your OML or a sample OML with your implementation?
Sure, pls check this OML.
Hi,
I wasn't able to open your OML, but...
If your goal is only to display the content as HTML, you just need to pass the text from your actual list in the parent screen. Then create a container and assign it a name so you can access its ID. After that, use the block’s OnReady event to call the LoadHTML action, passing the input text and the container ID.
I also attached the OML so you can check the implementation.
Hi Sathish,
If you’re using the Forge CKEditor blocks (e.g., CKEditor 5 (ODC)), the documented pattern is:
The key point: you don’t need to manage a container id yourself. Each list row has its own TextArea instance at runtime, and the CKEditor block attaches to it through the passed WidgetId.
How to make this work inside a List
Best practice is to wrap your “row editor” into a Block and use the block inside the List:
Block inputs:
Inside the block:
Hope this helps.
Cheers,
Saugat
Please ensure to mark the solution if the above steps helps. This helps other community members to directly reach the solution rather than going through full length discussions.
Also: In the above steps, if you want to hide the TextArea from UI, put the height and width for the TextArea as zero.