Can I Control "Rich Content" Page Elements Using Velo Code?

Ask the community
,
1

Greetings Gurus.

I built a dataset and placed two rich content elements on my webpage. I can connect the two elements to the dataset easily enough, and it works and looks nice. But I need more control over which data is shown. If my two elements were “rich text” or even “text” elements, I could control it using the following code snippet:

function pageContent() {
    $w("#dataGAM").onReady( () => {
        $w("#dataGAM").getItems(0, 1)
          .then( (result) => {
            let items = result.items;
            $w("#richContent1").html = items[0].gam1;
            $w("#richContent2").html = items[0].gam2;
            });
    });
}

But the two elements must be “rich content” (as opposed to “rich text” or just “text”), because I also need to control the format more than what even rich text allows. (Modifying the themes just won’t cut it for my purposes.) I would also like to use several item fields to divide up my content. Changing between these fields will be handled by forward and back buttons (already coded and working). But the above starter code snippet won’t populate the “rich content” elements. It seems I can only use the UI.

Is there any way to control the content of a rich content element using Velo code?

Perhaps a modification of the above snippet?

Thank you so much.

2

Querying rich content returns an object so it would not work with .html or innerHTML. I am not sure if it is currently supported though as this type of element is not in the Velo API documentation. I will respond once I know more.

3

Okay! It looks like you need to use .value()

See this example code:

import wixData from 'wix-data';
$w.onReady(function () {
  wixData.query("States")
  .find()
  .then( (results) => {
    if(results.items.length > 0) {
      let firstItem = results.items[0].richTest; //see item below
      $w('#testRichContentID').value = firstItem;
      console.log(firstItem);
    } else {
      // handle case where no matching items found
    }
  } )
  .catch( (err) => {
    let errorMsg = err;
  } );
});
1 Like
4

You nailed it!

Really nicely done.

I don’t know enough about Velo code to experiment like that. In this specific instance, it didn’t occur to me that “.value” might offer a solution. Elsewhere and in other respects, certainly (buttons, inputs, text elements, etc).

This is huge. I am now the master of my stored content. I’m so excited. There isn’t much I won’t be able to do with this.

Thanks so much.

If anyone needs it, the modified code snippet simply uses “.value” instead of “.html” on the element ID’s as follows:

function pageContent() {
    $w("#dataGAM").onReady( () => {
        $w("#dataGAM").getItems(0, 1)
          .then( (result) => {
            let items = result.items;
            $w("#richContent1").value = items[0].gam1;
            $w("#richContent2").value = items[0].gam2;
            });
    });
}

Thanks, again, Amanda. And happy coding, all…

1 Like
5

Hello Amanda, I have been scouring the forums looking for a solution to importing content into a “Rich Text” or “Rich Content” field in my collections.

I have content created by our site users that I need to programically convert to an object for insert/update to our custom collections using the backend wixData.update() / wixData.insert() API calls.

I am able to convert to any Google supported doc exports like HTML/RTF, but wixData() treats the data as a string and so in Content Manager, it looks like this instead of the expected WYSIWYG editor UI.

{\rtf1\ansi\deff0{\fonttbl {\f0\fnil\fcharset0 Calibri;}{\f1\fnil\fcharset2 Symbol;}}{\colortbl ;\red0\green0\blue0;}{\pard\cf1undefined{ THIS }{ IS A RTF EXPORT }{\cf1undefined TEST }\sb70\par}}

But when I create the same content from Content Manager and view it in Node, the object looks like the following.

nodes: [
 {
   type: 'PARAGRAPH',
   id: 'foo',
   nodes: [
     {
       type: 'TEXT',
       id: '',
       nodes: [],
       textData: { text: 'THIS ', decorations: [] }
     },
     {
       type: 'TEXT',
       id: '',
       nodes: [],
       textData: {
         text: 'IS A',
         decorations: [
           { type: 'BOLD', fontWeightValue: 700 },
           { type: 'UNDERLINE', underlineData: true }
         ]
       }
     },
     {
       type: 'TEXT',
       id: '',
       nodes: [],
       textData: { text: ' TEST', decorations: [] }
     }
   ],
   paragraphData: { textStyle: { textAlignment: 'AUTO' }, indentation: 0 }
 }
]

So I’m obviously using the wrong tools / methods to generate a “Rich Text” / “Rich Content” object that WIX recognizes.

Can you help with some guidance, or are there WIX NPM modules that allow me to generate / convert to the correct object model from another file / data format?
Much appreciated any help / direction you can offer.

6

@website61642 I will look into this and get back to you. I haven’t come across this use case yet so I will need to do some digging.

So you are taking data from a wyswyg in a non-wix site and importing it into a wix collection via Velo, correct?

7

@amandam Thanks for responding.

Almost right, I am taking content from my users in a Google Workspace domain and importing it into our Wix site using Velo as a backend task. That allows me to export our data using all the google supported formats “HTML, Rich text, Open Office, PDF, MS Word document, and EPUB” into a collection to be used for repeaters and dynamic page content.

So not wyswyg. I was just using WIXs wyswyg to test and understand the input format required by your WIX APIs. Your response to this thread gave me a clue.

But i’m far from a solution that frankly, i’m quite shocked that my use case has never come up before. I really thought I would have an easier time integrating google with WIX. Thank you for your attention on this. I am truly blocked.

8

@amandam Hello. Some progress today.
I figured out that by using the WIX UI Editor in Content Manager to create some Rich Text content and then query that record using wixData.query() I could examine its storage format and then hopefully replicate it for our own content.
Here is what I found

1613×398 35.8 KB

results in the following content of the details Rich Text field

details: '<p class="font_8">THIS IS <u><em><strong>A AN RTF IMPORT</strong></em></u> TEST</p>'

So it looks like standard HTML.
I was able to write this content to the collection using wixData.update() / wixData.insert(), so I have some way of getting content into our website.

I would much prefer using the advanced features of the Rich Content field, if I can get some documentation and code samples for rendering the formatting.

Thanks

9

@website61642 I’m glad you found a workaround. I am still looking into this and seeing what’s currently available or coming soon. I will be in touch!

10

@website61642 Hello. Following up on your request. The Rich Content API and ability to import from an external source are still in development. I do not have an exact timeline but can say that it is actively being worked on (versus a future idea)

For now, per the devs on that team what you are doing as a workaround is the best option.

If you follow the News & Announcements category, that is where it will be posted when there is a new API update.

11

Hi, I have a similar question. How do you access text/headings inside a rich content box. Say you had rich content containing titles and paragraphs, how do you refer to those titles/paragraphs so that you can write code for them

12

try this

$w(‘#richContentViewer’).content = data.items[0].richContent