Validating title text field using Anguilla Framework on save, save & close and save & new

Question

I am using Anguilla framework to validate my Title node. I have few doubts listed as follows:

1. If we want to implement the functionality for save, save & close and Save & New using single JavaScript file. While using above code, on save and close component/Page is getting save and not being closed. Same is the case with Save and New. Is there any way we can execute all above functionality in a single extension ? It is clear to understand that we are overriding the functionality of Save & Close and Save & New but how can we achieve the same functionality for save & close and save & new. We have added Save and close and Save and New to our configuration file.

2. If we have made some changes in a component and wishes to check-in then it prompts for saving the component. Using above extension it allows to save the component without checking the component Title first character. Do we need to add check-in too in our config file.

Answer 1

Since you wish to validate data, you are really should be hooking into the 'validate' event of the model object(s) in question instead of the commands.

The 'validate' event is fired in all of the cases you mentioned (Save, Save & Close, Save & New) and any other time the UI validates the item. What's more, it will work even if something else saves the item (i.e. a different command).

In general, it's much better to extend the model than the editor whenever you wish to change how the data is handled (as opposed to how it is presented).

Here is some example code that will work on any item with a title:

$evt.addEventHandler($display.getItem(), "validate", function(e) { 
    var item = e.source;
    if (item.getTitle().indexOf('valid') < 0) {
        $messages.registerError("Name is invalid!", "It must contain the word 'valid'", null, true, false);
        return false;
    }
    return true;
});

Obviously, this particular validation check is rather convoluted but you can modify it to fit your use case.

Answer 2

For the first question you could solve calling different commands in your config file:

<ext:commandextensions>
          <ext:commands>
            <ext:command name="SaveNew" extendingcommand="BotonSaveNew" />
            <ext:command name="Save" extendingcommand="BotonSave" />
            <ext:command name="SaveClose" extendingcommand="BotonSaveClose" />
            <ext:command name="Publish" extendingcommand="SecurePublish" />
            <ext:command name="UnPublish" extendingcommand="SecurePublish" />
          </ext:commands>
          <ext:dependencies>
            <cfg:dependency>Extensions.ValidateFields.comands</cfg:dependency>
          </ext:dependencies>
        </ext:commandextensions>
...

<commands>
    <cfg:commandset id="Extensions.ValidateFields.Interfaz">
      <cfg:command name="BotonSaveNew" implementation="Extensions.ValidateFields.BotonSaveNew"/>
      <cfg:command name="BotonSave" implementation="Extensions.ValidateFields.BotonSave"/>
      <cfg:command name="BotonSaveClose" implementation="Extensions.ValidateFields.BotonSaveClose"/>
      <cfg:command name="SecurePublish" implementation="Extensions.ValidateFields.SecurePublish"/>
    </cfg:commandset>
  </commands>

Then in a unique js file define those commands:

Extensions.ValidateFields.BotonSaveNew = function BotonSaveNew() {
    Type.enableInterface(this, "Extensions.ValidateFields.BotonSaveNew");
    this.addInterface("Tridion.Cme.Command", ["BotonSaveNew"]);
    console.log("Extensions.ValidateFields.BotonSaveNew");
};

Extensions.ValidateFields.BotonSave = function BotonSave() {
    Type.enableInterface(this, "Extensions.ValidateFields.BotonSave");
    this.addInterface("Tridion.Cme.Command", ["BotonSave"]);
    console.log("Extensions.ValidateFields.BotonSave");
};
...

And finally in the same js file, define your function:

Extensions.ValidateFields.BotonSave.prototype._execute = function BotonSave$_execute(selection, pipeline) {
    var error = false;
    error = YourFunction();
    if (!error) return $cme.getCommand("Save")._execute(selection, pipeline);
};

Extensions.ValidateFields.BotonSaveClose.prototype._execute = function BotonSaveClose$_execute(selection, pipeline) {
    var error = false;
    error = YourFunction();
    if (!error) return $cme.getCommand("SaveClose")._execute(selection, pipeline);
};

...

function YourFunction() {

//your voodoo magic...
}

For the second question Im not pretty sure but I think you could extend the checkin:

...
<ext:commands>
           <ext:command name="CheckIn" extendingcommand="ExtendCheckIn" />
</ext:commands>
...

Other aproach is tho make those validations in the event system despite a GUI extension.