gitana / alpaca Goto Github PK

The following code displays a date field, and validates the field against the date format properly, but does not display the date dropdown icon.

I expect this is because I have not loaded some javascript, but I can find no mention on the date documentation page of any specific javascript library that must be preloaded...

{
"schema": {
"title": "FormTest form",
"type": "object",
"properties": {
"id": {
"type": "string",
"format": "string",
"required": true
},
"test_date": {
"type": "text",
"format": "date",
"required": true
},
"Address_id": {
"type": "text",
"format": "string",
"required": true,
"enum": [
11,
14,
52
],
"default": "14"
}
}
},
"options": {
"renderForm": true,
"form": {
"method": "post"
},
"buttons": {
"submit": [

        ]
    },
    "fields": {
        "id": {
            "hidden": true,
            "label": "Id"
        },
        "test_date": {
            "label": "Test Date"
        },
        "Address_id": {
            "type": "select",
            "optionLabels": [
                "Eleven",
                "Fourteen",
                "Fifty Two"
            ],
            "multiple": false,
            "label": "Address"
        }
    }
},
"data": {
    "id": 0
}

}

It should be possible to have radio buttons that support any kind of value - not just strings.

Here is a case with booleans that fails:

schema -
"smtpEnabled": {
"type": "boolean",
"helper": "Please select whether or not you would like your email to have SMTP enabled.",
"enum": [true, false],
"default": true,
"required": true
},

options -
"smtpEnabled": {
"label": "Email SMTP Enabled",
"type": "radio",
"optionLabels": ["True", "False"]
}

When we draw back the value of the control, we get a JSON object that has { "smtpEnabled": "true" }. It should be { "smtpEnabled": true }.

Works :

ant clean package full

Fails :

ant clean full

Message :

BUILD FAILED
/home/jocelyn/dev/alpaca/build.xml:787: The following error occurred while executing this line:
/home/jocelyn/dev/alpaca/demos/browser/quickstart/build.xml:16: /home/jocelyn/dev/alpaca/build/package/components/alpaca does not exist.

Fails both in master and 1.0.5-RELEASE

The widget for multiple selection is the basic HTML one (example )… Which is IMHO the widget in HTML history that no one understands nor wants to use.

Hi,
i try to implement the submit-Button with jquerymobile.

In your Tutorial Number 5 under http://www.alpacajs.org/tutorials.html you discribe:

