Examples

Implementation example

This section describes an example, where a web client is embedded in a web page. It is provided for reference only to show all embodiment capabilities. It is not intended to pursue a specific task.

It demonstrates the following:

The way an element to be used by a web client has to be specified in.
Minimum actions to be performed on the web site side, so that a web client can be started and interact with an external web site.
Minimum actions to be performed on the application side for it to be able to operate inside and interact with an external web site.

To follow this example, you need to have a web server with a demo web page and a web client. An application used for demonstration purposes consists of a single data processor defined as home page work area form. In this data processor form, create MessageToExternalSite command. It is available in the data processor form (MessageToExternalSite button). A form module specifies the following code in 1C:Enterprise language:

&OnClient
MessageToExternalSite(Command) procedure
 If ExternalSiteWindow.Available,
   MessageToSite = New MessageToExternalSite("Message from Web Client");
   ExternalSiteWindow.SendMessage(MessageToSite);
 EndIf;         
EndProcedure
 
&OnClient
Procedure OnOpen(Cancel)
 If ExternalSiteWindow.Available,
   EventHandler = New NotificationDetails("OnReceiptMessageFromExternalSite", ThisObject);
   ExternalSiteWindow.EnableMessageHandler(EventHandler);
 EndIf;         
EndProcedure
 
&OnClient
OnClosing(EndOfOperation) procedure
 If ExternalSiteWindow.Available,
   EventHandler = New NotificationDetails("OnReceiptMessageFromExternalSite", ThisObject);
   ExternalSiteWindow.DisableMessageHandler(EventHandler);
 EndIf;         
EndProcedure
 
&OnClient
OnReceiptOfMessageFromExternalSite(Message, AdditionalParameters) Export procedure
 Notify(Message.Data);
EndProcedure

An application must be published on the webserver. Save the publication address to further insert it on the demo web page.

An application is integrated with a web page being as follows:

<!DOCTYPE html>
<html>
 
<head>
 <meta charset="utf-8" />
 <script src="%WebSiteURL%/%InfobaseName%/scripts/webclient1ce.js"></script>
</head>
 
<body onload="init();">
 <div id="webClientContainer"></div>
 <button onclick="messageToWebClient();">MessageToWebClient</button>
 <div id="webClientMessageArea"></div>
 <script>
   var webClient = null;
   var onWebClientMessage = function (message, origin) {
    if (origin === '%WebSiteURL%') {
       document.querySelector('#webClientMessageArea').innerText = message;
     }
    };
 
   var messageToWebClient = function () {
    webClient.postMessage("It's message sent by an external site");
   };
 
   var init = function () {
    webClient = new WebClient1CE('webClientContainer',
    {
     webClientURL: '%WebSiteURL%/%InfobaseName%?MainWindowsMode=EmbeddedWorkplace',
     width: '600px',
     height: '400px',
     events:
     {
       onMessage: onWebClientMessage
     }
    });
   };
 </script>
</body>
 
</html>

For this web page to be operable, do the following:

Replace %WebSiteURL% with URL of your web site (protocol, domain, and port) where a web client is published.
Replace %InfobaseName% with the name of your Infobase being published (as specified in Name field of web server publication dialog box).

Specifically, if a web client is published at http://mysite.org/dbName, replace pseudovariables as follows:

%WebSiteURL% is replaced with http://mysite.org.
%InfobaseName% is replaced with dbName.

Let's take a closer look at operations performed on this web page.

<script> loads a script implementing Embedded WebClient API.
As soon as a web page body is loaded, init() handler is triggered, which is defined as onload event handler for body element.
<div id="webClientContainer"></div> line defines <div> element, where a web client is embedded.
init() handler creates WebClient1CE object. A wizard is sent <div> element ID (webClientContainer in the above example). Moreover, so far as init() handler is concerned:
- A web client receives a startup command line where it is specified that a web client has to be started in Embedded Workplace main window mode.
- For <iframe> element where a web client is expected to operate, width of 600 px and height of 400 px is set. These parameters are optional. Instead, either size by default or any other method of display area size assignment can be used for <iframe> (for example, CSS).
- onMessageevent handler is registered to accept messages from the web client. This event will be handled in onWebClientMessage() (see above).
<button onclick="messageToWebClient();">MessageToWebClient</button> line creates a button on a web page, which once pressed brings a web client to send a message with the following text: It's a message from an external website. The said message is sent from messageToWebClient() handler connected to onclick event of that button.
<div id="webClientMessageArea"></div> line describes an area, where a web client message is displayed (from onMessage event handler).

Numbers refer to the following:

Whenever Message to an external website is pressed, Message from a web client is displayed below Message to a web client.
Whenever Message to a web client is pressed, It's a message from an external website is displayed in the web client messages panel.

Web client operates in iframe refers to data processor form representation where the text is defined in 1C:Enterprise language. In your header instead of this text, a message will be displayed which is defined in the form of your Infobase.

if (origin === '%WebSIteURL%') condition is generally required to be present on a page if one handler is used for several applications embedded in a single page. As such, it is needed to identify a web client sending a message.

Web client startup command line defined upon webClientURL property initialization: webClientURL: '%WebSiteURL%/%InfobaseName%?MainWindowsMode=EmbeddedWorkplace', can specify authentication parameters. For instance, if a user runs authentication on a web page (or web site in general), and a web page can unambiguously convert the website user name into username and password for an application. As such, a web client startup line has to be placed in a variable which needs to be generated before a web client embedded in a web page is started.

In conclusion, it should be noted as follows. When you load a web client, a screen saver, and loading progress bar are displayed. If a web client is embedded in a web page, a screen saver, and loading progress bar are displayed in a similar container, where a web client is embedded. If there is no need to do this, you can manage the visibility of a web page area using visibility CSS property. Thus, a line intended to define a container for a web client on a web page will be as follows:

<div id="webClientContainer" style="visibility: hidden"></div>

To make a container visible, register a function to process onStart event received from the web client:

events:
{
 onStart: onStartWebClient,
 onMessage: onWebClientMessage
}

Further, write this function (next to onWebClientMessage()):

var onStartWebClient = function ()
{
 document.querySelector('#webClientContainer').style.visibility = "visible";
};

As soon as the said modifications are made, when a web client is loaded, a web page displays no information. When loading is completed, a web page displays an application interface immediately.

Examples

Implementation example

Download brochures