Hello everyone! MySklad Marketplace is on air. The last time we talked about how we launched marketpleys applications in SaaS-service MoySklad . Today we will continue about how we enable applications to extend the user interface of the service. Probably, many have come across in desktop applications with similar plugins, which, when connected, add some of their own buttons, menu items and even whole sets of new windows and dialogs to the application, and also embed their own UI blocks into existing screens. How do you do this in a SaaS service that has a browser UI?
Why embed in UI at all?
At the start of the Marketplace for general-purpose applications, the only available way to integrate applications with MyStore is data integration via a common JSON API . Through this API, the backend of vendor applications can receive and modify user data. Thus, at the start, we only had the ability to integrate application backends and MyStore with each other. They could not add a button or widget to the application editing form.
Initially, it was clear that this was not enough to provide the ultimate user experience for end users. On the other hand, external developers and integrators had to collective farm their mechanisms in the UI - they had a choice either to embed directly into the HTML web applications of MyStore through browser plugins or to make separate interfaces (UI) on their side, largely duplicating the functionality of the screens in MyStore (for example, document lists with filters).
, — , ( ). — , , . , () , .
, , UI- — must have , .
— — iframe . , , . .
UI- -.
.
, , SaaS-.
. UI, .
:
:
,
:
. . , , ( ) UI ( ) (UX).
. . , , , “” .
/ . , UI — SPA, : DOM- , UI — . , .
?
SaaS- (Jira, Salesforce, Zendesk) (amoCRM, 24, InSales). .
:
: SPA - ?
- (- , iframe ), , SDK ( UI)?
, ?
. , / .
. , .
, SPA- “” SPA (“” — , , UI SPA, - — ). UI — SPA.
iframe’. :
iframe , ( , — ). sandbox iframe’a
allow-same-origin
, DOM - . - , , JavaScript-. ().
iframe (
allow-same-origin
) — , DOM- - . . - postMessage, , , , JavaScript- - . , postMessage JS SDK — JavaScript-.
JS SDK. JS SDK API , API “” postMessage JavaScript-.
amoCRM, DOM- -. , , , — , UI. , . , , , - .
(, ) — JSON- (). XML — XML- ( JSON-). XML JSON’a — .
XML-
, , :
<ServerApplication xmlns="https://online.moysklad.ru/xml/ns/appstore/app/v2"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://online.moysklad.ru/xml/ns/appstore/app/v2
https://online.moysklad.ru/xml/ns/appstore/app/v2/application-v2.xsd">
<iframe>
<sourceUrl>https://example.com/iframe.html</sourceUrl>
<expand>true</expand>
</iframe>
<vendorApi>
<endpointBase>https://example.com/dummy-app</endpointBase>
</vendorApi>
<access>
<resource>https://online.moysklad.ru/api/remap/1.2</resource>
<scope>admin</scope>
</access>
<widgets>
<entity.counterparty.edit>
<sourceUrl>https://example.com/widget.php</sourceUrl>
<height>
<fixed>150px</fixed>
</height>
<supports>
<open-feedback/>
<save-handler/>
</supports>
<uses>
<good-folder-selector/>
</uses>
</entity.counterparty.edit>
</widgets>
<popups>
<popup>
<name>somePopup</name>
<sourceUrl>https://example.com/popup.php</sourceUrl>
</popup>
<popup>
<name>somePopup2</name>
<sourceUrl>https://example.com/popup-2.php</sourceUrl>
</popup>
</popups>
</ServerApplication>
, XML, JSON? , XML — XML Schema. JSON — , JSON Schema. JSON- ( XML-) , , IDE. , JSON- . , XML- . JSON-, , XML JSON , XML- .
? :
, . , , , - . — .
code completion IDE “ ” UI . - ( ), .
, , Intellij IDEA , :
IDE open-feedback ( - ):
:
.
XML-
( ) . , ( ) . — . , . , . . . .
. , . , — , , , , , , - . , , - , . .
, XML-:
<widgets>
<some.extension.point1>...</some.extension.point1>
<some.extension.point2>...</some.extension.point2>
</widgets>
, , :
<widgets>
<widget location="some.extension.point1">...</widget>
<widget location="some.extension.point2">...</widget>
</widgets>
XML- (“”) . - “” — . , XML-, XML-.
? , , ?
:
<document.customerorder.edit>
<sourceUrl>https://example.com/widget.php</sourceUrl>
<height>
<fixed>150px</fixed>
</height>
<supports>...</supports>
<uses>...</uses>
</document.customerorder.edit>
sourceUrl
height
. sourceUrl
iframe, height
( , — , , UI).
( ) - (, , ), , <height><dynamic/></height>
. — . , , <dynamic/>
, .
supports
uses
. .
( API , ):
:
<document.customerorder.edit>
<sourceUrl>https://example.com/widget.php</sourceUrl>
<height>
<fixed>150px</fixed>
</height>
<supports>
<open-feedback/>
<save-handler/>
<change-handler>
<expand>agent</expand>
<expand>positions.assortment</expand>
</change-handler>
</supports>
<uses>
<good-folder-selector/>
</uses>
</document.customerorder.edit>
.
— , UI , . , HTTP postMesssage. .
.
— , / ( ). . , sourceUrl
height
, iframe HTTP - postMessage- Open
.
DOM- :
Open
:
{
"name": "Open",
"messageId": 12345,
"extensionPoint": "entity.counterparty.edit",
"objectId": "8e9512f3-111b-11ea-0a80-02a2000a3c9c",
"displayMode": "expanded"
}
— ( ) , . supports
( ). .
supports
. .
pen-feedback
( ) — , , , OpenFeedback
. , . - , .
:
OpenFeedback
:
{
"name": "OpenFeedback",
"correlationId": 12345
}
save-handler
( ) — , - “” Save
.
Save
:
{
"name": "Save",
"messageId": 32109,
"extensionPoint": "entity.counterparty.edit",
"objectId": "8e9512f3-111b-11ea-0a80-02a2000a3c9c"
}
hange-handler
( ) — , , , ( ). , change-handler
, - “” — - (, ) - Change
JSON . expand
, JSON API ( change-handler
expand
).
— , - . . uses ( ). , -> - -.
— good-folder-selector
. . :
1. - SelectGoodFolderRequest
(, - ):
{
"name": "SelectGoodFolderRequest",
"messageId": 12345
}
2. - :
3. - SelectGoodFolderResponse
:
{
"name": "SelectGoodFolderResponse",
"correlationId": 12345,
"selected": true,
"goodFolderId": "8e9512f3-111b-11ea-0a80-02a2000a3c9c"
}
:
, .
XML- , ( ).
/ , . : , , - , , , .
, -. , change-handler, - , ( SPA- ).
(, - Init postMessage, iframe. , , ( ), (, ). , , — , - , ( ). , .
?
?
. - , . - . . iframe, . postMessage- -. .
change-handler
. — update
, -.
:
“” postMessage JavaScript/TypeScript Widget SDK
UI- ( ) — , :
,
UI
RESP API Widget SDK
UI — SaaS- , .
— email- , , .