Quick question about Dynamic Pages

Ask the community
, ,
1

Is it possible to use the embed element in Editor-X to display Dynamic Pages?
For example, I have a FAQ Database full of questions and answers.
I have 26 questions listed on the page, and I want all the answers to be displayed In an embedded element container, one at a time, depending on the question that was selected, beside or below the list of questions and on the same page.

and if the answer to the previous question is - No.
Can this be achieved by Javascript code? can I read from a data collection in similar fashion as I would read from a JS object or an array?

Ty!

2

Could you please show some screenshots of your project-setup?
Related databases and their structure?

The more input you give, the more output you may get.

3

All I have right now are Ideas, and one database for Q&A.
I was looking to know if the huge amount of time I invest in researching solutions is actually going to lead to something, as for the past 2 weeks I’m learning how to code so I can manipulate the site as I please.
I’m going through the velo course in codecdemy and I’m pretty sure it’s going to deal with my question in the next lesson but I won’t know for sure until I get there.

Here’s a screen shot of the database regarding the question I asked in the first message.

1892×482 51 KB

4

@sabugen
I just visited Editor-X-Community 5min ago (boring forum by the way), and i saw that Editor-X has released —> MULTI-STATE-BOXES! Wow! Soon Editor-X will become better then the normal one → we’ll see us in 2050 again :sweat_smile:

Ok, all right aside. I do often little jokes time by time :grinning:.

Important statements in your description are —>

  1. For example, I have a FAQ Database full of questions and answers .
    Ok, i see the DB now on your provided Screenshot!

  2. I have 26 questions listed on the page.
    Question! How they are listed on the PAGE ? Why you do not provide this important info?

As i know → EDITOR-X do not have TABLES, so i asume you have them inside a REPEATER ? Another version ?

  1. I want all the answers to be displayed In an embedded element container, one at a time…

How you can select each item (each row in DB) ? → My assumtion was right? → You use a REPEATER to display your DB-Items?

As i already mentioned, you then would have two options…(or even more)…
a) —> a second REPEATER
b) —> MULTISTATE-BOX
d) —> Custom-element/Html-Component (iFrame) + more CODE
d) —> If anybody knows other possibilities → let me know

  1. …one at a time, depending on the question that was selected, beside or below the list of questions and on the same page.

If you have all your questions inside a REPEATER → Then this last one should not be a big problem. A REPEATER has an ITEM-INDEX → the same as a DB has.

item-index in REPEATER = row-index in DB (sometimes this index is inverted).

  1. can I read from a data collection in similar fashion as I would read from a JS object or an array?

Take a look onto the DATA, what a REPEATER normaly would expect, to be feeded with…

An Array —> full of Objects! Exactly what your FIRST-REPEATER would be filled with.

[
  {
    "_id": "1",
    "firstName": "John",
    "lastName": "Doe",
    "image": "http://someImageUrl/john.jpg"
  },
  {
    "_id": "2",
    "firstName": "Jane",
    "lastName": "Doe",
    "image": "http://someImageUrl/jane.jpg"
  }
]

Your SECOND-REPEATER would always get JUST-ONE-SINGLE DATA-OBJECT.
More about how to generate this, which PROBLEMS you can get and how to resolve them, you will find in the following post…

After i have break your description into peaces, it made sense to me what you want to achieve, i hope i understood it the right way.

Anyway → you do not have a lot of possibilities in EDITOR-X.
Your BEST-FRIEND in EDITOR-X is a REPEATER (PERHAPS also the CUSTOM-ELEMENT) and since some days/weeks also the MULTI-SATE-BOX, which by the way, also could be used for your purposes!

I hope this post gave you some new insights and ideas.

Good luck!

5

@sabugen

Sorry! I gave you the wrong LINK!
Here is the RIGHT one! (But you can read the other too, because it could also be very → useful!)

This one is about REPEATER-PROBLEM. I bet, you will have the same issues in EDITOR-X → let me know if the REPEATER works better in Editor-X than in the normal-Editor! → If so, let me know about your investigation-results and you will get the next coding service for free xDDDDDDD

6

@russian-dima looks promising although I don’t fully understand it yet.
I created a mockup of what I’m trying to achieve with photoshop but I think you understood me

1000×1000 98.8 KB

7

@sabugen
All you need to recreate your mockup are the following elements…

1xbox (or multistate-box)
1x text/text-field
1xrepeater
+some code of my last provided link

Thats it.

8

@russian-dima Alright it’s done! and I even wrote my own code!
I think the next step is to research wix-animations to figure out how to create a nice transition when the answer in the box changes
Or maybe I can onClick… hide-textInBox, then…show. I remember those have animations built in.

import { getCurrentQuestion } from 'backend/questions';

$w.onReady(function () {
    
    $w('#text1').onClick((event) => {
        let getItemId = event.context.itemId;
        getCurrentQuestion(getItemId)
        .then((answer) => {
            $w('#answerText').text = answer;
        })
        .catch(err => console.log(err));
    });

});
  • questions.jsw
import wixData from 'wix-data';

export function getCurrentQuestion(itemID) {
    return wixData.get('4dbku4ci5dbhab1hfe', itemID.toString())
    .then((output) => {
        let gotAnswer = output.answerToAQuestion;
        return gotAnswer;
    })
    .catch(err => console.log(err));
}

2284×990 192 KB

9

@sabugen Well done → even worked on backend! GOOD!

Use it —> animations built in .

DIRECT-INJECTION:

$w('#xxxxx').show('slide', {direction:"left", duration:500, delay: 10});

Or EXTERN:

let options = {direction:"left", duration:500, delay: 10}
$w('#xxxxx').show('slide', options);

But pay attention → could get very tricky on REPEATERS!!!