And here’s the builder-side js:
(function(skuid) {
// Global shortcuts & variables
var $ = skuid.$,
$xml = skuid.utils.makeXMLDoc,
b = skuid.builder,
c = b.core;
//Custom Navigation Component
c.registerBuilder(new c.Builder({
id: "ccoptimize__nav",
name: "Custom Navigation",
icon: "sk-icon-share",
description: "Inserts a Custom Navigation Component based on the Staff or Profile",
isJSCreateable: true,
componentRenderer : function (component) {
// Set title
component.setTitle(component.builder.name);
// Shortcuts
var state = component.state;
// Script name property
var navName = state.attr('nav');
// Build containers and contents
var builderText = 'The Custom Navigation Component creates a Skuid Navigation component based on the configuration found in the ' +
'<a href="/apex/skuid__ui?page=NavMenuSettings" taarget="_blank">Navigation Menu Settings</a>.';
var div = $('<div>').html(builderText);
// Add contents to DOM
component.body.append(div);
},
propertiesRenderer : function (propertiesObj, component) {
propertiesObj.setTitle("Custom Navigation Component Properties");
var state = component.state;
var propCategories = [];
var basicPropsList = [
{
id : 'navset',
type : 'autocomplete',
sobject : 'Navigation_Menu_Set__c',
fieldsToReturn : ['Name', 'Optimize_Code__c', 'Id'],
fieldsToSearch : ['Name', 'Optimize_Code__c'],
displayTemplate : '{{Name}} ({{Optimize_Code__c}})',
valueTemplates : {
'nav' : '{{Name}}',
'code' : '{{Optimize_Code__c}}'
},
order : 'Name',
label : 'Navigation Set (autocomplete)',
required : true,
onChange : function() {
component.refresh();
}
},
{
id: "responsivebreakpoint",
type: "picklist",
label: "Screen Size to Change Format",
location: "attribute",
picklistEntries: [
{label: 'Never', value: ''},
{label: 'Tablets and smaller', value: 'medium'},
{label: 'Phones', value: 'small'}
],
onChange: function(){
component.rebuildProps();
}
}
];
if (state.attr('responsivebreakpoint')) basicPropsList.push({
id: "alternateformat",
type: "picklist",
label: "Alternate Format",
location: "attribute",
picklistEntries: [
{label: 'Collapse to menu', value: 'collapse'},
{label: 'Wrap centered', value: 'wrap'}
]
});
var advancedPropsList = [
c.coreProps.uniqueIdProp({component: component}),
b.cssClassProp
];
propCategories.push(
{
name: "Basic",
props: basicPropsList,
},
{
name: "Advanced",
props: advancedPropsList
},
c.getRenderingCategory({
component: component,
model: null,
propViewer: propertiesObj
})
);
if(skuid.mobile) propCategories.push({ name : "Remove", props : [{ type : "remove" }] });
propertiesObj.applyPropsWithCategories(propCategories,state);
},
defaultStateGenerator : function() {
return skuid.utils.makeXMLDoc('<ccoptimize__nav/>');
}
}));
})(skuid);
