How is this done?

…./o4w/jquerym/1.4.5/demos/listview-collapsible-item-flat/index.html

How is this done?

…./o4w/jquerym/1.4.5/demos/listview-collapsible-item-flat/index.html

Hi, Barry. Are you trying to do this with the WYSIWYG form designer? Or programmatically, via an O4W stored procedure?

Using the form designer, there are a number of steps:

1. From the "tool panel", drag your "Unordered List" to your form. You don't NEED to set any additional properties here, though you might decide you like the "filter" and "auto break" mobile properties;

2. From the "tool panel", drag a "List Item" and drop it into the unordered list. For its properties, you have to add "data-role" (without quotes) to the "Additional Data Style Names" and "collapsible" (without quotes) to the "Additional Data Style Values" on the Advanced tab;

3. (I'm going to omit "From the tool panel" going forwards - it's assumed unless I say otherwise) Drag a "Text" control from the Form Elements section and drop it in the List Item. Type "Birds" (without the quotes) as the text. On the Advanced tab, set the "Raw html before" to "<h2>" (without quotes), and the "Raw html after" to "</h2>" (without quotes);

4. Drag another "unordered list", and drop it in the list item (note that it might be easier to double-click on the list item to "zoom" into it - it will give you more room to move around);

5. Drag a list item into the new unordered list;

6. Drag a text item into the new list item, and set its Text property to Condor;

7. Repeat steps 5 & 6 twice more, setting the Text properties to Eagle and Sparrow respectively;

8. "Unzoom" back to the main page (you can do this by clicking on "Zoomed to element <x>" text at the bottom of the display;

9. Drag a list item into the first unordered list;

10. Drag a Text element into the new list item, and set its text to be Humans

You would repeat steps 2-8 for the additional collapsible section (with the title "Fish").

tl;dr it's done with several nested controls, and some special attributes

Hope that helps,

- Bryan Shumsky

Revelation Software, Inc.

How is this done?

…./o4w/jquerym/1.4.5/demos/listview-collapsible-item-flat/index.html

Hi, Barry. Are you trying to do this with the WYSIWYG form designer? Or programmatically, via an O4W stored procedure?

Using the form designer, there are a number of steps:

1. From the "tool panel", drag your "Unordered List" to your form. You don't NEED to set any additional properties here, though you might decide you like the "filter" and "auto break" mobile properties;

2. From the "tool panel", drag a "List Item" and drop it into the unordered list. For its properties, you have to add "data-role" (without quotes) to the "Additional Data Style Names" and "collapsible" (without quotes) to the "Additional Data Style Values" on the Advanced tab;

3. (I'm going to omit "From the tool panel" going forwards - it's assumed unless I say otherwise) Drag a "Text" control from the Form Elements section and drop it in the List Item. Type "Birds" (without the quotes) as the text. On the Advanced tab, set the "Raw html before" to "<h2>" (without quotes), and the "Raw html after" to "</h2>" (without quotes);

4. Drag another "unordered list", and drop it in the list item (note that it might be easier to double-click on the list item to "zoom" into it - it will give you more room to move around);

5. Drag a list item into the new unordered list;

6. Drag a text item into the new list item, and set its Text property to Condor;

7. Repeat steps 5 & 6 twice more, setting the Text properties to Eagle and Sparrow respectively;

8. "Unzoom" back to the main page (you can do this by clicking on "Zoomed to element <x>" text at the bottom of the display;

9. Drag a list item into the first unordered list;

10. Drag a Text element into the new list item, and set its text to be Humans

You would repeat steps 2-8 for the additional collapsible section (with the title "Fish").

tl;dr it's done with several nested controls, and some special attributes

Hope that helps,

- Bryan Shumsky

Revelation Software, Inc.

That is great, thank you.

What knowledge would I have needed to work all that out - where should I have looked?

Hi, Barry.

First, I started by looking at the example page that you referenced. I brought the example up in the browser, and there's a button to "show source". Looking at the html, I could see what elements were used (unordered lists (ul), list items (li), headers (h2), etc.), as well as any special attributes ("collapsible") and where they needed to be set.

Then I used the comparable elements of the WYSIWYG designer to start playing with the form elements. After setting some up, you can have it do a "test draw" for the mobile form and look at the html source _there_. That tells you what O4W plans to generate. It's then a matter of 'tweaking' the elements on the WYSIWYG form with the special attributes so that they match up with what the jQuery Mobile example displays.

It takes some practice and experience. You'll probably want to use the WYSIWYG designer a bit to get comfortable with it…

Hope that helps,

- Bryan Shumsky

Revelation Software, Inc.

View this thread on the Works forum...