Skuid Basic Types

(function($) {
    var $xml = skuid.utils.makeXMLDoc;

    skuid.builder.core.registerBuilder(new skuid.builder.core.Builder({
        id: "andrew__sample_props",
        name: "Sample Properties",
        icon: "sk-icon-generate-assets",
        description: "This is a component purely for code demonstration purposes. If you're curious on how to access and deal with different component properties, the source code for this might be helpful.",

        // How it's rendered in the composer view in desktop
        componentRenderer: function(component) {
            component.setTitle(component.builder.name);
            console.log('component', component);

            // ICON
            var iconProp = component.state.attr('iconProp');
            var iconSpan = '<span class="ui-button-icon-primary ui-icon ' + iconProp + ' sk-icon inline"></span>';

            // No need actively updated the more complicate attributes properly
            // since the builder preview (for this component at least) should just be
            // more of a rough preview
            var content = $j('<div class="sample-fields">');
            content.append(['Model: ', component.state.attr('modelProp'), '<br>']);
            content.append(['Models: (models) <br>']);
            content.append(['String: ', component.state.attr('stringProp'), '<br>']);
            content.append(['Template: ', component.state.attr('templateProp'), ' <br>']);
            content.append(['Field: ', component.state.attr('fieldProp'), ': (value) <br>']);
            content.append(['Boolean: ', component.state.attr('booleanProp'), '<br>']);
            content.append(['Multipicklist: ', component.state.attr('multipicklistProp'), '<br>']);
            content.append(['Picklist: ', component.state.attr('picklistProp'), '<br>']);
            content.append(['SObject: ', component.state.attr('sobjectProp'), '<br>']);
            content.append(['Icon: ', iconSpan, '<br>']);
            content.append(['Opportunity: ', component.state.attr('autoCompleteProp'), '<br>']);

            component.body.html('');
            component.body.append(content);

        },

        // The inputtable properties
        propertiesRenderer: function (propertiesObj,component) {
            propertiesObj.setTitle("Say Hello Component Properties");
            var state = component.state;
            var propCategories = [];

            var propsList1 = [
                {
                    id: "modelProp",
                    type: "model",
                    label: "Model",
                    helptext: "This is help text, you can use it on any property.",
                    onChange: function(){
                        component.refresh();
                    }
                },
                {
                    id: "modelsProp",
                    type: "models",
                    label: "Models",
                    onChange: function(){
                        component.refresh();
                    },
                    location: "attribute"
                },
                {
                    id: "stringProp",
                    type: "string",
                    label: "A string",
                    onChange: function(){
                        component.refresh();
                    }
                },
                {
                    id: "templateProp",
                    type: "template",
                    label: "A Template",
                    onChange: function(){
                        component.refresh();
                    },
                    modelprop : "modelProp",
                    // Stores the data in the attribute,
                    // rather than a child
                    // options: node, attribute
                    location: "attribute"
                },
                {
                    id: "fieldProp",
                    type: "field",
                    label: "A field",
                    modelprop : "modelProp",
                    onChange: function(){
                        component.refresh();
                    }
                },
                {
                    id: "booleanProp",
                    type: "boolean",
                    label: "A boolean",
                    onChange: function(){
                        component.refresh();
                    }
                },
                // Doesn't really work right now
                /*{
                    id: "conditionProp",
                    type: "condition",
                    label: "A condition",
                    modelprop: "model",
                    onChange: function(){
                        component.refresh();
                    }
                },*/
                // MOBILE ONLY
                /*
                {
                    id: "quicknumberProp",
                    type: "quicknumber",
                    label: "A quicknumber",
                    onChange: function(){
                        component.refresh();
                    }
                },
                {
                    // Only the label shows up
                    id: "numberboxProp",
                    type: "numberbox",
                    label: "A numberbox",
                    onChange: function(){
                        component.refresh();
                    }
                }*/
            ];

            var propsList2 = [
                {
                    id: "multipicklistProp",
                    type: "multipicklist",
                    label: "A multipicklist",
                    picklistEntries: [
                            {
                                label: 'a',
                                value: 'a'
                            },
                            {
                                label: 'b',
                                value: 'b'
                            },
                            {
                                label: 'c',
                                value: 'c'
                            },
                            {
                                label: 'd',
                                value: 'd'
                            }
                        ],
                    onChange: function(){
                        component.refresh();
                    }
                },
                {
                    id: "picklistProp",
                    type: "picklist",
                    label: "A picklist",
                    picklistEntries: [{
                            value: "one",
                            label: "One"
                        },
                        {
                            value: "two",
                            label: "Two"
                        },
                        {
                            value: "three",
                            label: "Three"
                        }],
                    defaultValue: 'two',
                    onChange: function(){
                        component.refresh();
                    }
                },
                {
                    id: "sobjectProp",
                    type: "sobject",
                    label: "An sobject",
                    onChange: function(){
                        component.refresh();
                    }
                },
                {
                    id: "iconProp",
                    type: "icon",
                    label: "An icon",
                    onChange: function(){
                        component.refresh();
                    }
                },
                {
                    id : 'autoCompleteProp',
                    type : 'autocomplete',
                    sobject : 'Opportunity',
                    fieldsToReturn : ['Name'],
                    fieldsToSearch : ['Name'],
                    displayTemplate : '{{Name}}',
                    valueTemplates : {
                        'pagename' : '{{Name}}',
                    },
                    order : 'Name',
                    label : 'Opportuntiy (autocomplete)',
                    required : true,
                    onChange : function() {
                        component.refresh();
                    }
                }
            ];

            // Page 1 Properties
            propCategories.push({
                name: "Basic",
                props: propsList1,
            });

            // Page 2 Properties
            propCategories.push({
                name: "Advanced",
                props: propsList2,
            });

            propertiesObj.applyPropsWithCategories(propCategories,state);
        },
        defaultStateGenerator : function() {
            return skuid.utils.makeXMLDoc('<andrew__sample_props templateProp="{{Name}}" modelsProp="none" stringProp="a string" booleanProp="false"/>');
        }
    }));
})(skuid);


