Binding data in a repeat region

Im trying to bind data to my page. The data is displayed in three paragraphs and I’m wanting the three paragraphs to be a repeat. I have my database connected but can not figure out the procedure to get this set up. Your tutorials only show procedure that involve using tables.

Guidance would be appreciated.

Thanks in advance!

Hi Steven,
Add a paragraph to your page, select the paragraph and add a repeat, add your data inside the paragraph by selecting it from the repeat bindings. I think that is what you are trying to do? The paragraph will repeat with the bound data within it as many times as there are records within the data set.

Hi Dave, Thanks for your reply. I thought i had been doing precisely what you say. But I’m only getting one record displayed. I’ll try again and if all fails i’ll respond again with screen shots and maybe you can advise me where i’m gong wrong.

Thanks again!

1 Like

You probably picked the binding from a wrong place in the data picker. When binding data inside the repeat you need to make sure you pick it from under the repeat in the data picker.

This is making no sense to me. Ive removed previous attempt and started again. I must be missing something really simple.
So if I select the paragraph… Where do I then add the repeat from? When I select just a single paragraph there is no option to add a repeat ( see screen shot ) If I select all three paragraphs it gives me the option to add a repeat and adds the following below the open body tag:

<div dmx-repeat:repeat1=""></div>

This can’t be right.

Am I being a numpty hear? :upside_down_face:

What do you want to repeat? Usually it’s a parent > child structure and you apply repeat-children to the parent … then you select the repeat expression and bind the data in the child element.
If you want to add the repeat to the <p> itself you just apply the repeat region to it using the dynamic attributes:

Select your dynamic data for the repeat:

I.e. a database query:

And on double click on the page to edit the paragraph text, click the dynamic data picker icon to select your binding:

Select it:

and that’s all, your <p> is being repeated on the page:

As you already seen you can also add the repeat and repeat children components directly on the page using the App Connect components picker dialog.

The difference between a repeat and repeat-children is that the repeat will repeat the element it’s applied to:

<p dmx-repeat:repeat1="serverconnect1.data.query">{{my_binding}}</p>

results in

<p>i am repeated</p>
<p>i am repeated</p>
<p>i am repeated</p>

while repeat children repeats the child elements of the parent it’s applied to, example:

<ul id="parent" is="dmx-repeat" dmx-bind:repeat="serverconnect1.data.query">
    <li>{{my_binding}}</li>
</ul>

results in:

<ul id="parent">
    <li>i am repeated</li>
    <li>i am repeated</li>
    <li>i am repeated</li>
</ul>

Thanks for this Teodor… I understand the parent/child in theory. I just can’t seem to execute it in practice.
Basically this is for a testimonials page. each testimonial has 3 sections ( snippet, message, author information. ) These three sections are to be repeated. ( see XD screen shot for the layout. )
Still not quite sure where I would place the repeat or repeat children component… and from where.
So whats best for this?
Thanks!

So how is your data coming from the database? It returns these 3 (snippet, message, author) for every record?

Yes thats correct. the query has two tables using an inner join. See screen shot.

Then just wrap your paragraphs in a repeat region :slight_smile:
Add a repeat region on the page and put them inside … again you can either use a repeat region or a repeat children region - depends on the layout you want to use.

Example with a repeat:

<div dmx-repeat:repeat1="serverconnect1.data.query">
    <p>{{snippet}}</p>
    <p>{{message}}</p>
    <p>{{autor}}</p>
</div>

Example with a repeat children:

<div class="row" id="repeat1" is="dmx-repeat" dmx-bind:repeat="serverconnect1.data.query">
    <div class="col">    
        <p>{{snippet}}</p>
        <p>{{message}}</p>
        <p>{{autor}}</p>
    </div>
</div>
1 Like

Ok got it… quite simple really eh?! :see_no_evil:
One more problem I have with this is the message data has ‘p’ tags separating the paragraphs. How can I get the ‘p’ tags to be read as HTML?

Instead of binding data on the page as <p>{{message}}</p> select your element (paragraph? div?) add new dynamic attribute and select display > inner html. This will create something like <p dmx-html="message"><p> which will render your html tags on the page.

1 Like

Brilliant. That’s the ticket!! Many thanks Teodor! :+1: