Skip to main content
Nate Beck
Nate Beck
Known Participant
April 21, 2014
Answered

HTML5 Opening a Modal Dialog from Extension?

  • April 21, 2014
  • 2 replies
  • 13916 views

In our currently Flash / Flex extension we can do the follow:

var win:Window = new Window();
win.type = CSXSWindowType.MODAL_DIALOG;
win.open();

I can't seem to find an equivilant in the new API.  We simply need to create a new Modal window and set its contents.  Is this possible to do?

We use this to display about information, settings menus, etc for the extension.

Cheers,

Nate

    This topic has been closed for replies.
    Correct answer jun xia

    Hi Nate, Davide,

    I've come to the same conclusion as Davide--that there's not a way to open a modal window from within a panel.

    It would be really great if someone from Adobe could comment on this officially, especially since this seems to be (further) functionality we've lost in the switch from CS Extension Builder.

    Thanks,

    Ole


    Hi,

    Thanks for all the comments.

    Yes, as what Davide figured out, it's by design that sub modal/modeless dialogs can not be opened in Html panel and Davide's workarounds should work fine.

    1. Use Bootstrap modal dialog.

    2. Use CSInterface.prototype.requestOpenExtension to open another extension with type of modal/modeless dialog, and use CSXS event to communicate betweeen the extensions. Please refer to CSInterface.prototype.addEventListener and CSInterface.prototype.dispatchEvent, like snippet below:

    var csInterface = new CSInterface();
    csInterface.addEventListener(“com.adobe.cep.test”, function (event)
        {
           console.log(“type=” + event.type + “, data=” + event.data);
        }
    );
    var csInterface = new CSInterface();
    var event = new CSEvent("com.adobe.cep.test", "APPLICATION");
    event.data = "This is a test!";
    cSInterface.dispatchEvent(event);

    Regards,

    Jun

    2 replies

    Avenser
    Avenser
    Participating Frequently
    July 24, 2014

    Hello, to open new window you need to edit "Manifest.xml".

    1) Add new extension to <ExtensionList>

    <ExtensionList>

      <Extension Id="com.example.TestHTMLPlugin.extension1" Version="1.0" />

      <Extension Id="com.example.TestHTMLPlugin.test" Version="1.0" />

    </ExtensionList>

    2) Add extension description for second extension, to <DispatchInfoList> with link to "./Test.html"

    <DispatchInfoList>

      <Extension Id="com.example.TestHTMLPlugin.extension1">

      <DispatchInfo >

      <Resources>

      <MainPath>./index.html</MainPath>

      <ScriptPath>./TestHTMLPlugin.jsx</ScriptPath>

      </Resources>

      <Lifecycle>

      <AutoVisible>true</AutoVisible>

      </Lifecycle>

      <UI>

      <Type>Panel</Type>

      <Menu>TestHTMLPlugin</Menu>

      <Geometry>

      <Size>

      <Height>400</Height>

      <Width>370</Width>

      </Size>

      </Geometry>

      </UI>

      </DispatchInfo>

      </Extension>

      <Extension Id="com.example.TestHTMLPlugin.test">

      <DispatchInfo >

      <Resources>

      <MainPath>./test.html</MainPath>

      <ScriptPath>./TestHTMLPlugin.jsx</ScriptPath>

      </Resources>

      <Lifecycle>

      <AutoVisible>true</AutoVisible>

      </Lifecycle>

      <UI>

      <Type>Panel</Type>

      <Menu>TestExt</Menu>

      <Geometry>

      <Size>

      <Height>400</Height>

      <Width>370</Width>

      </Size>

      </Geometry>

      </UI>

      </DispatchInfo>

      </Extension>

    </DispatchInfoList>

    3) Call next code to open extension:

    var extensin_Id = "com.example.TestHTMLPlugin.test";

    var params = {};

    window.__adobe_cep__.requestOpenExtension(extensin_Id , params );

    You can change type of extension in manifest.xml. In this example will be open Panel. If you set "ModalDialog" it's will be Modal Dialog Window. If you set "Modeless" it's will be Window.

    if you want to set remote debuging in chrome? you need to edit ".debug" file like in this example (from http://wwwimages.adobe.com/content/dam/Adobe/en/devnet/cs-extension-builder/pdfs/CC_Extension_SDK.pdf  - page 46):

    <ExtensionList>

    <Extension Id="com.adobe.CEPHTMLTEST.Panel1">

    <HostList>

    <Host Name="PHXS" Port="8000"/>

    <Host Name="IDSN" Port="8001"/>

    <Host Name="AICY" Port="8002"/>

    <Host Name="ILST" Port="8003"/>

    <Host Name="PPRO" Port="8004"/>

    <Host Name="PRLD" Port="8005"/>

    <Host Name="FLPR" Port="8006"/>

    </HostList>

    </Extension>

    <Extension Id="com.adobe.CEPHTMLTEST.Panel2">

    <HostList>

    <Host Name="PHXS" Port="8100"/>

    <Host Name="IDSN" Port="8101"/>

    <Host Name="AICY" Port="8102"/>

    <Host Name="ILST" Port="8103"/>

    <Host Name="PPRO" Port="8104"/>

    <Host Name="PRLD" Port="8105"/>

    <Host Name="FLPR" Port="8106"/>

    </HostList>

    </Extension>

    <Extension Id="com.adobe.CEPHTMLTEST.ModalDialog">

    <HostList>

    <Host Name="PHXS" Port="8200"/>

    <Host Name="IDSN" Port="8201"/>

    <Host Name="AICY" Port="8202"/>

    <Host Name="ILST" Port="8203"/>

    <Host Name="PPRO" Port="8204"/>

    <Host Name="PRLD" Port="8205"/>

    <Host Name="FLPR" Port="8206"/>

    </HostList>

    </Extension>

    <Extension Id="com.adobe.CEPHTMLTEST.Modeless">

    <HostList>

    <Host Name="PHXS" Port="8300"/>

    <Host Name="IDSN" Port="8301"/>

    <Host Name="AICY" Port="8302"/>

    <Host Name="ILST" Port="8303"/>

    <Host Name="PPRO" Port="8304"/>

    <Host Name="PRLD" Port="8305"/>

    <Host Name="FLPR" Port="8306"/>

    </HostList>

    </Extension>

    </ExtensionList>

      Giuseppe Lio
      Giuseppe Lio
      New Participant
      November 24, 2014

      Hi Sergey,

      thanks for this trick.

      Just to be complete, by adding the extension, you will also add a "TestExt" item in the "Window/Extensions" menu of the CC application hosting the extensions.

      You should remove the content of the <Menu/> tag to completely hide the extension to users.

      Also, it is not necessary to embed the extension, you could also call another modal (or modeless or panel) dialog extension with the requestOpenExtension method as you described.

      Just be careful to remove the <Menu/> contents to hide the extension to users as described above.

        DBarranca
        DBarranca
        Brainiac
        April 21, 2014

        Hi Nate,

        chances are that I'm wrong, but afaik you can't open modal dialogs in HTML Panels the same way we did in Flash: just switch a view (i.e. link a different html but within the same viewport).

        You could try to use modal dialogs like the Bootstrap ones - never tried myself - but once the HTML Panel width & height are set, that's the real estate we have to stick to (because it seems not yet possible to dynamically set Panel's dimensions.

        As a rude workaround you could have a second extension and call that from your parent extension.

        Others may give you better information, though.

        Best,

        Davide Barranca

        ---

        www.davidebarranca.com

        www.cs-extensions.com

          Nate Beck
          Nate BeckAuthor
          Known Participant
          April 21, 2014

          Thanks for responding Davide.  I really appreciate the tips you've done on cs-extensions.com, and your willingness to help on the forums!

          I'm not talking about a modal window within the Panel.  I'm specifically talking about the CSXSWindowType.Modal.  Which is a separate Window from the extension.  See this image.

          I had thought of the adding another extension of type Modal, but hadn't quite figured out how the two extensions would communicate information, etc.  And as you mentioned, it just seems like a big hack to do it that way. 

          The ability to open windows from an Extension has been in there since the C++ SDK, and was present in Flash Panels.  I'm hoping that we'd have simliar functionality in the HTML5 panels.

          Hopefully someone has some information on this.

          Cheers,

          Nate

          J
          Adobe Employee
          jun xiaCorrect answer
          Adobe Employee
          April 29, 2014

          Hi Nate, Davide,

          I've come to the same conclusion as Davide--that there's not a way to open a modal window from within a panel.

          It would be really great if someone from Adobe could comment on this officially, especially since this seems to be (further) functionality we've lost in the switch from CS Extension Builder.

          Thanks,

          Ole


          Hi,

          Thanks for all the comments.

          Yes, as what Davide figured out, it's by design that sub modal/modeless dialogs can not be opened in Html panel and Davide's workarounds should work fine.

          1. Use Bootstrap modal dialog.

          2. Use CSInterface.prototype.requestOpenExtension to open another extension with type of modal/modeless dialog, and use CSXS event to communicate betweeen the extensions. Please refer to CSInterface.prototype.addEventListener and CSInterface.prototype.dispatchEvent, like snippet below:

          var csInterface = new CSInterface();
          csInterface.addEventListener(“com.adobe.cep.test”, function (event)
              {
                 console.log(“type=” + event.type + “, data=” + event.data);
              }
          );
          var csInterface = new CSInterface();
          var event = new CSEvent("com.adobe.cep.test", "APPLICATION");
          event.data = "This is a test!";
          cSInterface.dispatchEvent(event);

          Regards,

          Jun

            Terms & ConditionsAccessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices