Displaying Random Selection from Dataset

Ask the community
,
1

I am a new coder, but gradually learning…so would appreciate a little help here, as I can’t figure out the answer from the Velo reference.

I am pulling a random record from my dataset to display in a section…based upon code from another thread I found on here. I have got this working for a couple of elements in my dataset - a regular text field and a rich text field…and it works perfectly for the first of those but only partially for the second. However, I am also trying to display an image from the data set and a button connected to a URL field. What I have is the following today:

$w.onReady( () => {
    $w("#RandomMemberOrg").onReady( () => {
 let count = $w("#RandomMemberOrg").getTotalCount(); 
        $w("#RandomMemberOrg").getItems(Math.floor(Math.random() * (count - 1)), 1)
 .then( (result) => {
 let item = result.items[0];
            $w("#membertext").html  = item.description
            $w("#membername").text  = item.title
            $w("#logo").image  = item.logo
 })
 })
})

So I have three (hopefully pretty simple) questions:

  1. The rich text field is not picking up the theme info from the rich text entry in the dataset…is there some other property type beside .html that I should be utilising?

  2. The use of .image for the image doesn’t appear to work…what should I actually be doing here? - SOLVED

  3. How do I connect a new link to a button in a similar fashion? - SOLVED

Thanks,
Simon.

2 
1) The rich text field is not picking up the theme info from the rich text entry in the dataset...is there some other property type beside .html that I should be utilising?

Perhaps you need this ...
https://www.wix.com/velo/reference/$w/richtextbox/value 

2) The use of .image for the image doesn't appear to work....what should I actually be doing here?
let imageSource = $w("#myImage").src;
"wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg#originWidth=1970&originHeight=112


3) How do I connect a new link to a button in a similar fashion?
$w("#myElement").link = "http://wix.com";
$w("#myElement").target = "_blank";
3

First answer would be to use the CSS code inside the text like this:

$w("#membertext").html = `<span style="color: blue">${item.description}<span>`

The second answer would be to use the .src link on the dataset like this:

$w("#logo").src  = item.src

The third would be using the .link method in the Button itself:

$w("#myButton").link = "http://www.wix.com"
4

Thanks for the reply.

#1 didn’t work…I need to figure thsi one out still…

#2 worked with just the src modification. One down!

#3 worked when I subbed the wix.com address you suggest with item.website (website is the dataset field name). Two down!

5

@simon9978 For the last take the answer from Bruno (or take a look onto my last post).

6

Thanks for the reply Bruno. I am only trying to solve #1 now…the other two are fixed.

On the open item, I can’t see how to display Rich Text using this approach…perhaps it just isn’t supported. The dataset field has a fairly lengthy entries using mixes of type sizes and it isn’t practical to use CSS the way you suggest - this would only work if I wanted everything to be blue…which I could easily have a achieved formatting the placeholder on the page and then applying plain text to the field.

There might not be a way to do this so I might just have to switch to using text only…IF ANYONE ELSE HAS ANY IDEAS, FEEL FREE TO PITCH IN.

7

@simon9978 Your problem will be that you do not use the RichtextEditor for text-input, before do the output right?

If you want to get some text out of your DB with some specific format, then you have also first to bring the text with the right format into your DB first.

How to do ?
-Place a Rich-Text-Field onto one new empty page.
-Add a button (button1).
-Add this CODE here…

$w.onReady(function() {
    $w('#button1').onClick(()=>{
        console.log($w('#richTextBox1').value)
    })
});

Type something into the RichTextField in Preview-Mode.
Do some text-formating.
Press the button and take a look onto —> CONSOLE.

Now you should understand, why i mentioned the → VALUE ! :wink:

Output-format = input-Format!

Bruno’s suggestion also works → but in manual way.