Simple Tabs for Forms

[cliftonc]

Enable tabs (perhaps not using the quite heavy jQuery UI Tabs?) or an accordion to ensure that complex forms can be layed out in a cleaner way if the entire form is displayed on a single page.

Thinking of the admin page at first glance, but later the content edit form as well.

[shuhblam]

define what you mean by "displayed on a single page"

would you like the .admin-page to be a certain height?

[shuhblam]

would you be opposed to third party tabs/accordion effects or do you think we should roll our own?

[cliftonc]

By single page I mean a page where the entire form is rendered in one go, using tabs to show/hide sections of it. The alternative is a multi-step form where you go back / forward between pages (e.g. a complex wizard).

The form library at the moment can render the html elements required to make tabs (there is a tabs:true parameter on a form object), but the theme needs to the take that div and ul and add the css/javascript that makes them tabs.

Given that the theme will be responsible, what I'm looking for is either a very light approach (e.g. roll our own) if added to cleanslate (speak to Dennis as he maintains that one), really something that can be used as an example of how to do it in a theme.

[shuhblam]

i am going to write my own using jquery in the cleanslate admin page. stay tuned for updates.

[shuhblam]

would the use of jquery be acceptable/lightweight enough for these tabs, or would you like to see it even more lightweight?

[shuhblam]

every time you make a change to xxxxx.module.js you must restart the server to see the changes, is their an easier or more immediate way to see those changes?

[cliftonc]

Not at the moment, the reason is that NodeJS loads modules via a Require,
and basically if you require something it is loaded into an internal in
memory cache, so if you require it again it doesn't actually reload it just
gives you the cached version. It watches and reloads the templates but
thats all at the moment (as that is easy).

The only option is to add something like node-supervisor aroudn the app that
monitors all the javascript and restarts the app - I think its somewhere on
the issue list? If not you should add it.

Clifton

On 26 May 2011 15:05, coleGillespie <
reply@reply.github.com>wrote:

every time you make a change to xxxxx.module.js you must restart the server
to see the changes, is their an easier or more immediate way to see those
changes?

Reply to this email directly or view it on GitHub:
#20 (comment)

[shuhblam]

either way, i am currently constructing the json to build a proper form in the admin module, i guess i will build it all up and test it when i am done instead of testing as i go along. as with all new systems come small growing pains =)

[cliftonc]

Excellent - look forward to seeing it - yes, there are still a few growing
pains, it is very early days after all (first commit was only in early
April!).

On 26 May 2011 15:13, coleGillespie <
reply@reply.github.com>wrote:

either way, i am currently constructing the json to build a proper form in
the admin module, i guess i will build it all up and test it when i am done
instead of testing as i go along. as with all new systems come small growing
pains =)

Reply to this email directly or view it on GitHub:
#20 (comment)

[shuhblam]

the admin form is a bit different from the content form, the admin form includes dynamic inputs that are rendered when the page is loaded. for example: languages and themes. Would we compensate that logic inside of json, loop over each language or theme? or would we pre build the language/themes object inside of showLanguages/init methods and then insert it inside of the json via a global var we create for the language/theme object? Or would we render it at loadtime inside of the admin.html just like we are doing now and not even worry about it in the json, this option actually would not work since we will not be building our form in the html. Suggestions?

[shuhblam]

modules would be another example...

[cliftonc]

Selects just require an array, and languages and themes are already stored
on the main calipso object or on the request object:

request.languages = Array of languages (this should probably be refactored
out and become a property of the calipso object).

The others are already all available via the data object (see lines 65 - 78)
in the admin.module init.

So you can get the themes via:

calipso.data.themes = Array of themes

You can iterate through the modules and add a new item to the form (the form
is just a json object, so you can create it first without the modules, then
iterate through the modules and add them as fields to the object, then
render it).

If you want to put what you have in a gist I can feedback?

Clifton

On 26 May 2011 15:57, coleGillespie <
reply@reply.github.com>wrote:

modules would be another example...

Reply to this email directly or view it on GitHub:
#20 (comment)

[shuhblam]

still working on a prototype

[shuhblam]

so in theory i should be able to say something like

{
   id:'form-section-theme',
   label:'Theme',
   fields:[
      {
         label:'Theme',
         name:'admin[theme]',
         type:'select',
         options:function()         {
            return calipso.data.themes
         },
         instruct:'Select the theme, this impacts the website theme.'
      }
   ]
}

[cliftonc]

Apologies, the calipso.data.themes object is an object array, it doesn't
need to be.

So, I would refactor lines 67 to:

calipso.data.themes = [];
calipso.lib.fs.readdir(app.path + '/themes', function(err, folders) {
  folders.forEach(function(name) {
    calipso.data.themes.push(name);
 }
});

And then

{
id:'form-section-theme',
label:'Theme',
fields:[
{
label:'Theme',
name:'admin[theme]',
type:'select',
options:calipso.data.themes,
instruct:'Select the theme, this impacts the websites theme.'
}
]
}

On 26 May 2011 16:31, coleGillespie <
reply@reply.github.com>wrote:

> so in theory i should be able to say something like
>
> ```json
> {
>   id:'form-section-theme',
>   label:'Theme',
>   fields:[
>      {
>         label:'Theme',
>         name:'admin[theme]',
>         type:'select',
>         options:function()         {
>            return calipso.data.themes
>         },
>         instruct:'Select the theme, this impacts the websites theme.'
>      }
>   ]
> }
> ```
>
> --
> Reply to this email directly or view it on GitHub:
> https://github.com/cliftonc/calipso/issues/20#comment_1243090
>

[shuhblam]

roger that

[shuhblam]

is there a public list of the accepted field types? i am guessing is it the same as w3c? are you using a node module to parse this json and build out the form? (sorry for all the questions, just trying to make sure i am clear on everything)

[cliftonc]

The form library is part of core, http://calip.so/dox/library/calipsoForm, and renders the json object. Easiest to take a look through that and you will see how it works and what it accepts. When I started I couldn't find a form rendering library that worked the way that I wanted, so rolled my own simple one.

[shuhblam]

changing calipso.data.themes.push(name); causes a validation error when trying to save

[shuhblam]

disregard that last comment fixed it

[cliftonc]

No problem!

[shuhblam]

do you have a good method of debugging? i would really like to be able to drill down into some of these objects i am creating

[shuhblam]

nevermind, console.log was not working before, now it is working great =)

[cliftonc]

console.dir, or sys.inspect - the latter lets you decide how many levels deep you want to go into objects. Also, using node-inspector with chrome is very useful.

[shuhblam]

by 'node-inspector' you are just talking about 'Elements' inside of the developer tools correct?

[cliftonc]

I meant this: http://howtonode.org/debugging-with-node-inspector

On 28 May 2011 21:38, coleGillespie <
reply@reply.github.com>wrote:

by 'node-inspector' you are just talking about 'Elements' inside of the
developer tools correct?

Reply to this email directly or view it on GitHub:
#20 (comment)

[shuhblam]

AWESOME! i almost have the whole admin form rendering from json, i just have to finish the modules section and then re write your tabs logic a little bit inside of the calipso form lib to render the right stuff for my tabs javascript and then i will be able to commit it to my fork for you to inspect

[shuhblam]

at this point should we close this issue?

[cliftonc]

Yes - thanks for the good work!