"postRender": function(renderedForm) {
  $('#form4-button').click(function() {
    if (renderedForm.isValid(true)) {
      var val = renderedForm.getValue();
      $.ajax({
        type: "POST",
        url: "examples/endpoints/save2.php",
        data: {json:JSON.stringify(val)},
        success: function(msg) {
          alert("Request received: " + msg);
        }
      });
    }
  });

I get the folllowing Error:

TypeError: renderedForm is undefined
[Break On This Error]
if (renderedForm.isValid(true)) {

If i change the view to "view" : "VIEW_WEB_EDIT_LIST" its work.

Can you advise me how to validate the form on mobile_views?

Thx

Alpaca is currently giving hard time to he developer debugging its forms : it ignores silently a JSON-data which is not mentioned in the JSON-schema.

IMHO it should display a warning (in browser console ?), although this behaviour may need to be disabled by a setting.

.prop must be used instead of .attr to read checked status.

Hi,
I' trying to find out how to dynamical create and destroy alpaca fields.
First I found that
$("#form").alpaca(....)
always returns undefined instead of the query function so that .val() would return the object.
But there is a WO by calling Alpaca("#form");
Second and more important is how would I destroy such "an Object". Just using jquery to find the right place in the DOM and call remove
$("#form").children([0]).remove()
is "visually" enough but what is leaved in memory?
Thanks
Ognian

Please remove, did mistake creating pull request, see #15

Hi,
As I said before. Thanks for this amazing library. This by far the most mature form-from-JSON library I have ever seen. As I use the library, I see that you have done almost everything on my "wish list" and you have also done lots of work to circumvent all of the design flaws that I hadn't even thought of, that I would have hit if I started to code against my own wish list.

It is not clear to me, however, to what degree you are planning on supporting html5 form elements... I am still not sure what javascript to use to get your "date picker" to work, but in any case it is javascript on a text element rather than the html5 date element.

I have the happy privilege to be able to insist that my users use html5 'more-compliant' browsers and I would much prefer html5 elements...

Thanks,
-FT

Having
schema: {
"type": "object", ...
"properties": { ...
"ausfuerung": {
"type": "array",
"items": {
...
}.....
I would like do define the view as:
view: {
"parent": "VIEW_WEB_EDIT",
"ausfuerung": {
"parent": "VIEW_WEB_EDIT_INLINE"
}
},
but this doesn't work.
Any Idea how this could work?

due to removal of
$.browser.msie
in jquery 1.9 alpaca don't load....
see: http://api.jquery.com/jQuery.browser/

Hi everybody,
in my usecase i want to make a slider/range in jquerymobile like this:

label for="slider-1">Input slider:<label
input type="range" name="slider-1" id="slider-1" value="60" min="0" max="100"

How can make it with alpaca.js forms?

thx

Alpaca's validation logic must be improved to accommodate the following scenarios:

1. The user renders the form and wants to see UI feedback of the validation state right away. This is more or less what is currently available.
2. The user renders the form and wants to hide UI feedback of the validation state. In addition, the enable/disable state of any buttons should be informed.
3. The UI validation state for a given field is reflected right away upon keyUp.
4. The UI validation state for the entire form should be reflected upon clicking any buttons (i.e. lazy UI validation state inform).

I'm working on some of these improvements and would like to get this into head right away.

Any feedback on this appreciated!

Take a look at the behavior in this fiddle: http://jsfiddle.net/G6hg2/

The conditional field outside the array works as expected.

The conditional field inside the array does not work as expected.

Additionally I was having issues with field names containing spaces. Should I be using the name or id property to create an identifier that does not contain spaces, when the field label does?

I'd like to propose that we support handlebars as a templating engine (and potentially the default templating engine) for Alpaca. We use Handlebars in the Ratchet project and it seems to have very nice client and server compatibility.

What do you guys think? At the very least, I think we can include it pre-packaged. And leave open the option for folks to switch it in and out.

I have a schema, which is roughly like that.
I have an object and one property inside it is an array type of objects(lets name it as form_fields ).
So when i try to provide a data to render this form, like that

"form_fields" : [{ }] it doesnt put the data into elements.
I would be very glad if you help me. I wish you good luck and have a great day.

In the forums, dmayo is reporting a JS error with IE6 and IE7 on some of the examples from the home page. Further testing is needed around early versions of IE using jQuery UI views.

For reference:
http://www.cloudcms.org/forums/discussion/30/browser-support#Item_3

Where dependencies & build process would be described.

Would like to submit form using $.ajax from jQuery. It there way to do it?

Currently if I have a schema like

…
name: {title: "name", required: true}
date : {
    type: "object",
    required: false, 
    properties: {
        dayOfMonth: {'enum': DAYS_OF_MONTH, required: true},
        month: {"enum": MONTHS, required: true}
    }
},
…

And form bound to data corresponding to

{name : 'test-name'}

renderedForm.isValid(true) will fail because of the required: true of the two child properties. Which is unlogical because it does not leave any way to mark date as optional

I would expect the form to validate if the whole optional object is empty.

BTW: IMHO same issue applies with dependencies : a field, hidden because its requirement is not matched is marked as invalid because of its emptyness if required: true but this second point is more arguable.

One of the reason that php rose to be so popular (despite "better" languages being available) was that each page of documentation could be commented on by anyone.

This rapidly allowed the core developers to see what problems users were having on each documentation page and allowing users to share solutions...

This would really help me, since I am still getting up to speed on frontend javascript, jquery, etc etc...

-ft

I have a alpaca json form with a string. I preload the data with a string that starts with a slash (eg. /bla).
The browser will present an error dialog 'Unable to load data from uri : /bla'.
This happens in Safari and Firefox.
It seems not to be dependent on the field type - I tried it on the alpaca documentation page with many different form elements (edit code, change a data field to "/bla", click run code).
Of course the same thing is happening if the string starts with http://. I assume other uris are also interpreted.

btw: you get very interesting effects, if you add an existing json file into the data field, eg. http://www.alpacajs.org/examples/forms/customer-profile/options.json. The form will look 'slightly' different.

I assume this behavior is a bug and a security bug if the user can enter data that get presented again the next time the form is getting called. At least I should be able to decide if the string should be interpreted or not.

in ArrayField.js, the option is referred as options.toolbarSticky whereas in documentation ( examples/components/fields/array-field.html ), it's options.items.toolbarSticky

IMHO, the current default validation is wrong, it displays an error on every single required field on an empty form. So much red is quite frightening for the end-user ;-).

Checked in an experimental table view based on some feedback from @ JocelynDelalande.

See the examples for a demo of how it works.

Further work is needed on Field.js to allow separation of label from control itself. The assumption that they should be bound under the same dom element is faulty and causes headaches when trying to render into tables, other inline containers or just separated divs.

Add support for an options flag (i.e. "allowEmpty") that indicates that the field should allow "" as a valid value. If "" comes back from the form, and allowEmpty is true, then we permit the validation to pass.

@see http://www.cloudcms.org/forums/discussion/38/script-crashing-in-ie-9#Item_12

In the following example, "parentfile" renders correctly while "childfile" does not. Did I mess something up, or find a bug?

<!doctype html>
<html>
<head>
  <title>File Field Test Case</title>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
  <script type="text/javascript" src="http://www.alpacajs.org/js/alpaca.js"></script>
  <link type="text/css" href="http://www.alpacajs.org/css/alpaca.min.css" rel="stylesheet"/>
</head>
<body>
  <div id="form1">
    <script type="text/javascript">
      $(function() {
        $("#form1").alpaca({
          "schema": {
            "title": "File Field Test Case",
            "type": "object",
            "properties": {
              "parentfile": {
                "type": "string",
                "format": "uri"
              },
              "filelist": {
                "type": "array",
                "items": {
                  "type": "object",
                  "properties": {
                    "description": {
                      "type": "string"
                    },
                    "childfile": {
                      "type": "string",
                      "format": "uri"
                    }
                  }
                }
              }
            }
          },
          "options": {
            "fields": {
              "parentfile": {
                "type": "file"
              },
              "filelist": {
                "item": {
                  "fields": {
                    "childfile": {
                      "type": "file"
                    }
                  }
                }
              }
            }
          }
        });
      });
    </script>
  </div>
</body>
</html>

Suggested attributes are:

• multiple: boolean, default: false, Multiple selections are allowed if true.
• enumMinSelection: int, default: 0, The minimum amount of values that must be selected for the field to pass validation.
• enumMaxSelection: int, default: no limit, The maximum amount of values that can be selected for the field to pass validation.

help!
altough setting:
options: {
"items": {
"showMoveDownItemButton": false,
"showMoveUpItemButton": false
},
"fields": ....
buttons still display since at the place where showMoveDownItemButton is queried they have disappeared from options...

Hi
I m using Alcapa2 for checking the power of the framework…
I saw that in a form there is this problem:

when I change a invalid text in a valid text and sudden I click on the submit button I must click 2 times for sending the form to the server (not just once )!!

It is possible to correct this problem ?

After calling setValue() on an ObjectField, the Fields in the Object are displayed properly, but NOT validated properly (e.g. required error still displayed) calling handleValidation returns true BUT errors are still displayed. Giving Focus to the element and removing it, leads to the desired result...

As per:
http://www.cloudcms.org/forums/discussion/33/small-problem-with-radio-buttons

@see http://www.cloudcms.org/forums/discussion/51/file-field-as-property-of-an-array-of-objects-renders-a-text-field

Also, check rendering within a map or any kind of container. Check for incompatible view markup that is common across all.

I have an instance of alpaca in which some of my data elements are URI based. Apparently alpaca is attempting to load these URI's and throwing errors when they fail to load. The data fields are supposed to be URI format, but not necessarily live links. The wizard next button will not work as a consequence of these failures and it is impossible to fix the issues via the Alpaca generated wizard because the fields do not appear on the first step of the wizard.

I'd like to see the UI rendering for Alpaca switch to Twitter Bootstrap compatible rendering out of the box. It's nearly there and with some slight tweaks to the classes, we'd make things a little easier for fellow bootstrappers!

Thanks again for this wonderful library...

hidden is a form field type, and is a good way to enable forms to transfer information that users should not see at all.

Would it be possible to create a type='hidden' in the form schema?

Alternatively, would it be possible to set the value of a text field that is not displayed using the current hidden flag? As it stands the system ignores you if you set the data for a field that has hidden=true

Hi,

The file browse button doesn't seem to appear for a File Field when it's placed in an array.

Below is a quick test that I have modified for one of the Array Field Component Examples.

Can you please help investigate?

Thanks
livern

$(function() {
$("#field5").alpaca({
"schema": {
"description": "My Favorite Ice Creams",
"type": "array",
"items": {
"title": "Ice Cream",
"type": "object",
"properties": {
"flavor": {
"title": "Flavor",
"description": "Ice cream flavor",
"type": "string"
},
"topping": {
"title": "Topping",
"description": "Ice cream topping",
"type": "string"
},
"image": {
"title": "Image",
"description": "Ice cream topping image",
"type": "string",
"format": "uri"
}
}
}
}
});
});

It is an awesome feature that you can import options, schema, etc from json files...

However, it means that in order to study the markup that created your complex forms, I have to manually load the json files to see what they contain.

This field seems perfectly valid to me (but maybe I'm missing something)

$(function() {
   $("#field1").alpaca({
      "data": ["Coffee"],
      "options": {
         "label": "Ice cream",
         "helper": "Guess my favorite ice cream?",
          multiple: true,
          readonly: true
      },
      "schema": {
         "enum": ["Vanilla", "Chocolate", "Coffee", "Strawberry", "Mint"],
          required: true
      }
   });
});

… but it does not validate if read-only : 

The field (id=alpaca8, title=Dropdown Select, label=Ice cream) is invalid and also read-only 

In the example:

examples/components/dependency/dependency-field.html

The dependant field does not disappear when the checkbox is unchecked. This is because getDependencyStatus() calls Alpaca.isValEmpty() to determine if the dependency criteria are met. Alpaca.isValEmpty(false) returns false (Firefox 17, Ubuntu 12). It seems possible that this is a feature, rather than a bug, in which case only the example needs to be updated, to include this options section:

    "options" : {
         "fields" : {
              "icecream" : {
                   "dependencies" : {
                        "fan" : true
                   }
               }
          }
    },

Hello again,
are there any efforts planned regarding delivering valid js code?

I just added alpaca to my bootstrap makefile, trying to get an automated build skeleton, but it just won't pass the JSHint step.

Should jQuery autocomplete functionality to be built in or whether it is better to use it separately? It would seem more natural if all related info were in the same schema?

http://jqueryui.com/autocomplete/

since the user has no way to change them...

The create-form.html page does not validate the required name field.

Would it not be better to do a key up for validation rather than on Focus? I have seen many other validation plugins that use this method. Right now fields do not validate until the focus is changed. So, someone might get confused and not click the submit button or move to the next field because the current field is still in red and they don't know that they need to change the focus by clicking on something or moving to the next field.

I was looking into using alpace with bootstrap and would have liked to take a peek at the demos, which can't be found

Is there any way to build a button element and attach an onClick event ?

Hi,

I have a nested array in my form, and when a nested array item is created (clipMedia in the following schema/options exampie), it doesn't seem to pick up the correct parent index for its name, which results the clipMedia object to be saved in an incorrect parent object. If I have 5 objects in array_clips, when I add a new clipMedia object to array_clips[0], i will see this new clipMedia name being set to array_clips_4_array_clipMedias_0_.

Did I misconfigure my schema/options? Please advice.

Thanks
livern

schema:
{
"type": "object",
"readonly": ${readonly!"false"},
"properties": {
"propertyId": {
"type": "string"<#if propertyId??>,
"default": "${propertyId}"</#if>
},
"title": {
"type": "string"<#if channelName??>,
"required": true,
"default": "${channelName}"</#if>
},
"subTitle": {
"type": "string"<#if subtitle??>,
"default": "${subtitle}"</#if>
},
"array_clips": {
"type": "array",
"items": {
"type": "object",
"properties": {
"guid": {
"type": "string"<#if guid??>,
"default": "${guid}"</#if>
},
"title": {
"type": "string"<#if title??>,
"default": "${title}"</#if>
},
"array_clipMedias": {
"type": "array",
"items": {
"type": "object",
"properties": {
"mediaUrl": {
"type": "string",
"format": "uri"
},
"duration": {
"type": "string"<#if duration??>,
"default": "${duration}"</#if>
},
"fileSize": {
"type": "number"<#if fileSize??>,
"default": "${fileSize}"</#if>
}
}
}

                }

            }
        }
    }
}

}

options:
{
"renderForm":true,
"fields":{
"propertyId": {
"label": "Property Id",
"readonly": true,
"hidden": true
},
"title": {
"label": "Channel Title"
},
"subTitle": {
"label": "Description"
},
"array_videoClips": {
"label": "Clip Details",
"toolbarSticky": true,
"collapsed": true,
"fields": {
"item": {
"fields": {
"guid": {
"label": "Clip ID"
},
"title": {
"label": "Clip Title"
},
"array_videoClipMedias": {
"label": "Clip Medias",
"toolbarSticky": true,
"collapsed": true,
"fields": {
"item": {
"fields": {
"mediaUrl": {
"label": "Media URL",
"helper": "Sample URL: "
},
"duration": {
"label": "Duration",
"helper": "secs or mm:ss"
},
"fileSize": {
"label": "File Size",
}
}
}
}
}
}
}
}
}
},
"form":{
"attributes":{
"action":"save",
"method":"post",
"enctype":"multipart/form-data"
},
"buttons":{
"submit":{}
}
}
}

I'm trying to create a form with an array of objects. The form functions in my browser, however, when I submit the data I am unable to process the args because the submitted names are not properly enumerated.

I've created a simplified case to illustrate.

Given this schema:

{
    "type": "array",
    "items": {
        "type": "object",
        "properties": {
            "type": {
                "enum": ["internal", "external"]
            },
            "url": {
                "type": "string",
                "format": "uri"
            }
        }
    }
}

And these options:

{
    "stickyToolbar": true,
    "renderForm": true,
    "fields": {
        "item": {
            "fields": {
                "type": {
                    "label": "Type",
                    "optionLabels": ["Internal", "External"]
                },
                "url": {
                    "label": "URL"
                }
            }
        }
    },
    "form": {
        "attributes": {
            "action": "save",
            "method": "post",
            "enctype": "multipart/form-data"
        },
        "buttons": {
            "submit": {}
        }
    }
}

When I use Firebug to inspect the names of items as they are added, every item is named the same either: name=""_0_type" or name="_0_url". This is the case regardless how many items I add.

If I submit the form with 10 items, then I'll receive 10 args named "_0_url" and 10 args named "_0_type". I can save the data but I lose the order information and have know idea which type values are associated with which url since the args are submitted in arbitrary order.

I have found that if I leave the options field bits out like this:

{
    "stickyToolbar": true,
    "renderForm": true,
    "form": {
        "attributes": {
            "action": "save",
            "method": "post",
            "enctype": "multipart/form-data"
        },
        "buttons": {
            "submit": {}
        }
    }
}

then the fields are enumerated properly.

Unfortunately, I lose the formatting bits for my form. Some things I can move into the schema; however, in my real world case I am using a file field and that requires a string type in the schema and a file type in the options. So I must have a fields definition in the options to use a file type in my object items array.

I tried to debug this in alpaca.js.

My guess is the problem is related to the addItem: function(index, fieldOptions, value, insertAfterId) found near line 7108 of the non-minimized alpaca.js file. On line 7116 the parent options are being retrieved in order to be passed on to the new item:

if (fieldOptions == null && _this.options && _this.options.fields && _this.options.fields["item"]) {
    fieldOptions = _this.options.fields["item"];
}

Perhaps the index in fieldOptions.name must be assigned the index value pass to addItem?

Unfortunately, the solution might be trickier than that because later in render: function(view, callback) defined on line 3564 we find the following comment at line 3572:

// last try to see if we can populate the label from propertyId

It appears the subfield names are already defined and hence copied because on line 3577 a check is performed: if (!this.options.name). If the subfield name was not being used then going in here would create a new id; unfortunately this is not the case.

Anyway, I'm a big fan of Alpaca and think it's great, but I really need a resolution to this problem. Perhaps I'm just doing something wrong in my schema/options decls.

I appreciate any advice or effort to investigate and address this issue.

Thanks!

-- Bob