How to customize the Bitrix24 interface?

Question

Bitrix24

Hello!
There was a need to add a certain text to the task card in bitrix24. I found in the docks the possibility of developing a local application and embedding it in the specified places of the interface, as well as a mention of the JS SDK:
https://dev.1c-bitrix.ru/rest_help/application_emb...
The methods are not described in detail and it is not clear what to do with them .
The question is, is it possible to do embedding with only JS to get by with a static local application? And am I digging in the right direction, or can there be simpler ways to solve my problem?

Answer 1

Hey!

is it possible to do embedding with just JS to get by with a static local app?

Did I understand correctly that local means you don't have hosting?
Bitrix documentation says the following:

Important : The consequence of the above points is that the embedding mechanism is only available for server applications!

So... you can!
1) Throw our application into the zip archive (or just index.html)
2) Register the application in Bitrix (developers > ready-made scripts > local application)
Set up rights (required, placements)
3) Now your application can be opened in Bitrix. We go to Developers > Integrations, search for our application and click "Go to application" through the context menu.
We need to see where Bitrix threw it. You can find an iFrame with our application through the dev tools and copy the address.
4) It remains to register the place of embedding.
There are several options here.
Option 1. Open incoming webhooks, throw a bind request (you can just open it in a browser).
https://dev.1c-bitrix.ru/rest_help/application_emb...

{{url вебхука, который вам выдали}}/placement.bind?PLACEMENT=TASK_VIEW_TAB&HANDLER={{адрес из шага 3}}&TITLE={{My awesome APP}}

Option 2. In our application, using the B24 JS library, we register the handler using the BX24.callMethod method. In the same place, you can immediately specify HANDLER as the current url of the iFrame.
Option 3. Take my index.html and placements.js files, add the page to be displayed to them (for example, my-awesome-page.html). We archive it all and at step 1 - fill in this archive.
Then my page will open in the application. There are 3 buttons on it - register a placement, delete a placement, display a list of current placements in the console.
Click "add" - specify PLACEMENT ( embedding location code ), HANDLER (address of the page to be embedded - i.e. iFrame address + /my-awesome-page.html), TITLE.
Code (html - index.html, js - placements.js) In CODEPEN - doesn't work! Only when launched from under Bitrix24:

Here you can see how the placements are registered (but better not, because bad code)
5) Done. Let's go check.