Store ‘pretty’ text in DB/File system?

The ‘Business Consulting’ blueprint uses a convenient method for managing text for the Service page: the app keeps the text ‘chunks’ in a data table and calls them into a Paragraph as needed.

However, the table types for text (string and text) do not seem to hold the ‘prettified’ text that can be created in a Paragraph component.
Example:
Paragraph

A workaround might be to store the edited text in a file and call it through a File Reference in the table, but I don’t know how to produce that type of file.

Is there a way to create/store ‘pretty’ text (like that above) in the backend data/file system, so it can be loaded into a UI Paragraph when needed?

Hi Jim,
I already saved and load html into the paragraph component. This worked well.
Regards

Hello @Jim_Austin

I’ve created table “Paragraph” with column “content” by JSON type

Then I’ve created component paragraph with some id

I’ve saved content of paragraph with this way:


Custom code:
return par.innerHTML

It has been saved in table like:


Then I created paragraph component with some id (there we will set saved paragraph)

The logic to set paragraph data from table:

Custom code:
par.innerHTML = content

This is an example to demonstrate the approach.
Perhaps there are better solutions. I wrote the first thing that came to mind

Regards,
Viktor

Hi @viktor.liablin ,
I’ve used simple data binding provided by UI Builder to get the content into the paragraph component:
image

No need for custom code.

Regards,

Thanks Klaas and Viktor, your posts helped me understand things better.

My question: what type did you make the table column to store the .html code?

Viktor, think you said you used JSON type … odd to use that for html text?.

Klaas, you didn’t mention a type, or how you “saved and load html into the paragraph component.” Can you share that?

Jim

Hi Jim,
I’ve used a simple STRING(500) column, because I’ve basically want to store a link (<a>-tag). I guess more flexible TEXT column will do it as well …
Regards

@Jim_Austin

For my solution, I used JSON column type, because any TEXT column type did not work correctly.

Viktor,
In trying to duplicate your solution there’s a problem with the Custom Code block. I can put in the code you show, and assume I need to put ‘par’ in the ‘Add a new argument’ field:

But when I save and close, the par argument doesn’t show up on the block:


This app is still on the 30-day free trial; could that be the problem? Or is there something else I’m missing?
Jim

@Jim_Austin
After finishing taping a name of a variable do you press “Enter”?

It should looks like
UI Builder - viewDataGrid - Backendless 2022-04-07 12-09-37

Thanks Viktor, that got it! Might be useful to put a reminder to terminate with Enter, like in Data Browser data entry.
Note that your save code puts the same text into both Text and JSON column types, but retrieving from the Text type adds some double quotes, causing an error.

For those not from the web/html world: I’ve not found a simple editor to compose the rich text (that goes into the data table to be loaded into the Paragraph component). Much simpler to write a page that uses the Paragraph editor to compose the rich text, then transfers it to the data table using Viktor’s code.