#### Alpaca - Advanced Inputs

Statistics Invoices Schedule

###### Option trees

Dependent option trees

###### Option tree field

This example asks a user what number they would like on the sports jersey. They're always able to just type in a value. Here, we provide a sequence of dropdowns to let them select a sport, team and athlete. The jersey number is then automatically filled in.

Show source code

    // Option tree field
    $('#alpaca-option-tree').alpaca({
        schema: {
            type: 'number',
            title: 'What number would like for your sports jersey?'
        },
        options: {
            type: 'optiontree',
            tree: {
                selectors: {
                    sport: {
                        schema: {
                            type: 'string'
                        },
                        options: {
                            type: 'select',
                            noneLabel: 'Pick a Sport...'
                        }
                    },
                    team: {
                        schema: {
                            type: 'string'
                        },
                        options: {
                            type: 'select',
                            noneLabel: 'Pick a Team...'
                        }
                    },
                    player: {
                        schema: {
                            type: 'string'
                        },
                        options: {
                            type: 'select',
                            noneLabel: 'Pick a Player...'
                        }
                    }
                },
                order: ['sport', 'team', 'player'],
                data: [{
                    value: 23,
                    attributes: {
                        sport: 'Basketball',
                        team: 'Chicago Bulls',
                        player: 'Michael Jordan'
                    }
                }, {
                    value: 33,
                    attributes: {
                        sport: 'Basketball',
                        team: 'Chicago Bulls',
                        player: 'Scotty Pippen'
                    }
                }, {
                    value: 4,
                    attributes: {
                        sport: 'Football',
                        team: 'Green Bay Packers',
                        player: 'Brett Favre'
                    }
                }, {
                    value: 19,
                    attributes: {
                        sport: 'Baseball',
                        team: 'Milwaukee Brewers',
                        player: 'Robin Yount'
                    }
                }, {
                    value: 99,
                    attributes: {
                        sport: 'Hockey',
                        player: 'Wayne Gretzky'
                    }
                }],
                horizontal: true
            },
            focus: false
        }
    });

###### Using connector

The following example produces the same form, but uses a connector to load the schema and options. The options JSON is loaded and merged with some inline options that provide to override a submit click handler.

Show source code

    // Using connector
    $('#alpaca-option-tree-connector').alpaca({
        schemaSource: '../../../../global_assets/demo_data/alpaca/optiontree-custom-schema.json',
        optionsSource: '../../../../global_assets/demo_data/alpaca/optiontree-custom-options.json',
        options: {
            focus: false
        }
    });

###### CKEditor field

Render CKEditor editor

###### Full featured editor

The `ckeditor` field. The CK Editor field renders the CK editor control that allows users to visually work with HTML and save the results back into a text property. This is a full example of the CK Editor at work. The point here is to show how it looks in full. In the examples that follow, we'll trim this down. Note - CKeditor must be included in your page ahead of the control loading in order for this to work properly.

###### Input types

Supported input types

###### Lowercase

The following example demonstrates how Alpaca library can format text inside input field. To apply `lowercase` text style, set `format` option to `lowercase` inside `schema` parameter.

Show source code

    // Lowercase
    $('#alpaca-lowercase').alpaca({
        data: 'Ice cream is wonderful.',
        schema: {
            format: 'lowercase'
        },
        options: {
            focus: false
        }
    });

###### Uppercase

The following example demonstrates how Alpaca library can format text inside input field. To apply `uppercase` text style, set `format` option to `uppercase` inside `schema` parameter.

Show source code

    // Uppercase
    $('#alpaca-uppercase').alpaca({
        data: 'Ice cream is wonderful.',
        schema: {
            format: 'uppercase'
        },
        options: {
            focus: false
        }
    });

###### Search type

The `search` field implements a search box that provides a search-optimized control. It allows for the specification of search terms with an optimized user interface. It uses the HTML5 'search' input type, but not the actual search.

Show source code

    // Search type
    $('#alpaca-search').alpaca({
        data: 'Where for art thou Romeo?',
        schema: {
            type: 'string'
        },
        options: {
            type: 'search',
            focus: false,
            label: 'Search'
        }
    });

###### Integer type

The following example demonstrates `integer` field with data, options and schema parameters. Minimum value is set to 18, maximum to 25. Validation is also enabled, try to change input value to see it in action.

Show source code

    // Integer type
    $('#alpaca-integer').alpaca({
        data: 20,
        options: {
            type: 'integer',
            label: 'Age:',
            focus: false
        },
        schema: {
            minimum: 18,
            maximum: 25,
            exclusiveMinimum: true,
            exclusiveMaximum: true,
            divisibleBy: 2
        }
    });

###### Password type

The following example demonstrates `password` field type. Here input doesn't have any optional parameters, but a very basic setup. This input field type supports all available options and parameters.

Show source code

    // Password type
    $('#alpaca-password').alpaca({
        data: 'password',
        schema: {
            format: 'password'
        },
        options: {
            focus: false
        }
    });

###### Email type

The following example demonstrates `email` field type. Here input doesn't have any optional parameters, but a very basic setup. This input field type supports all available options and parameters. Validation enabled by default.

Show source code

    // Email type
    $('#alpaca-email').alpaca({
        data: 'support',
        schema: {
            format: 'email'
        },
        options: {
            focus: false
        }
    });

###### IPv4 type

