機械翻訳について

モーダル・ウィンドウ操作

外部アプリケーションを使用すると、モーダル・ウィンドウまたはポップアップ・ウィンドウを開くことができます。 モーダルおよびポップアップ操作は、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(); 
}