Manipulating Buttons on Legacy MVC Layouts
Overview
How to add custom buttons to the EditView and DetailView layouts.
Note: This customization is only applicable for modules in backward compatibility mode.
Metadata
Before adding buttons to your layouts, you will need to understand how the metadata framework is used. Detailed information on the metadata framework can be found in the Legacy Metadata section.
Custom Layouts
Before you can add a button to your layout, you will first need to make sure you have a custom layout present. The stock layouts are located in ./modules/<module>/metadata/ and must be recreated in ./custom/modules/<module>/metadata/.
There are two ways to recreate a layout in the custom directory if it does not already exist. The first is to navigate to:
Studio > {Module} > Layouts > {View}
Once there, you can click the "Save & Deploy" button. This will create the layoutdef for you. Alternatively, you can also manually copy the layoutdef from the stock folder to the custom folder.
Editing Layouts
When editing layouts you have three options in having your changes reflected in the UI.
Developer Mode
You can turn on Developer Mode:
Admin > System Settings
Developer Mode will remove the caching of the metadata framework. This will cause your changes to be reflected when the page is refreshed. Make sure this setting is deactivated when you are finished with your customization.
Quick Repair and Rebuild
You can run a Quick Repair and Rebuild:
Admin > Repair > Quick Repair and Rebuild
Doing this will rebuild the cache for the metadata.
Saving & Deploying the Layout in Studio
You may also choose to load the layout in studio and then save & deploy it:
Admin > Studio > {Module} > Layouts > {View}
This process can be a bit confusing, however, once a layout is changed, you can then choose to load the layout in studio and then click "Save & Deploy" . This will rebuild the cache for that specific layout. Please note that any time you change the layout, you will have to reload the Studio layout view before deploying in order for this to work correctly.
Adding Custom Buttons
When adding buttons, there are several things to consider when determining how the button should be rendered. The following sections will outline these scenarios when working with the accounts editviewdefs located in ./custom/modules/Accounts/metadata/editviewdefs.php.
JavaScript Actions
If you are adding a button solely to execute JavaScript (no form submissions), you can do so by adding the button HTML to:
$viewdefs['<Module>']['<View>']['templateMeta']['form']['buttons']
Example
<?php
$viewdefs['Accounts'] =
array (
'DetailView' =>
array (
'templateMeta' =>
array (
'form' =>
array (
'buttons' =>
array (
0 => 'EDIT',
1 => 'DUPLICATE',
2 => 'DELETE',
3 => 'FIND_DUPLICATES',
4 => 'CONNECTOR',
5 =>
array (
'customCode' => '<input id="JavaScriptButton" title="JavaScript Button" class="button" type="button" name="JavaScriptButton" value="JavaScript Button" onclick="alert(\'Button JavaScript\')">',
),
),
),
Submitting the Stock View Form
If you intend to submit the stock layout form ('formDetailView' or 'formEditView') to a new action, you can do so by adding a the button HTML with an onclick event as shown below to:
$viewdefs['<Module>']['<View>']['templateMeta']['form']['buttons']
Example
<?php
$viewdefs['Accounts'] =
array (
'DetailView' =>
array (
'templateMeta' =>
array (
'form' =>
array (
'hidden' =>
array (
0 => '<input type="hidden" id="customFormField" name="customFormField" value="">',
),
'buttons' =>
array (
0 => 'EDIT',
1 => 'DUPLICATE',
2 => 'DELETE',
3 => 'FIND_DUPLICATES',
4 => 'CONNECTOR',
5 =>
array (
'customCode' => '<input id="SubmitStockFormButton" title="Submit Stock Form Button" class="button" type="button" name="SubmitStockFormButton" value="Submit Stock Form Button" onclick="var _form = document.getElementById(\'formDetailView\'); _form.customFormField.value = \'CustomValue\'; _form.action.value = \'CustomAction\'; SUGAR.ajaxUI.submitForm(_form);">',
),
),
),
You should note in this example that there is also a 'hidden' index. This is where you should add any custom hidden inputs:
$viewdefs['<Module>'][ '<View>'][ 'templateMeta'][ 'form'][ 'hidden']
Submitting Custom Forms
If you intend to submit a custom form, you will first need to set 'closeFormBeforeCustomButtons' to true. This will close out the current views form and allow you to create your own.
$viewdefs['<Module>']['<View>']['templateMeta']['form']['closeFormBeforeCustomButtons']
Next, you will add the form and button HTML as shown below to:
$viewdefs['<Module>']['<View>']['templateMeta']['form']['buttons']
Example
<?php
$viewdefs['Accounts'] =
array (
'DetailView' =>
array (
'templateMeta' =>
array (
'form' =>
array (
'closeFormBeforeCustomButtons' => true,
'buttons' =>
array (
0 => 'EDIT',
1 => 'DUPLICATE',
2 => 'DELETE',
3 => 'FIND_DUPLICATES',
4 => 'CONNECTOR',
5 =>
array (
'customCode' => '<form action="index.php" method="POST" name="CustomForm" id="form"><input type="hidden" name="customFormField" name="customFormField" value="CustomValue"><input id="SubmitCustomFormButton" title="Submit Custom Form Button" class="button" type="submit" name="SubmitCustomFormButton" value="Submit Custom Form Button"></form>',
),
),
),
Removing Buttons
To remove a button from the detail view will require modifying the ./modules/<module>/metadata/detailviewdefs.php.
The code is originally defined as:
$viewdefs[$module_name] = array (
'DetailView' => array (
'templateMeta' => array (
'form' => array (
'buttons' => array (
'EDIT',
'DUPLICATE',
'DELETE',
'FIND_DUPLICATES'
),
),
To remove one or more buttons, simply remove the 'buttons' attribute(s) that you do not want on the view.
$viewdefs[$module_name] = array (
'DetailView' => array (
'templateMeta' => array (
'form' => array (
'buttons' => array (
'DELETE',
),
),