SHARE
TWEET

Skuid Basic Types

a guest May 11th, 2015 343 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (function($) {
  2.         var $xml = skuid.utils.makeXMLDoc;
  3.  
  4.         skuid.builder.core.registerBuilder(new skuid.builder.core.Builder({
  5.                 id: "andrew__sample_props",
  6.                 name: "Sample Properties",
  7.                 icon: "sk-icon-generate-assets",
  8.                 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.",
  9.  
  10.                 // How it's rendered in the composer view in desktop
  11.                 componentRenderer: function(component) {
  12.                         component.setTitle(component.builder.name);
  13.                         console.log('component', component);
  14.  
  15.                         // ICON
  16.                         var iconProp = component.state.attr('iconProp');
  17.                         var iconSpan = '<span class="ui-button-icon-primary ui-icon ' + iconProp + ' sk-icon inline"></span>';
  18.  
  19.                         // No need actively updated the more complicate attributes properly
  20.                         // since the builder preview (for this component at least) should just be
  21.                         // more of a rough preview
  22.                         var content = $j('<div class="sample-fields">');
  23.                         content.append(['Model: ', component.state.attr('modelProp'), '<br>']);
  24.                         content.append(['Models: (models) <br>']);
  25.                         content.append(['String: ', component.state.attr('stringProp'), '<br>']);
  26.                         content.append(['Template: ', component.state.attr('templateProp'), ' <br>']);
  27.                         content.append(['Field: ', component.state.attr('fieldProp'), ': (value) <br>']);
  28.                         content.append(['Boolean: ', component.state.attr('booleanProp'), '<br>']);
  29.                         content.append(['Multipicklist: ', component.state.attr('multipicklistProp'), '<br>']);
  30.                         content.append(['Picklist: ', component.state.attr('picklistProp'), '<br>']);
  31.                         content.append(['SObject: ', component.state.attr('sobjectProp'), '<br>']);
  32.                         content.append(['Icon: ', iconSpan, '<br>']);
  33.                         content.append(['Opportunity: ', component.state.attr('autoCompleteProp'), '<br>']);
  34.  
  35.                         component.body.html('');
  36.                         component.body.append(content);
  37.  
  38.                 },
  39.  
  40.                 // The inputtable properties
  41.                 propertiesRenderer: function (propertiesObj,component) {
  42.                         propertiesObj.setTitle("Say Hello Component Properties");
  43.                         var state = component.state;
  44.                         var propCategories = [];
  45.  
  46.                         var propsList1 = [
  47.                                 {
  48.                                         id: "modelProp",
  49.                                         type: "model",
  50.                                         label: "Model",
  51.                                         helptext: "This is help text, you can use it on any property.",
  52.                                         onChange: function(){
  53.                                                 component.refresh();
  54.                                         }
  55.                                 },
  56.                                 {
  57.                                         id: "modelsProp",
  58.                                         type: "models",
  59.                                         label: "Models",
  60.                                         onChange: function(){
  61.                                                 component.refresh();
  62.                                         },
  63.                                         location: "attribute"
  64.                                 },
  65.                                 {
  66.                                         id: "stringProp",
  67.                                         type: "string",
  68.                                         label: "A string",
  69.                                         onChange: function(){
  70.                                                 component.refresh();
  71.                                         }
  72.                                 },
  73.                                 {
  74.                                         id: "templateProp",
  75.                                         type: "template",
  76.                                         label: "A Template",
  77.                                         onChange: function(){
  78.                                                 component.refresh();
  79.                                         },
  80.                                         modelprop : "modelProp",
  81.                                         // Stores the data in the attribute,
  82.                                         // rather than a child
  83.                                         // options: node, attribute
  84.                                         location: "attribute"
  85.                                 },
  86.                                 {
  87.                                         id: "fieldProp",
  88.                                         type: "field",
  89.                                         label: "A field",
  90.                                         modelprop : "modelProp",
  91.                                         onChange: function(){
  92.                                                 component.refresh();
  93.                                         }
  94.                                 },
  95.                                 {
  96.                                         id: "booleanProp",
  97.                                         type: "boolean",
  98.                                         label: "A boolean",
  99.                                         onChange: function(){
  100.                                                 component.refresh();
  101.                                         }
  102.                                 },
  103.                                 // Doesn't really work right now
  104.                                 /*{
  105.                                         id: "conditionProp",
  106.                                         type: "condition",
  107.                                         label: "A condition",
  108.                                         modelprop: "model",
  109.                                         onChange: function(){
  110.                                                 component.refresh();
  111.                                         }
  112.                                 },*/
  113.                                 // MOBILE ONLY
  114.                                 /*
  115.                                 {
  116.                                         id: "quicknumberProp",
  117.                                         type: "quicknumber",
  118.                                         label: "A quicknumber",
  119.                                         onChange: function(){
  120.                                                 component.refresh();
  121.                                         }
  122.                                 },
  123.                                 {
  124.                                         // Only the label shows up
  125.                                         id: "numberboxProp",
  126.                                         type: "numberbox",
  127.                                         label: "A numberbox",
  128.                                         onChange: function(){
  129.                                                 component.refresh();
  130.                                         }
  131.                                 }*/
  132.                         ];
  133.  
  134.                         var propsList2 = [
  135.                                 {
  136.                                         id: "multipicklistProp",
  137.                                         type: "multipicklist",
  138.                                         label: "A multipicklist",
  139.                                         picklistEntries: [
  140.                                                         {
  141.                                                                 label: 'a',
  142.                                                                 value: 'a'
  143.                                                         },
  144.                                                         {
  145.                                                                 label: 'b',
  146.                                                                 value: 'b'
  147.                                                         },
  148.                                                         {
  149.                                                                 label: 'c',
  150.                                                                 value: 'c'
  151.                                                         },
  152.                                                         {
  153.                                                                 label: 'd',
  154.                                                                 value: 'd'
  155.                                                         }
  156.                                                 ],
  157.                                         onChange: function(){
  158.                                                 component.refresh();
  159.                                         }
  160.                                 },
  161.                                 {
  162.                                         id: "picklistProp",
  163.                                         type: "picklist",
  164.                                         label: "A picklist",
  165.                                         picklistEntries: [{
  166.                                                         value: "one",
  167.                                                         label: "One"
  168.                                                 },
  169.                                                 {
  170.                                                         value: "two",
  171.                                                         label: "Two"
  172.                                                 },
  173.                                                 {
  174.                                                         value: "three",
  175.                                                         label: "Three"
  176.                                                 }],
  177.                                         defaultValue: 'two',
  178.                                         onChange: function(){
  179.                                                 component.refresh();
  180.                                         }
  181.                                 },
  182.                                 {
  183.                                         id: "sobjectProp",
  184.                                         type: "sobject",
  185.                                         label: "An sobject",
  186.                                         onChange: function(){
  187.                                                 component.refresh();
  188.                                         }
  189.                                 },
  190.                                 {
  191.                                         id: "iconProp",
  192.                                         type: "icon",
  193.                                         label: "An icon",
  194.                                         onChange: function(){
  195.                                                 component.refresh();
  196.                                         }
  197.                                 },
  198.                                 {
  199.                                         id : 'autoCompleteProp',
  200.                                         type : 'autocomplete',
  201.                                         sobject : 'Opportunity',
  202.                                         fieldsToReturn : ['Name'],
  203.                                         fieldsToSearch : ['Name'],
  204.                                         displayTemplate : '{{Name}}',
  205.                                         valueTemplates : {
  206.                                                 'pagename' : '{{Name}}',
  207.                                         },
  208.                                         order : 'Name',
  209.                                         label : 'Opportuntiy (autocomplete)',
  210.                                         required : true,
  211.                                         onChange : function() {
  212.                                                 component.refresh();
  213.                                         }
  214.                                 }
  215.                         ];
  216.  
  217.                         // Page 1 Properties
  218.                         propCategories.push({
  219.                                 name: "Basic",
  220.                                 props: propsList1,
  221.                         });
  222.  
  223.                         // Page 2 Properties
  224.                         propCategories.push({
  225.                                 name: "Advanced",
  226.                                 props: propsList2,
  227.                         });
  228.  
  229.                         propertiesObj.applyPropsWithCategories(propCategories,state);
  230.                 },
  231.                 defaultStateGenerator : function() {
  232.                         return skuid.utils.makeXMLDoc('<andrew__sample_props templateProp="{{Name}}" modelsProp="none" stringProp="a string" booleanProp="false"/>');
  233.                 }
  234.         }));
  235. })(skuid);
  236.  
  237.  
  238. /*
  239.         The more you know!
  240.         Skuid component data is stored in XML. What sort of implications does this have?
  241.         Well I'm glad you asked.
  242.  
  243.         The way data could typically be stored and architected in Javascript does
  244.         not directly translate to XML. Although you can store all the same data,
  245.         it just might look a bit different. Basically, the biggest difference is
  246.         that in order to store a list of anything in xml, you must declare multiple
  247.         children of a node, and give them the same name. Let's look at an example.
  248.  
  249.                 <myData myGreeting="hello" >
  250.                         <response>Hi</response>
  251.                         <response>Hello</response>
  252.                         <response>I hate you</response>
  253.                 </myData>
  254.  
  255.         The responses of myData are "Hi", "Hello", and "I hate you". Or, more verbosely,
  256.         the content of the child elements of the <myData> element with the "responses"
  257.         tags are "Hi", "Hello", and "I hate you".
  258.  
  259.         Now how about that myGreeting? That's called an attribute. So the "myGreeting"
  260.         attribute of the <myData> element is "hello". Now, why don't we just store lists
  261.         as attributes in XML? Well, there's two answers to that.
  262.  
  263.         1. You could, however it's not natively supported. You could create a "responses"
  264.         attribute of <myData> and set it's value to "Hi,Hello,I hate you". Then, using
  265.         an external processor, split the "responses" attribute up by columns, and there
  266.         you have your list.
  267.         2. You've probably realized quite quickly that #1 is far from foolproof. What happens
  268.         if someone has a comma in there response? What about a quotation mark? Sure you could
  269.         write ways to handle that, but then you've started to develop your own data language,
  270.         and chances are it's not going to be quite as robust as an industry standard like XML.
  271.         The second reason to the questions is that you don't store lists as attributes in XML.
  272.         You'd be reinventing the wheel, inside of another wheel.
  273.  
  274.         So next time you're wondering why there's 2 ways to get at component data, remember,
  275.         lists go in child elements, single values go in attributes.
  276. */
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top