モーダル・ウィンドウ操作
外部アプリケーションを使用すると、モーダル・ウィンドウまたはポップアップ・ウィンドウを開くことができます。 モーダルおよびポップアップ操作は、ModalWindowContextおよびタブ・コンテキストでも機能します。
モーダルとポップアップの相違点は次のとおりです:
- 作成できるモーダルは1つのみです。 ただし、任意の数のポップアップを作成できます。
- モーダルは対話不可で、ポップアップは対話可能です。
ノート: ブラウザ・タブIDを指定してタブ・コンテキストを取得することで、特定のタブでモーダル・ウィンドウ操作を実行できます。 タブ・コンテキストを取得するためのブラウザ・タブIDが指定されていない場合、MCAフローティング・ツールバー・ウィンドウのオープナ・ページ・コンテキストがデフォルトのタブ・コンテキストになります。 モーダル・ウィンドウ操作は、ブラウザ・タブのtabContextでのみサポートされ、「MSIタブ」タブ・コンテキストではサポートされていません。
次のように、UEFプロバイダ・オブジェクトで提供されているgetModalWindowContext APIをコールして、ModalWindowContext を取得できます:
getModalWindowContext(): Promise<IModalWindowContext>;
ModelWindowContextにアクセスする方法は次のとおりです:
const uiEventsFrameworkInstance: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
const modalWindowContext:IModalWindowContext = await getModalWindowContext();
UEFでは、次の4つのModalWindowアクションがサポートされています:
- OpenModal
- CloseModal
- OpenPopup
- ClosePopup
ノート: すべてのモデル・ウィンドウ操作は、グローバル・コンテキストおよびタブ・コンテキストで動作します。
OpenModalモーダル・ウィンドウ・コンテキストでのアクション
TypeScriptの例を次に示します:
const openModal = async () => {
const uiEventsFrameworkInstance: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('app', 'v1');
const modalWindowContext: IModalWindowContext = await uiEventsFrameworkInstance.getModalWindowContext();
const requestObject: IOpenModalWindowRequest = uiEventsFrameworkInstance.requestHelper.createPublishRequest('OpenModal') as IOpenModalWindowRequest;
requestObject.setURL('https://www.wikipedia.org/');
requestObject.setId('modal1');
const response: IModalWindowOperationResponse = await modalWindowContext.publish(requestObject) as IModalWindowOperationResponse;
const id:string = response.getResponseData().getId();
}
JavaScriptの例を次に示します:
const openModal = async () => {
const uiEventsFrameworkInstance = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('app', 'v1');
const modalWindowContext = await uiEventsFrameworkInstance.getModalWindowContext();
const requestObject = uiEventsFrameworkInstance.requestHelper.createPublishRequest('OpenModal');
requestObject.setURL('https://www.wikipedia.org/');
requestObject.setId('modal1');
const response = await modalWindowContext.publish(requestObject);
const id = response.getResponseData().getId();
}
CloseModalモーダル・ウィンドウ・コンテキストでのアクション
TypeScriptの例を次に示します:
const closeModal = async () => {
const uiEventsFrameworkInstance: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
const modalWindowContext: IModalWindowContext = await uiEventsFrameworkInstance.getModalWindowContext();
const requestObject: ICloseModalWindowRequest = uiEventsFrameworkInstance.requestHelper.createPublishRequest('CloseModal') as ICloseModalWindowRequest;
requestObject.setId('modal1');
const response: IModalWindowOperationResponse = await modalWindowContext.publish(requestObject) as IModalWindowOperationResponse;
const id:string = response.getResponseData().getId();
}
JavaScriptの例を次に示します:
const closeModal = async () => {
const uiEventsFrameworkInstance = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
const modalWindowContext = await uiEventsFrameworkInstance.getModalWindowContext();
const requestObject = uiEventsFrameworkInstance.requestHelper.createPublishRequest('CloseModal');
requestObject.setId('modal1');
const response = await modalWindowContext.publish(requestObject);
const id = response.getResponseData().getId();
}
OpenPopupモデル・ウィンドウ・コンテキストでのアクション
TypeScriptの例を次に示します:
const openPopup = async () => {
const uiEventsFrameworkInstance: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
const modalWindowContext: IModalWindowContext = await uiEventsFrameworkInstance.getModalWindowContext();
const requestObject: IOpenPopupWindowRequest = uiEventsFrameworkInstance.requestHelper.createPublishRequest('OpenPopup') as IOpenPopupWindowRequest;
requestObject.setURL('https://www.wikipedia.org/');
requestObject.setId('popup1');
requestObject.setTitle('Test title');
requestObject.setClosable(true);
requestObject.setStyle({width:'1000px', height:'1000px'});
const response: IModalWindowOperationResponse = await modalWindowContext.publish(requestObject) as IModalWindowOperationResponse;
const id:string = response.getResponseData().getId();
}
JavaScriptの例を次に示します:
const openPopup = async () => {
const uiEventsFrameworkInstance = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
const modalWindowContext = await uiEventsFrameworkInstance.getModalWindowContext();
const requestObject = uiEventsFrameworkInstance.requestHelper.createPublishRequest('OpenPopup');
requestObject.setURL('https://www.wikipedia.org/');
requestObject.setId('popup1');
requestObject.setTitle('Test title');
requestObject.setClosable(true);
requestObject.setStyle({width:'1000px', height:'1000px'});
const response = await modalWindowContext.publish(requestObject);
const id = response.getResponseData().getId();
}
ClosePopupモーダル・ウィンドウのコンテキスト
TypeScriptの例を次に示します:
const closePopup = async () => {
const uiEventsFrameworkInstance: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
const modalWindowContext: IModalWindowContext = await uiEventsFrameworkInstance.getModalWindowContext();
const requestObject: IClosePopupWindowRequest = uiEventsFrameworkInstance.requestHelper.createPublishRequest('ClosePopup') as IClosePopupWindowRequest;
requestObject.setId('popup1');
const response: IModalWindowOperationResponse = await modalWindowContext.publish(requestObject) as IModalWindowOperationResponse;
const id:string = response.getResponseData().getId();
}
JavaScriptの例を次に示します:
const closePopup = async () => {
const uiEventsFrameworkInstance = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
const modalWindowContext = await uiEventsFrameworkInstance.getModalWindowContext();
const requestObject = uiEventsFrameworkInstance.requestHelper.createPublishRequest('ClosePopup');
requestObject.setId('popup1');
const response = await modalWindowContext.publish(requestObject);
const id = response.getResponseData().getId();
}