gitana / alpaca Goto Github PK

Alpaca provides the easiest way to generate interactive HTML5 forms for web and mobile applications. It uses JSON Schema and simple Handlebars templates to generate great looking, dynamic user interfaces on top of Twitter Bootstrap, jQuery UI, jQuery Mobile and HTML5.

Home Page: http://www.alpacajs.org

License: Other

JavaScript 86.70% Shell 0.07% CSS 1.37% HTML 6.38% Ruby 0.52% PHP 4.59% Gherkin 0.34% Mustache 0.03%

alpaca's Introduction

Alpaca - JSON Forms for jQuery and Bootstrap

Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide developers with an extensible framework for implementing controls, wizards, layouts, I18N support and an custom data persistence.

The goal of Alpaca is to provide the open source community with a fantastic forms engine that rivals or beats what most proprietary vendors offer. Using Alpaca, you can host really nice forms for your back end services, whether they are proprietary, enterprise or SaaS offerings.

The philosophy behind Alpaca is that you should design your forms once and have them work on lots of different devices and UI engines without having to do the same work twice.

Here is a sample registration form written once and rendered using four different approaches:

Alpaca is an open-source project licensed under Apache 2.0. It was started in 2010 and has been growing steadily since thanks to a really awesome community of customers, consultants and technology champions world-wide.

Web Site, Documentation and CDN

For information, demos and documentation regarding Alpaca, please visit the the Alpaca Forms web site.

Going forward, all distribution assets are available via free CDN via jsDelivr.

For example -

https://cdn.jsdelivr.net/npm/alpaca@<version>/dist/alpaca/bootstrap/alpaca.min.js
https://cdn.jsdelivr.net/npm/alpaca@<version>/dist/alpaca/bootstrap/alpaca.min.css

Where <version> should be filled in (example: 1.5.26).

For more information, visit the Alpaca Forms web site.

Official Support

We offer paid support for your technical development and production environments. Paid support includes a service level agreement for priority response and bug fixes.

If you are interested in sponsoring or are interested in consulting services, please Contact Us.

Community

We have an awesome community. Everything is straight up out in the open and anyone can build or contribute. We keep everything under an Apache 2.0 license so that you're free to do whatever you please with Alpaca.

There are several ways to interact with the Alpaca community.

Browse the documentation and try out the interactive examples. On each page, you'll find a Disqus forum that you can use to ask questions specific to that page. As others browse the documentation, they'll find your question and will have the context at hand to answer it.
Visit the Alpaca.js web site and ask your question to the broader Alpaca community. Be sure to include code samples, URLs or http://jsfiddle.net/ links so that others can reproduce your scenario quickly. It's always best to empower others to help you.
Add a GitHub Issue if you've found an actual bug or have a feature request that you'd like to get prioritized into the roadmap.
Submit a Pull Request if you've fixed a bug and want to contribute code back to the Alpaca project. This is the most powerful and effective way to influence the product. Pull requests give you a way to write your own additions or adjustments to the code base and make it very easy for us to merge your changes into the product.
Get Developer Assistance if you have an urgent issue and would like priority paid support. Cloud CMS and/or its partners provide fast and reliable developer assistance for your projects.

Extensibility

Alpaca is designed to be very extensible, allowing you to plug in new field implementations, DOM layouts, callbacks, CSS classes, I18N bundles and much more. It also integrates naturally to HTTP service backends using a connector layer.

Alpaca is ideal for consultants or organizations that wish to have a solid JavaScript form engine that provides a platform that they can grow into for current and future project needs.

Can I fork Alpaca and use it my own projects?

Yes, absolutely. That's the whole idea. Fork it, use it in your projects, make money from it, live a better life, spend more time with your kids. We hope that Alpaca is useful to you.

If you come up with something good (like a bug fix or a new feature), consider submitting a Pull Request back to the project so that others may benefit. And so that they too might, in turn, get more sleep, enjoy your work, be happier and get more out of this adventure called life.

Compatibility

The latest release of Alpaca is compatible with jQuery 1.9.1 and up. For a full breakdown of dependencies, check the bower.json and/or /lib directory for third-party vendor libraries and versions that are used.

In general, we aspire to support the latest versions of our third-party dependencies. Some folks may want Alpaca to be backward-compatible with earlier versions of dependencies and in general, it is our desire to have it be so. But in cases where that is not possible, we will opt for the latest. In those cases, we recommend folks fall back to an earlier version of Alpaca.

How to Build Alpaca

The first thing you should do is grab the source. We won't cover how to do that here but instead we recommend that you learn about Git and GitHub. You can pull the source down to your local machine to build things locally.

The command line for doing this is basically:

git clone https://github.com/gitana/alpaca.git

Build

To build Alpaca, you will need to have Node.js installed.

Building Alpaca is pretty easy. Just run:

npm install

And then:

npm run build

This will build to build/alpaca

To clean the build:

