fields = [],
options = {},
params = {},
- fieldTpl = _.template($('#api-param-tpl').html());
+ fieldTpl = _.template($('#api-param-tpl').html()),
+ chainTpl = _.template($('#api-chain-tpl').html());
function addField(name) {
$('#api-params').append($(fieldTpl({name: name || ''})));
var $row = $('tr:last-child', '#api-params');
- $('.api-param-name', $row).select2({data: fields}).change();
+ $('.api-param-name', $row).crmSelect2({data: fields}).change();
+ }
+
+ function addChainField() {
+ $('#api-params').append($(chainTpl({})));
+ var $row = $('tr:last-child', '#api-params');
+ $('.api-chain-entity', $row).crmSelect2({
+ formatSelection: function(item) {
+ return '<span class="icon ui-icon-link"></span> API ' + item.text;
+ }
+ });
}
function getFields() {
text: ts('Other') + '...'
});
$('#api-params').empty();
- $('#api-params-add').show();
+ $('#api-param-buttons').show();
if (required.length) {
_.each(required, addField);
} else {
var $row = $(this).closest('tr'),
val = evaluate($(this).val(), $(this).is('.select2-offscreen')),
name = $('input.api-param-name', $row).val(),
- op = $('select.api-param-op', $row).val();
+ op = $('select.api-param-op', $row).val() || '=';
+ // Special syntax for api chaining
+ if (!name && $('select.api-chain-entity', $row).val()) {
+ name = 'api.' + $('select.api-chain-entity', $row).val() + '.' + $('select.api-chain-action', $row).val();
+ }
if (name && val !== undefined) {
params[name] = op === '=' ? val : {};
if (op !== '=') {
buildParams();
} else {
$('#api-params, #api-generated pre').empty();
- $('#api-params-add, #api-params-table thead').hide();
+ $('#api-param-buttons, #api-params-table thead').hide();
}
})
- .on('change keyup', 'input.api-param-checkbox, input.api-param-value, input.api-param-name, select.api-param-op', buildParams)
+ .on('change keyup', 'input.api-param-checkbox, input.api-param-value, input.api-param-name, #api-params select', buildParams)
.on('submit', submit);
$('#api-params')
.on('change', '.api-param-name', toggleOptions)
buildParams();
});
$('#api-params-add').on('click', function(e) {
+ e.preventDefault();
addField();
+ });
+ $('#api-chain-add').on('click', function(e) {
e.preventDefault();
+ addChainField();
});
$('#api-entity').change();
});
#api-result {
overflow: auto;
}
+ .select2-choice .icon {
+ margin-top: .2em;
+ background-image: url("{/literal}{$config->resourceBase}{literal}/i/icons/jquery-ui-2786C2.png");
+ }
{/literal}
</style>
<label for="api-action">{ts}Action{/ts}:</label>
<select class="crm-form-select crm-select2" id="api-action" name="action">
- <option value="get" selected="selected">get</option>
- <option value="create" title="used to update as well, if id is set">create</option>
- <option value="delete">delete</option>
- <option value="getfields">getfields</option>
- <option value="getactions">getactions</option>
- <option value="getcount">getcount</option>
- <option value="getsingle">getsingle</option>
- <option value="getvalue">getvalue</option>
- <option value="getoptions">getoptions</option>
- <option value="getlist">getlist</option>
+ {foreach from=$actions item='act'}
+ <option value="{$act}">{$act}</option>
+ {/foreach}
</select>
</thead>
<tbody id="api-params"></tbody>
</table>
- <div>
- <a href="#" class="crm-hover-button" id="api-params-add" style="display: none;"><span class="icon ui-icon-plus"></span>{ts}Add Parameter{/ts}</a>
+ <div id="api-param-buttons" style="display: none;">
+ <a href="#" class="crm-hover-button" id="api-params-add"><span class="icon ui-icon-plus"></span>{ts}Add Parameter{/ts}</a>
+ <a href="#" class="crm-hover-button" id="api-chain-add"><span class="icon ui-icon-link"></span>{ts}Chain API Call{/ts}</a>
</div>
<div id="api-generated-wraper">
<table id="api-generated" border=1>
</td>
</tr>
</script>
+
+<script type="text/template" id="api-chain-tpl">
+ <tr class="api-chain-row">
+ <td>
+ <select style="width: 100%;" class="crm-form-select api-chain-entity" placeholder="{ts}Entity{/ts}">
+ <option value=""></option>
+ {foreach from=$entities.values item=entity}
+ <option value="{$entity}">{$entity}</option>
+ {/foreach}
+ </select>
+ </td>
+ <td>
+ <select class="crm-form-select api-chain-action">
+ {foreach from=$actions item='act'}
+ <option value="{$act}">{$act}</option>
+ {/foreach}
+ </select>
+ </td>
+ <td>
+ <input style="width: 85%;" class="crm-form-text api-param-value" value="{ldelim}{rdelim}" placeholder="{ts}Api Params{/ts}"/>
+ <a class="crm-hover-button api-param-remove" href="#"><span class="icon ui-icon-close"></span></a>
+ </td>
+ </tr>
+</script>
{/strip}