Parameters

Configuration options

Parameters can configure the following

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

Extensions

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

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

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

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

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

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 [];
}