The following example demonstrates `ipv4` field type. Here input doesn't have any optional parameters, but a very basic setup. This input field type supports all available options and parameters. Validation enabled by default.

Show source code

    // IP address type
    $('#alpaca-ipv4').alpaca({
        data: '100.60',
        schema: {
            format: 'ip-address'
        },
        options: {
            focus: false
        }
    });

###### URL type

The following example demonstrates `url` field type. Here input doesn't have any optional parameters, but a very basic setup. This input field type supports all available options and parameters. Validation enabled by default.

Show source code

    // URL type
    $('#alpaca-url').alpaca({
        data: 'http://www.alpacajs.org',
        options: {
            type: 'url',
            focus: false
        },
        schema: {
            format: 'uri'
        }
    });

###### Currency type

The following example demonstrates `currency` field type. Here input doesn't have any optional parameters, but a very basic setup. The currency field uses the JQuery Price Format plugin to render format the input as it's entered.

Show source code

    // Currency type
    $('#alpaca-currency').alpaca({
        options: {
            type: 'currency',
            focus: false
        }
    });

###### Personal name type

The following example demonstrates custom `personal name` field type. Every time you press space key, new word starts with capital letter. This input field type supports all available options and parameters. Validation enabled by default.

Show source code

    // Personal name type
    $('#alpaca-name').alpaca({
        data: 'Oscar Zoroaster Phadrig Isaac Norman Henkel Emmannuel Ambroise Diggs',
        options: {
            type: 'personalname',
            focus: false
        }
    });

###### File inputs

Default and optional styling

###### Basic file input

The following example demonstrates a basic single file input. This input field type supports all available options and parameters. Additionally you can specify schema format. Validation is disabled by default.

Show source code

    // Basic file input
    $('#alpaca-file').alpaca({
        data: '',
        options: {
            type: 'file',
            label: 'Ice Cream Photo:',
            helper: 'Pick your favorite ice cream picture.',
            focus: false
        },
        schema: {
            type: 'string',
            format: 'uri'
        }
    });

###### Static mode

The following example demonstrates a basic single file input in `read only` mode. This input field type supports all available options and parameters. Additionally you can specify schema format. Validation is disabled by default.

Show source code

    // Static mode
    $('#alpaca-file-static').alpaca({
        data: '/abc.html',
        options: {
            type: 'file',
            label: 'Ice Cream Photo:',
            helper: 'Pick your favorite ice cream picture.',
            focus: false
        },
        schema: {
            type: 'string',
            format: 'uri'
        },
        view: 'bootstrap-display'
    });

###### Styled file input

The following example demonstrates a single file input styled with `uniform` plugin. This is optional configuration, Alpaca doesn't support it by default and doesn't have custom field type. Also supports all available options.

Show source code

    // Styled file input
    $('#alpaca-file-styled').alpaca({
        data: '',
        options: {
            type: 'file',
            label: 'Ice Cream Photo:',
            helper: 'Pick your favorite ice cream picture.',
            id: 'file-styled',
            focus: false
        },
        schema: {
            type: 'string',
            format: 'uri'
        },
        postRender: function() {
            $('#file-styled').uniform({
                fileButtonClass: 'action btn bg-blue'
            });
        }
    });

###### Disabled file input

The following example demonstrates a single file input styled with `uniform` plugin in `disabled` mode. This is optional configuration, Alpaca doesn't support it by default and doesn't have custom field type. Also supports all available options.

Show source code

    // Disabled file input
    $('#alpaca-file-disabled').alpaca({
        data: '',
        options: {
            type: 'file',
            label: 'Ice Cream Photo:',
            helper: 'Pick your favorite ice cream picture.',
            disabled: true,
            id: 'file-styled-disabled',
            focus: false
        },
        schema: {
            type: 'string',
            format: 'uri'
        },
        postRender: function() {
            $('#file-styled-disabled').uniform({
                fileButtonClass: 'action btn bg-blue'
            });
        }
    });

###### Select helpers

Country and state selects

###### Country selector

The following example demonstrates `country` field with default settings. To use this kind of select helper, just set `type` option to `country` in your configuration. Supports all available options.

Show source code

    // Country selector
    $('#alpaca-country').alpaca({
        options: {
            type: 'country',
            focus: false
        }
    });

###### State selector

The following example demonstrates `state` field with default settings. To use this kind of select helper, just set `type` option to `state` in your configuration. Supports all available options.

Show source code

    // State selector
    $('#alpaca-state').alpaca({
        options: {
            type: 'state',
            focus: false
        }
    });

###### Searchable select

The following example demonstrates `country` field with integrated Select2 plugin. To initialize Select2 on select, you need to add init code in `postRender` callback. Supports all available options.

Show source code

    // Searchable country selector
    $('#alpaca-country-search').alpaca({
        options: {
            type: 'country',
            id: 'country-search',
            focus: false
        },
        postRender: function() {
            $('#country-search').select2();
        }
    });

###### Searchable select

The following example demonstrates `state` field with integrated Select2 plugin. To initialize Select2 on select, you need to add init code in `postRender` callback. Supports all available options.

Show source code

    // Searchable state selector
    $('#alpaca-state-search').alpaca({
        options: {
            type: 'state',
            id: 'state-search',
            focus: false
        },
        postRender: function() {
            $('#state-search').select2();
        }
    });