21
Views
7
Comments
[CKEditor 5] how to get a continer id in list
CK Editor 5
Forge asset by valantic LCS
Application Type
Reactive

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.


Screenshot 2026-03-20 070851.png
2026-01-28 16-57-48
Mihai Melencu
Champion

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. 

UserImage.jpg
Sathish Kumar R

Hi @Mihai Melencu 

I have already tried that logic, but the data is still not displaying. 

2026-01-28 16-57-48
Mihai Melencu
Champion

Are you able to share your OML or a sample OML with your implementation?

UserImage.jpg
Sathish Kumar R
TestButtons.oml
2026-01-28 16-57-48
Mihai Melencu
Champion

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.

TestCKEditor.oml
2026-03-20 01-28-51
Saugat Biswas

Hi Sathish,

If you’re using the Forge CKEditor blocks (e.g., CKEditor 5 (ODC)), the documented pattern is: 

  1. Put a TextArea in the UI. 
  2. Place the CKEditor block next to it. 
  3. Pass the TextArea WidgetId into the CKEditor block’s WidgetId input. 

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: 

  • RowKey (e.g., Record.Id) 
  • HtmlContent (the row’s HTML value) 

Inside the block:

  • TextArea (bound to a local variable or block input) 
  • CKEditor block with WidgetId = TextArea.Id (as per CKEditor documentation
  • Use CKEditor’s InitialData input if available (preferred) to load content on init, instead of doing SetContent later.


Hope this helps.

Cheers,

Saugat

2026-03-20 01-28-51
Saugat Biswas

Hi Sathish,

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.

Cheers,

Saugat

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.