npm run clean

Building the Web Site

To build the web site, you will also need to have Python and Jekyll installed (as global dependencies).

You will then also need to install the redcarpet and pygments.rb gems, sort of like this:

gem install redcarpet
gem install pygments.rb

Then run:

npm run site

Running a Local Web Server

And you can run a local web server like this:

npm run server

Alpaca Distributions

The build produces four sets of assets and they are placed in:

build/alpaca/web (for basic web forms and layout)
build/alpaca/bootstrap (for bootstrap enabled forms and layout)
build/alpaca/jqueryui (for jQuery UI enabled forms and layout)
build/alpaca/jquerymobile (for jQuery Mobile enabled forms and layout)

Each directory contains a JS file and a CSS file for its respective build.

Each JS file is UMD ready and will work within both an AMD and CommonJS container.

Contributors

Here is a long list of our project's brothers and sisters in arms.
These folks have made numerous contributions to Alpaca over the years:

...and many others via the Alpaca Web Site and Alpaca Issues!

alpaca's People

Contributors

Stargazers

Watchers

Forkers

jfgodoy globocom jlanders68 jocelyndelalande drq ognian randylien ndaniel8a kausikram stecduk colegatron ryangadams matrousse mavencode01 philayres onasusweb shakey2k2 devluis tyidnet johnulist jakefeasel kirosoft petecleary acdigital il55 caspergemini nnutw sebast26 moayadnajd chboing kylee327 luiza-cicone xaraxia dsoa marcarvalho maurojr bstaub prantlf shareed2k splig phairow poltos michaeldurieux ripfire44 johnbraisted charreal tylerperyea asclepiliz st3v cmpas2 l8nite denispitcher drmikecrowe riccardod magamine flamilton deviant32 scho psypt willert yrojha4ever catataw adammendoza ytaka viktor-evdokimov vagdwd tomas2t elviskasa emircal e1m46n1f1c0 paierh cybolic arthurportas vladimir85 ctschak doobiwan superseb92 billbarsch koo9 simcon dgatt m4ttls sayan1886 musicist288 mschnee mixtmeta punkonwheels trileuco yogeshmsharma gdharley rodgerbrennan jftsaraiva vittala neopallium jeffatgithub wesley1001 cniesen jmptrader isu-it linchpinio

alpaca's Issues

Improve the uniqueness of radio button names (across multiple forms)

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

Button required

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

Improvement: Support for Form-Type range

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

Ajax submitting

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

No warning displayed when reading JSON data not declared in the schema

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.

better widget for SelectField w/ multiple=true

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.

Lacking a HACKING file

Where dependencies & build process would be described.

Autocomplete feature

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/

Required field child of an optional field should not block validation

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.

PostRender for VIEW_MOBILE_EDIT?

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

Hidden as a form field type

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

Key up validation

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.

Please enable comments on the documentation pages

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

Twitter Bootstrap CSS improvements

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!

Improvements to validation logic

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

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.
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.
The UI validation state for a given field is reflected right away upon keyUp.
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!

date dropdown not working

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
}

}

How to change just the view of a subfield?

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?

Add support for handlebars

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.

Auto Wizard loading URLs and Breaking Wizard

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.

Object array enumeration fails to assign unique field names...

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

read only Fields should not be validated

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

Bug: Data fields starting with a slash are interpreted as URI

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.

Please include the JSON for complex inline to make learning easier

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.

Must click submit button twice for submitting form

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 ?

HTML5 form field plans?

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

how to create and DESTROY Alpaca fields

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

Checkboxes do not work properly with latest jQuery

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

hideInitValidationError to true as default value.

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 ;-).

items object of options is not properly set

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...

Support multiple selection when using enums

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.

Radio buttons don't support boolean values

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 }.

Dependencies with boolean fields

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
                   }
               }
          }
    },

Issue with nested array

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":{}
}
}
}

JS not passing JSHint/Lint

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.

Table View

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.

validation on object Field after setValue does NOT work properly

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...

Website: /demos/* -sites not found

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

options.items.toolbarSticky or options.toolbarSticky ?

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

Add an "allowEmpty" option

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

Schema issue

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.

File Browse button doesn't appear for File field in an array item

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"
}
}
}
}
});
});

<!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>

Conditional Fields in arrays don't work properly

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?

DELETE-ME Inline view

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

Ant "full" works only if preceeded by "ant package"

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

valid readonly SelectField does not validate

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

gitana / alpaca Goto Github PK

alpaca's Introduction

Alpaca - JSON Forms for jQuery and Bootstrap

Web Site, Documentation and CDN

Sponsors

Official Support

Community

Extensibility

Can I fork Alpaca and use it my own projects?

Compatibility

How to Build Alpaca

Build

Building the Web Site

Running a Local Web Server

Alpaca Distributions

Contributors

alpaca's People

Contributors

Stargazers

Watchers

Forkers

alpaca's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs