In prior lessons, we've demonstrated applications that incorporate custom interfaces within the left menu of Bitrix24 or register widgets in different embed locations.
Additionally, we've demonstrated the use of event handlers on the app side in response to changes within Bitrix24.
The final scenario for full interactivity in applications is how to efficiently update the user interface of the app, opened in Bitrix24, in the event of changes taking place on the server side of the app.
Real-time interactivity in applications
6 min
Press the "New Application" button. Again, choose the primary region for the solution's future deployment. Within the solution form, click the "Create" button and select the "Use REST API" option. Ensure that the "Instant System Messages" scope is included in the list.
Download the example provided in the tutorial and upload it to your server as previously demonstrated in previous lessons on local integrations.
Input the paths to the uploaded application in the version form, as previously instructed. Copy the values of the client_id and client_secret fields and paste them into the respective constants in the settings.php file.
Accessibility from an external network
Please be aware that it is critical for the address of the uploaded example to be accessible from the external network, without restrictions such as localhost or self-signed SSL certificates. Ensure the availability of your URL by using third-party services, rather than relying solely on successful opening in your browser.
This page will allow for the installation of the application in our Bitrix24 for testing before publication on Bitrix24.Market.
Enter the address of your Bitrix24 portal, where you have administrator privileges, and press "Install."
This will redirect you to the portal and open the application installation interface. The installation will appear more polished and professional upon publication in Bitrix24.Market, including filling out descriptions and attaching screenshots, but for now, we simply need to confirm the application's technical functionality.
Bitrix24 will automatically open the app after the installation is complete as our application has a user interface.
We can now observe that our index.php is currently open within the Bitrix24 slider frame.
Open another browser and input the file from the example external.php in its address bar. This file serves as a demonstration of an external system that can communicate with our Bitrix24 portal through REST API. One may click upon any cell within the table and alter its hue. The status of a corresponding cell within the table is updated in real-time within the application's open slider. Observe the workings of this phenomenon.
First, let us consider the external file.
It houses a simplistic handler for cell clicks within the table, which not only toggles its class but also initiates an AJAX call to the inform_app.php file, transmitting the identifier and status of the clicked cell.
In response, the inform_app.php file, having received the request, invokes the singular method of pull.application.event.add with only two parameters:
- COMMAND - a string designating the command to be forwarded to the application,
- PARAMS - an array of parameters to be transmitted at the discretion of the developer.
The final segment of code is implemented in the index.php file. This includes two crucial JS libraries, enabling us to effortlessly carry out the subsequent steps.
The page layout features an identical table. A smattering of JavaScript code follows.
We first initialize the ready PullClient of Bitrix24. The correct formation of two parameters is critical.
The first is restApplication, for which we require a unique identifier linked to the specific portal and the application. The example achieves this by merging the invented prefix with the portal's unique system identifier.
The second parameter is the identifier of the current user accessing the application interface, obtained by calling the profile method in the example.
The client is ready, and we merely need to subscribe to receive notifications. This transpires in the callback function, which will receive the data transmitted from inform_app via the REST API query. The logic is straightforward. Upon receiving the GRID_UPDATE command, we proceed to add or remove the specified cell's class.
Let us once more observe the example, this time with open browser consoles in both pages.
Upon clicking a cell in the right browser hosting the external file, we see which cell was selected and the response from inform_app, which returns the result of the REST API query without error. Conversely, in the left browser console, with the application interface open within Bitrix24, we can see which command was received and its accompanying parameters.
Thus, one may now understand how to work with interactivity in Bitrix24 applications and create user-friendly interfaces that display real-time data without requiring a full page reload.
Resources
Lesson materials:
- Example example30.zip
- SDK CRest visit
- REST API Guide read
- Developer's area visit