I’m working on a global save/cancel component.
It appears to be functioning alright, except that the enable conditions on the buttons that I’ve tried to reproduce through the XML are not working.
Any thoughts on why that would be?
From the core code, it looks like buttons are technically their own components. Do I have to manufacture them and then somehow add them as child components of the pagetitle?
Here’s the runtime code so far:
skuid.componentType.register("compass__globalsave",function (element,xmlDef,component){ // Shortcuts
var $xml = skuid.utils.makeXMLDoc,
$e = skuid.events.subscribe,
// Get properties
var exceptionsArray = xmlDef.attr('exceptions') && xmlDef.attr('exceptions').split(','),
cssClass = xmlDef.attr("cssclass") ? ' cssclass="'+xmlDef.attr("cssclass")+'" ' : '',
uniqueId = xmlDef.attr("uniqueid") ? ' uniqueid="'+xmlDef.attr("uniqueid")+'" ' : '';
if (exceptionsArray && exceptionsArray.length) modelsToExclude.concat(exceptionsArray);
onlyPreventUnload = (xmlDef.attr('onlysavepreventunloadmodels') === "true");
cancelAll = (xmlDef.attr('cancelall') === "true");
// Model
var changeTrackerModel = new skuid.model.Model();
changeTrackerModel.objectName = 'Account';
changeTrackerModel.id = 'ChangeTracker';
changeTrackerModel.recordsLimit = 0;
changeTrackerModel.createRowIfNoneFound = true;
changeTrackerModel.doQuery = false;
changeTrackerModel.needsMetadataLoad = false;
changeTrackerModel.preventUnloadIfUnsavedChanges = false;
changeTrackerModel.fields = [
{ id: 'Id' },
{
id: 'ModelChanges',
label: "Models Have Changes",
uiOnly: true,
defaultValue: "false",
displaytype: "BOOLEAN"
}
];
// Component functions
component.checkForChanges = function(){
if (changeTrackerModel) {
var changes = false;
$.each(skuid.model.map(),function(){
if (this.hasChanged && this.id !== 'ChangeTracker') {
changes = true;
}
});
changeTrackerModel.updateRow(changeTrackerModel.getFirstRow(), {'ModelChanges': changes});
}
};
// Subscriptions
$e('models.cancelled', component.checkForChanges);
$e('models.saved', component.checkForChanges);
$e('row.created', component.checkForChanges);
$e('row.updated', component.checkForChanges);
$e('row.deleted', component.checkForChanges);
$e('row.undeleted', component.checkForChanges);
// Define XML for our pagetitle component
var xmlGlobalPageTitle = $xml('<pagetitle model="ChangeTracker" '+ uniqueId + cssClass + '/>')
.append(
$xml('<actions/>')
.append(
$xml('<action type="custom" icon="sk-icon-save" label="Save" snippet="globalSave"/>')
.append(
$xml('<enableconditions logictype="and"/>')
.append(
$xml('<condition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="ChangeTracker" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="ModelChanges" value="true"/>')
)
),
$xml('<action type="custom" icon="sk-icon-cancel" label="Cancel" snippet="globalCancel"/>')
.append(
$xml('<enableconditions logictype="and"/>')
.append(
$xml('<condition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="ChangeTracker" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="ModelChanges" value="true"/>')
)
)
)
);
// Make containers for our components
var globalSaveContainer = $('<div id="GlobalSave">');
// Prepare model and elements.
$.when(changeTrackerModel.initialize().register()).then(function(){
// Manufacture component
skuid.component.factory({
xmlDefinition: xmlGlobalPageTitle,
element: globalSaveContainer
});
// Add components to the DOM element
element.append(globalSaveContainer);
// // Replacement for .createRowIfNoneFound
// if (!changeTrackerModel.getRows().length) changeTrackerModel.createRow();
});
});
