HTML5 Opening a Modal Dialog from Extension?

Report · Apr 21, 2014

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

Report · Apr 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

Report · Apr 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

Report · Apr 22, 2014

Hi Nate,

while we wait for official information by the EB team, there's this function in the CSInterface.js lib (you may already know it):

/**
 * Loads and launches another extension, or activates the extension if it is already loaded.
 *

 * @param extensionId       The extension's unique identifier.
 * @param startupParams     Not currently used, pass "".
 *

 * @example
 * To launch the extension "help" with ID "HLP" from this extension, call: 
* requestOpenExtension("HLP", ""); 
 *
 */
CSInterface.prototype.requestOpenExtension = function(extensionId, params)
{
    
  window.__adobe_cep__.requestOpenExtension(extensionId, params);
};

It seems that by now you can't exchange data between the two.

Regards

Davide Barranca

---

www.davidebarranca.com

www.cs-extensions.com

Report · Apr 22, 2014

Thanks Davide,

That function is definitely helpful, might solve one of the cases I need this window for.

But beyond the one use case I have in mind that could be solved that way, I'm hoping opening Windows is in there already and just not documented.

Cheers,

Nate

Report · Apr 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

Report · Apr 29, 2014

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

Report · Apr 29, 2014

Hi Jun,

Thanks for the information! I was thinking it'd be something like this, but I was hoping that we'd still be able to bundle the panel and related dialogs/panels in a single extension. Now I know that I should proceed with splitting our existing projects into separate extensions that communicate via CSXS events.

Is there a way to control menu placement in Extension Builder 3 as there was in CS Extension Builder? I haven't tried this yet, but it'd be a reasonable way to put related extensions on a custom submenu.

Thanks,

Ole

Report · May 03, 2014

Re: Is there a way to control menu placement in Extension Builder 3 as there was in CS Extension Builder?

Can you describe how you did it in CS Extension Builder? Is it for InDesign only, or for all point products?

Report · Oct 12, 2016

Hi,

I am also trying to create two panels from a single adobe HTML5 extension,

Since this post is two years old, Is there a way to achieve this now, with out creating another extension.

Has Aobe has provided any API to do this?

Harshin

Report · Oct 13, 2016

Hi,
unfortunately, they didn't provide us with this thing but Adobe provided new good features "Set Title" and "Resize" that can be used on fly.
It is very good because I had a problem with hidden menu. Windows didn't have a title. Now Adobe alows us to set title for windows from code.

To set title:

var csi= new CSInterface();
csi.setWindowTitle("title");

Now i'm working on extension with 3 panels.

Dialogs:

In my project i created "helper extension" that can communicate with other extension by events. "Helper extension" shows dialogs and returns results (confermation, authorizaton, preloaders and other).
Also you can use .jsx (scripts) to create dialogs and preloaders but i think that "helper extension" is more powerful and flexible thing.

Communication:

For communication between panels i use Vulcan.

Shared data:

Also i had a big problem with Shared Data between panels. I created good library to have shared data. And now I dont have problems with different panels.

I have 2 libraries. The first was based on Events. The second was based on local data. I use the second lib. It works like NoSql DB.

Gain more functionality:

And you can use C++ to gain more fearures. You will have HTML interface and C++ plugin on background that can do a lot of things. I will use C++ for security, managment of menu, working with layers' data, converting images and for other things.

If you want, i can give you my libraries for free. Or we can discuss issues and C++ plugin. You can text me personally.

Report · Nov 22, 2016

Hi Avenser,

I am creating an extension for InDesign CC2015 and did not want it to show its menu in the the Windows>Extension so i removed the <Menu> entry from the manifest, all works well but the setWindowTitle method does not work for me.

Could you please guide if i am missing something. If i place the Menu tag back in the manifest and call csi.getWindowTitle(), it returns a blank value.

Thanks for your help in advance.

-Manan

Report · Dec 04, 2016

Hi Manan,

I tried to reproduce this feature in InDesign 2017. It looks like a bug. I was able to set title only for ModalDialog window and for Modeless window. But also i was able to get title from Panel, ModalDialog and Modeless.

I tested it with this example from Adobe.

CEP-Resources/CEP_7.x/Samples/CEP_HTML_Test_Extension-7.0 at master · Adobe-CEP/CEP-Resources · GitH...

Try to test setting of a title with this example.

It hope that it will be usefull for you.

Also, i tried to set title of a panel in Adobe Illustrator - it works well.
You can try to create C++ plugin that will be able to communicate with your html extension by CSEvents. MAY BE С++ plugin will be able to change a title of your extension.

- Sergey

Report · Dec 04, 2016

Thanks Avenser, i will try on CC2017 as well and compare the results with 2015. Regarding C++ plugin do you intend to say that i raise an event whose handler(in JS) calls the setWindowTitle in HTML code, i can try that but not very sure as to how different would this approach be from the one of writing the code totally in JS for this feature.

Anyhow thanks for taking out time and giving some pointers i will investigate on these lines and post my comments if i get some interesting results.

Cheers

-Manan

Report · Mar 11, 2018

Hi Avenser

I have a HTML5 extension and filter plugin for Adobe Photoshop. I tried to communicate between C++ plugin and HTML5 using events but I am not able to do so. Please guide.

Report · Jul 24, 2014

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

1) Add new extension to <ExtensionList>

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

</ExtensionList>

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

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

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

</Resources>

</Lifecycle>

<UI>

<Type>Panel</Type>

<Menu>TestHTMLPlugin</Menu>

<Size>

</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.pd... - page 46):

</HostList>

</Extension>

</HostList>

</Extension>

</HostList>

</Extension>

</HostList>

</Extension>

</ExtensionList>

Report · Nov 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.

Report · Jul 09, 2018

Hi Avenser,

Your point to point approach helped a lot for a beginer like me to get into exact working and understand the flow.

Thanks

Report · Apr 02, 2020

I was testing this behavior and i think I'm going with a second panel for my main panel. One thing to keep in mind, if lifecycle > autovisible is set to false. Then somehow you need to call the function twice??? I was going nuts here. Tried so many options, panel, modal, modeless. All had the same behavior. I set it to false because my panel somehow doesn't show its content unless i start scrolling??? Still working on that issue, for hours already 😞

<Lifecycle>
   <AutoVisible>true</AutoVisible>
</Lifecycle>

Report · Apr 02, 2020

Does anyone know why an iamge in a panel wont show when it has width: 100%?
Im testing some possibilities with using a second panel to show some guides and videos. In the panel i use a long PNG file with all shortcut combos. But the panel wont show anything until i start scrolling it does show the image when it does have any setting. But the image is downscaled because of display resolution differences.

I have no clue whats going on here. I noticed the same effect on art panels when i use with: 100%

Im using CEP7 with CS 2018

Adobe Community

HTML5 Opening a Modal Dialog from Extension?

1 Correct answer