Questions on grid-theme style

[ivanradisson]

Hi,

I have a mockup in mind and would like to know what is the best way of implementing it.

Mockup:

In the example above, there’s 3 questions side by side:

• Text
• Date year
• Date year

At the moment my style setting is “pages”.
I’ve read about appearance table-list in the XLS Form Reference table and I understand it exists with another purpose in mind, but I was wondering if there’s a workaround…. I mean is there any way to present my fields side by side? I’’ve tried a group with appearance table-list and it doesn’t work….

Assuming there isn’t a workaround, this brings me to my other question…
Is grid-theme the only way to achieve it? I’ve read about theme-grid here and here and I understand it’s applied to the whole form, and I have a couple of questions:

• How do we introduce page breaks? (a change to the next screen)
• With so many groups, how do you control what pages appears indexed in the Navigation menu? ***
• Is there a limit for the number of columns (w1, w2, etc.) — is it w10 or is it infinite?
• How do you occupy an entire row (full width) - is it w10?
• The documentation talks about print-friendliness — is there a way to have page breaks in specific areas, for when the document is printed?

***

Thanks in advance! Appreciate your inputs.

[pruzige]

i remember dealing with a form which had an appearance as that though it works only on enketo web not in collect app

just try matrix appearance :: read here Grid Theme

[ivanradisson]

Hi @pruzige

grid-theme, that’s exactly what I’m thinking.

When I read that blog page earlier on, i saw support for mobile devices and assumed Collect (Kobo / ODK) would be ok with it, but apparently from what you’re saying, it’s not, and the blog might be referring to the webform supporting a mobile-responsive layout.

the new Grid Theme is fully functional on mobile devices.

For this case, it’s not a concern. We will only being using the webform.

Btw, do you have any insights on the grid-theme related questions I posed in the original post?

[ivanradisson]

In the meantime I did further testing and I’ll provide some information here.

1. How do we introduce page breaks? (a change to the next screen)

I was hopeful but after some testing, including with nesting groups and using appearance field-list, I now think that the answer is… there are no page breaks

If true, this is very unfortunate. Grid-theme is very interesting and would be an excellent addition to my project! But without page breaks it means the form is very long (vertically) and I’m afraid that won’t be a good experience, in this case.

Check the remaining discoveries below.

___

2. With so many groups, how do you control what pages appears indexed in the Navigation menu?

There appears to be no navigation menu when using grid-theme.

screenshot 1:

screenshot 2:

___

3. Is there a limit for the number of columns (w1, w2, etc.) — is it w10 or is it infinite?

I see w10 referred in many examples. Tbf, more than that probably doesn’t make sense. And the tutorial form provides some insight:

1. A QUESTION W-VALUE IS RELATIVE TO THE W-VALUE OF ITS GROUP. A GROUP OF W4 CAN CONTAIN A MAXIMUM OF 4 QUESTIONS OF W1 ON ONE ROW.
2. THE DEFAULT WIDTH OF A GROUP OR REPEAT IS 4 COLUMNS (W4).
3. A ROW WILL AUTOMATICALLY ALWAYS BE STRETCHED TO THE FULL WIDTH OF THE PAGE.

___

4. How do you occupy an entire row (full width) - is it w10?

Leaving it empty works fine (apparently it always matches automatically to what the group is set to). Obviously manually matching the group setting also works.

Here’s an example with empty appearance where the group and its questions default to w4:

Here’s a slightly different example where the group is set to w10, and the question is empty but matches w10 and assumes full width:

___

5. The documentation talks about print-friendliness — is there a way to have page breaks in specific areas, for when the document is printed?

There’s no control over page breaks. Since my attempts at page/screen breaking using field-list were already ignored, it’s the same in this case.

But the output is quite nice:

If you have any ideas on this matter, feel free to reply here!

[ivanradisson]

@ivanradisson

In the meantime I did further testing and I’ll provide some information here.

1. How do we introduce page breaks? (a change to the next screen)

I was hopeful but after some testing, including with nesting groups and using appearance field-list, I now think that the answer is… there are no page breaks

I have some news

I found that we can indeed have page breaks when using theme-grid .

Form style needs to be set as “pages theme-grid”.

Then, by default stand alone questions will be on their own page. Same for groups.

But we can nest groups in order to have multiple groups on each page, like this:

The result is great:

Btw, as you might have noticed on the above screenshot, once we break pages, the Navigation menu shows up:

[pruzige]

This is so nice. Thank you very much. I have bookmarked this for future use