Bitrix Framework

  Class $Bitrix.RestClient

Class allows to organize the handling of REST client from Bitrix Framework. If your component operates not only inside Bitrix24 but also as an external widget (online forms, online chat widget), you need to use this class. In the rest of cases, use the import of import {rest as Rest} from 'rest.client'.

$Bitrix.RestClient.get

Method for getting current configured REST client for current application (for external third-party applications).

this.$Bitrix.RestClient.get(): RestClient

Result:

RestClient – configured REST client.

$Bitrix.RestClient.set

Method for setting new REST client in the current Vue application.

this.$Bitrix.RestClient.set(instance: RestClient): void

Parameters:

Additionally:

When the method this.$Bitrix.RestClient.set was not called, uses the REST client by default: BX.rest. It won't be suitable resources and you need to initialize your own client when initializing Vue application. Example can be the function initRestClient, described in the file /bitrix/modules/imopenlines/install/js/imopenlines/component/widget/src/widget.js.

$Bitrix.RestClient.isCustom

Using this method can inform you if the standard REST client was edited.

this.$Bitrix.RestClient.isCustom(): boolean

Event BitrixVue.events.restClientChange

In case, you need to react to a REST client change, you can subscribe to an edit event:

import {BitrixVue} from 'ui.vue3';
this.$Bitrix.eventEmitter.subscribe(BitrixVue.events.restClientChange);

  Examples

Access to functions inside the component is performed in the same manner as to any other variable – via this.. There are, however, nuances of use in the hook beforeCreate. You can find more details in the chapter description.

Setting a specialized REST client

import {BitrixVue} from 'ui.vue3';

class Widget
{
	...
	attachTemplate()
	{
		const restClient = this.restClient;
		        
		this.#application = BitrixVue.createApp({
			components: {
				Component	
			},
			beforeCreate() 
			{
				...
				this.$bitrix.RestClient.set(restClient);
			},
			template: '<Component/>'
		}).mount(this.rootNode);
	}
	...
}

Handling REST client

const Component = {
	...
	created(): void
	{
		this.#rest = this.$Bitrix.RestClient.get();
	},
    methods:
	{
		getProfile(): void
		{
		    this.#rest.callMethod('profile').then(result => {
                console.log(result.data());
            });
        }
    },
	...
});