Home>Support>Creating dynamic form fields with repeaters

Creating dynamic form fields with repeaters

I’m trying to create a widget.

Think of the end result as tabular data.
First you have a repeater called “titles” with a text field. As a user you add “title 1” and “title 2”.

Under this repeater, i have another repeater. Each of this repeater fields should now contain two text fields labeled “title 1” and “title 2”.

I’m digging into the state emitters but they are more for hiding/showing fields, I want to modify the form field structure.

The end result should be something like like this

'table_headers' => array(
    'type' => 'repeater',
    'label' => 'Table titles',
    'fields' => array(
        'column' => array(
            'type' => 'text',
            'label' => 'title'
        )
    )
),

'table_rows' => array(
    'type' => 'repeater',
    'label' => 'Table rows',
    'fields' => array(
        //A list of text fields, generated and labeled from ['table_headers']['column'] repeater above
    )
)

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 1 year, 2 months ago Alex S Hi, I Work Here

    Hi Linuzitac,

    Can you please elaborate on what these dynamic form fields would do? I ask as what you do with them (and how they’re used) changes how this is done, or even if it’s currently possible. I’m mainly asking in regards to how they would be used in the editor vs the frontend.

    Kind regards,
    Alex

  2. 1 year, 2 months ago Linuzitac

    In this case i want to be able to create a regular

    <table>

    .
    The first repeater sets an amount of fields, for example;
    “Model”, “Weight”, “Height”, “Width”, “Color” [….]. Let’s say there’s 10 titles.
    In my second repeater i want to populate rows. Right now i’m using a repeater within the repeater to create my rows and cell values. Since I in my second repeater in this case don’t know what field i’m currently setting a value for, i must scroll up to my first repeater and count indexes, since my second repeater is not named/indexed by the first repeater. There’s a quite big risk i create too many or too few cells for some rows etc. I think you get the point :)

    I guess there could be some issues altering headers for an existing table with data (adding “Price” between height and weight for example) but this is actually not a problem in this case.

    (I guess i can create a post type where i pre-define titles and at the top of the widget form get all created posts and select which ones that should be visible in the list below – or any similar solution with the titles stored elsewhere – but it would be nice to keep it within the widget :) )

  3. 1 year, 2 months ago Alex S Hi, I Work Here

    Hi Linuzitac,

    Unfortunately, this isn’t possible out of the box so you’ll need to extend the interface using JavaScript to achieve this on the fly and (potentially) PHP thereafter (when opening an edited widget). This is quite a large task so we’re not really able to outline how you would do this as it’s beyond our scope of support. I will say that if you hit a wall let me know and I’ll try and provide a solution.

    You can find the repeaters code in admin.js and siteorigin-widget.class.php.

    Kind regards,
    Alex

  4. 1 year, 2 months ago Linuzitac

    Thanks for good support and answers, Alex.
    Just of curiosity; if you were to design a widget where the target is to create a table with an unknown amount of titled columns and rows, how would you approach it?
    The same way I’m thinking or does any other solution come to mind?

  5. 1 year, 2 months ago Alex S Hi, I Work Here

    Hi Linuzitac,

    I would do this in a similar way to the SiteOrigin Price Table widget.
    The form structure would be:

    The table is a repeater field. Each item is treated as a row.
    Each row contains a columns repeater field.
    The first row is treated as the tables column row.

    Kind regards,
    Alex

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More