Allow us to demonstrate the integration of your interface into the Bitrix24 task form.
Adding widget to a task form
4 min
Commence by clicking the "New Application" button and selecting the primary region for the solution's future publication. Proceed by clicking the "Create" button and specifying the "Use REST API" type.
Activate the "Add Widgets" option to add "Application Embedding" to the scope list.
Download the example attached to the tutorial, upload it to your server, and insert the paths to the uploaded application into the version form.
Copy the values of the "client_id" and "client_secret" fields and paste them into the corresponding constants in the "settings.php" file.
Accessibility from an external network
Note that the URL of the uploaded example must be accessible from the external network and must not be hosted on localhost or use self-signed SSL certificates. Ensure that the URL is available through third-party services and that the web server supports access from frames, as widgets will not function otherwise.
Inspect the example code, starting with "install.php", where we call the "installApp" method to store the authorization tokens for later use.
These tokens are then immediately utilized to execute the "placement.bind" method. Our example requires only three parameters:
- PLACEMENT - the code of the location where the widget will be placed, in this case the tab in the task form,
- HANDLER - the link to the widget's interface, which will be opened in the frame),
- TITLE - the name of the widget, used as the name of the tab.
Useful
Given that Bitrix24 supports multiple languages and individual users can select their preferred language, it is possible to specify different names for widgets in various languages. Further information on this can be found in the placement.bind method documentation.
Return to the Developer area, where you may install your application to your Bitrix24 for testing before publishing on Bitrix24.Market.
Enter the address of your Bitrix24 portal, where you are an administrator, and click "Install". This will redirect you to the portal and initiate the application installation process. After installation, Bitrix24 will automatically open the application, as it has a user interface.
Useful
If the main functionality of your app is a widget embedded in Bitrix24, you can use the main URL of your application for an onboarding purpose that tells the user about the product functionality and contains some necessary configuration steps.
Navigate to the tasks section and open any available task. You will now observe an additional "My App" tab on the page, which, when clicked, will load your embed handler into the internal frame.
The REQUEST array is purposely displayed to showcase the data sent to your widget by Bitrix24, including the placement code and current task ID. Utilize the "tasks.tasks.get" method to retrieve task data, substituting the task ID obtained from "PLACEMENT_OPTIONS" in the method parameters.
With this information, you may retrieve data about the task's execution time, additional information from a deal or an external system, and more, all centered around the current task.
Resources
Lesson materials:
- Example example23.zip
- SDK CRest visit
- REST API Guide read
- Developer's area visit
- Main embedding locations read