/*
    The more you know!
    Skuid component data is stored in XML. What sort of implications does this have?
    Well I'm glad you asked.

    The way data could typically be stored and architected in Javascript does
    not directly translate to XML. Although you can store all the same data,
    it just might look a bit different. Basically, the biggest difference is
    that in order to store a list of anything in xml, you must declare multiple
    children of a node, and give them the same name. Let's look at an example.

        <myData myGreeting="hello" >
            <response>Hi</response>
            <response>Hello</response>
            <response>I hate you</response>
        </myData>

    The responses of myData are "Hi", "Hello", and "I hate you". Or, more verbosely,
    the content of the child elements of the <myData> element with the "responses"
    tags are "Hi", "Hello", and "I hate you".

    Now how about that myGreeting? That's called an attribute. So the "myGreeting"
    attribute of the <myData> element is "hello". Now, why don't we just store lists
    as attributes in XML? Well, there's two answers to that.

    1. You could, however it's not natively supported. You could create a "responses"
    attribute of <myData> and set it's value to "Hi,Hello,I hate you". Then, using
    an external processor, split the "responses" attribute up by columns, and there
    you have your list.
    2. You've probably realized quite quickly that #1 is far from foolproof. What happens
    if someone has a comma in there response? What about a quotation mark? Sure you could
    write ways to handle that, but then you've started to develop your own data language,
    and chances are it's not going to be quite as robust as an industry standard like XML.
    The second reason to the questions is that you don't store lists as attributes in XML.
    You'd be reinventing the wheel, inside of another wheel.

    So next time you're wondering why there's 2 ways to get at component data, remember,
    lists go in child elements, single values go in attributes.
*/