Stages Demos:

[ Note: Stages comes without styles, you have to bring your own! ]

Collections

Collections in Stages are first class citizens. They are a very powerful construct and highly configuratable.

Simple, non required, non initialized collection:

User can add as many entries or as little as he wishes. No minimum or maximum requirements. And no entry is initialized.

Initialized collection:

This will render the first empty entry and filling out data is optional.

Initialized and required collection:

This will render the first empty entry and throw a collection error if you don't add any entries.

A minimum of 2 and maximum of 4 initialized entries:

This will initialize two entries which are empty. You can't remove for less than two. They are not required, so can be left empty.

A minimum of 2 and maximum of 4 initialized entries, all required:

This will initialize two entries which are required. If you don't fill out the required collection fields, it will show an error on all required fields.

Initial data:

This one has initial data defined, so it will render those initial data, even without init being true.

path: collection6[0].field1 | type: text
path: collection6[0].field2 | type: text
path: collection6[1].field1 | type: text
path: collection6[1].field2 | type: text

Computed data on individual items:

You can compute field values based on data of the same item. Try it out by adding numbers and additional collection items!

Force entries to be uniq:

Sometimes you only want uniq entries in a collection. With the isUniq property you can force Stages to validate that. Add two entries with the same values and submit to see the error:

Dynamic fields per item:

Deciding which fields to display based on the index of the collection item (Field 2 is only shown every second entry).

path: collection10[0].field1 | type: text
path: collection10[1].field1 | type: text
path: collection10[1].field2 | type: text
path: collection10[2].field1 | type: text
path: collection10[3].field1 | type: text
path: collection10[3].field2 | type: text

Union Type Collections

These ones can have multiple different field configs, here "food" and "drink". When you add an entry, you have to choose the type which you want to add.


Move items:

Move items to the top or bottom of the collection (simple version with buttons).

path: collection11[0].field1 | type: text
path: collection11[0].field2 | type: text

path: collection11[1].field1 | type: text
path: collection11[1].field2 | type: text

path: collection11[2].field1 | type: text
path: collection11[2].field2 | type: text

path: collection11[3].field1 | type: text
path: collection11[3].field2 | type: text

path: collection11[4].field1 | type: text
path: collection11[4].field2 | type: text

path: collection11[5].field1 | type: text
path: collection11[5].field2 | type: text

path: collection11[6].field1 | type: text
path: collection11[6].field2 | type: text



- - -
(c) 2023 by Fredi Bach : Unic : Github