Load data from dataSheet/dataSlot (Firestore) in a plugin

[petoma]

I am still reading the documentation and studying examples from the camera, trendgraph and some other examples but still I need a last push to understand how to get it done. So here’s what I have.

I have a Firestore collection already configured in a dataSheet in RS. The dataSheet is “posts” and the specific field that I want to retrieve is “cuerpo”:

Then I have the react editor “Quill” in a plugin with a JSX template which is working great thanks to the wonderful help given by @Oliver_Burrell. Now I have a screen where I place a list/grid to load all the posts collection. So I have a component for each one of these posts where I would show the author, date, and the body of the post. I want that body to be shown by the plugin (quillEditor) so it is shown as rich text and not as raw html.

So I would need that the plugin would show the “body” field in the posts dataSheet. I believe the section to change things would be:

Thanks in advance!

[Oliver_Burrell]

Why do you want to show it in the Quill editor?
Do you want to edit the posts in that list?

[petoma]

No need to edit the posts in that list. But when I save the content in the editable quill plugin, the content is saved with html tags like so:

If I use a text field or any of the options in RS, the content will be shown with the tags instead of the formatted text. So I was creating two versions of the plugin: the snow theme with the toolbar in order to create or edit posts, and another one with the bubble theme being readOnly and without any toolbar, but showing the formatted text.

Maybe there is some other way to show the text just fine without needing to load the plugin and the dataSheet within the plugin?

[Oliver_Burrell]

Ah, you’ll need to display the text as HTML.
There is an “Embed Content” field in RS and you could use the Data tab text field to feed the HTML in.
See an example below:

[petoma]

I see! So no need to prepare a specific version of the plugin to show the text. I just tried the html embed content and it shows the text just fine. One issue though. It seems that the field is not aware of its content?

You can see in the screenshot that there is an icon below the html embed element in scroll flow. Supposedly it should push the underneath elements but it doesn’t:

Something I am doing wrong?

[Oliver_Burrell]

Sorry, what is not pushed down?

[petoma]

The icon below the html box. In the RS screenshot is placed below the box, but in the output the text from the html goes over it. You can see it in the first screenshot in the previous message.

[Oliver_Burrell]

The Embedded Content element is just showing the raw HTML. If you need it to have margins or other CSS around it then you’ll need to enclose it in a div /div and format the div with css. Best is to debug it in Chrome and enter different values in the css for the div element (e.g. the height). Then you’ll find out what’s missing …
You could also create a frame around it this way.

[Oliver_Burrell]

Another and maybe easier way is if you put the embedded content into a new component. Then you can create frames and it will push down.
I tried it out:

[petoma]

I believe my issue is because the html element is placed in a component. I tried to create an independent component with just the html and a background and then place it in the addPost component wich is the component used to fill out the list/grid, but it does not push the underneath content. Maybe because it is component?

So if I don’t find a simple solution I have two options:

• I can manually edit the CSS after exporting the project finding the way to get it the way I want as I cannot achieve the CSS within RS. I don’t like this option too much because I would have to edit this manually for every export.
• I would rearrange elements so the html is the last thing in the component. I would place the icons over it in some place, even though I like those icons there because they just appear if the user is the author of the post, and they contribute to the scroll flow, so I would have to play around with the configuration to have a good output if they are present or if they are not.

[petoma]

Thank you so much @Oliver_Burrell. I could fix the CSS problem and no need to manually change anything after exporting. I have been playing around with the CSS and the configuration of the elements and now everything is in order.

One thing I have realized after setting everything. I have no problem creating new posts with the quill editor, and no problem listing the collection in the main screen. However I cannot achieve to load the content from an existing post in the plugin editor. I thought that it would be easy if the content is loaded in a dataSlot, but it is not. I have tried to load the content from the dataSlot inside the “component_template.js” with:

var incipit = this.context.appActions.dataSlots[‘ds_comentarios’];

But it shows an error compiling. I am guessing that I have to do the linking through the main.js code in the plugin so I have gon there and add:

// – inspector UI –

this.inspectorUIDefinition = [
{
“type”: “label”,
“text”: “A link to a data slot:”
}, {
“type”: “dataslot-picker”,
“id”: “searchDataSlot”,
“actionBinding”: “this._onUIChange”
},
];

With that, I have the hability to select a dataSlot in the UI:

However the content is not loaded. I am sure I need to specify and point that but I don’t know how to make the reference.

Sorry about my clumsiness. I believe I am almost there.

Thanks!

[Oliver_Burrell]

Hi @petoma,

In Main.js you’ll need to feed the value from the dataSlot you used to store the html into into the component like this:

Define it earlier like this (you can use a different name for the dataSlot if you like but then you’ll need to change the code further down …):

Then in the component-template you just need to initialise the state with this data like this:

Then it should work …
Good luck!

[petoma]

Thank you so much @Oliver_Burrell! It did work and now it is possible to edit an already publised post. I really appreciate your help here. I need to keep learning because even though I can understand the logic in the code when I see it, I wouldn’t be able to write it by myself.

Thanks!

[Oliver_Burrell]

Hi @petoma,

A trainings course in REACT would probably be good for you to learn more and fast. There is a free course on https://scrimba.com/learn/learnreact which is quite good.

[petoma]

Thanks for the resource @Oliver_Burrell! I’ll do that one. I have been some time learning just vanilla JS because I wanted to have good grounds before digging into REACT. I have some understanding of course of React because I have been reading and learning about both at the same time at some points. But my priority was JS so I could use the script feature to better personalize the project.

Now I feel more comfortable with JS. Still not able to do complex things, but confident enough to write some basic things. I’ll try to have some time to do that React course you suggested.

Thank you!