Parameters

Configuration options

Parameters can configure the following

• extensions upload,
• title,
• design,
• toolbar,
• content,
• buttons panel.

Extensions

extensions: Array

Listed extensions are pre-loaded before content display.

This parameter must be handled as follows: if you need for your panel to operate correctly when calling from iframe-slider, you should list all extensions that are used in the content parameter layout.

Example: you need to display the form based on ui.forms layout - you need to indicate extensions: ['ui.forms'].

Extensions ui.sidepanel-content and ui.buttons are loaded automatically without indicating in this parameter.

title

title: string

Sets title for side panel.

The the padding on top is not available If you don't pass the title. And Toolbar won't be displayed either!

Design

design: Object

Accepts object, containing the following properties:

• margin: bool = true content external padding, available padding by default.
• section: bool = true by default, content area has white background and internal padding.

margin: false

section: false

Toolbar

toolbar: Function

Accepts function that returns an array:

• BX.UI.Button Instance for any UI button.
• Element Dom item, used for custom controls.

Depends on parameter title: if not passed the Toolbar won't be displayed.

Example: button BX.UI.Button with close icon and custom element:

toolbar ({Button})
{
	return [
		new Button({
			icon: Button.Icon.TASK,
			color: Button.Color.LIGHT_BORDER,
			onclick: () => alert('task!')
		}),
		BX.Tag.render`<button class="ui-btn ui-btn-light-border ui-btn-icon-setting"></button>`,
	];
}

The input parameter passes the link to top.BX.UI. Using the decomposition you can get only the necessary objects:

toolbar({Button})
{
	return [
		new Button({}),
	];
}

You can describe the function by various methods:

toolbar ()
{
	return [];
}

toolbar: () => {
	return [];
}

toolbar: function ()
{
	return [];
}

Content

content: Function

Accepts the function that can returns the content as follows:

• string String.
• Element Dom-element.
• Promise|BX.Promise Promise, returns string in then, Element or Promise|BX.Promise.

String:

content ()
{
	return "Content <br>".repeat(4);
}

Dom-element:

content ()
{
	return BX.Tag.render`<div>${"Content <br>".repeat(4)}</div>`;
}

Promise, returns the string:

content ()
{
	return BX.ajax.runAction('crm.api.form.getDict', {json: {}})
		.then(data => data.data.languages.map(item => item.name).join('<br>'))
	;
}

Buttons panel

buttons: Function

Accepts the function returning the array:

• BX.UI.Button Instance of any UI-button.
• Element Dom-element, used for custom controls.

Displays "Close" button in case parameter is not passed. To disable this behavior, return an empty array in the functio.

Example: save button, cancel button, custom element:

buttons ({cancelButton, closeButton, SaveButton, Button})
{
	return [
		new SaveButton({onclick: () => alert('saved!')}),
		cancelButton,
		BX.Tag.render`<div>html</div>`,
	];
}

You can implement pre-created buttons for closing the side panel, with already added click handler. They start from a string character:

buttons ({closeButton, cancelButton})
{
	return [closeButton, cancelButton];
}

The input parameter passes link to top.BX.UI. You can get necessary objects using the decomposition:

buttons ({Button})
{
	return [
		new Button({}),
	];
}

You can describe the function as follows:

toolbar ()
{
	return [];
}

toolbar: () => {
	return [];
}

toolbar: function ()
{
	return [];
}