My components rendered in an invisible iframe

Have a great idea for extending Zimbra? Share ideas, ask questions, contribute, and get feedback.
Post Reply
flower
Posts: 7
Joined: Mon Apr 20, 2020 11:00 am

My components rendered in an invisible iframe

Post by flower »

Hello! I am trying to implement an external component into Zimlet's context. To be more precise, I want to use the out-of-the-box library DevExpress. It has components like FileManager/Popup (replacement for vanilla's Modal) that I'm gonna use. But the problem is I cannot understand how to "inject" it into. When I am using text-only-to-render component all is ok, but when I am using DevExpress components, it wraps in an invisible iframe:
covered-in-iframe.png
covered-in-iframe.png (59.82 KiB) Viewed 15210 times
Maybe encapsulating the user's component into an iframe is a good idea, but I don't understand how to "show" my component. I think there is a workaround/solution I haven't found in documentation.

I made a small project illustrating the use of using the Popup component in the modal window with some text. To activate the trigger you need to open new email creation tab and click to the attach button. After this you can see Popup rendered in invisible iframe.
activate-popup.png
activate-popup.png (19.7 KiB) Viewed 15210 times
Popup normally looks like this:
popup-example.png
popup-example.png (10.16 KiB) Viewed 15210 times
The project:
PopupProject.zip
(147.29 KiB) Downloaded 801 times
Thank you very much.
User avatar
barrydegraaff
Zimbra Employee
Zimbra Employee
Posts: 242
Joined: Tue Jun 17, 2014 3:31 am
Contact:

Re: My components rendered in an invisible iframe

Post by barrydegraaff »

Why not use the Modal Dialog that is available in Zimbra?

You can use this example:
https://github.com/Zimbra/zimbra-zimlet ... dex.js#L88

Regards, Barry
--
Barry de Graaff
Email: barry.degraaff [at] synacor [dot] com
Admin of Zimbra-Community Github: https://github.com/orgs/Zimbra-Community/ and the
Zimlet Gallery https://gallery.zetalliance.org/extend/
flower
Posts: 7
Joined: Mon Apr 20, 2020 11:00 am

Re: My components rendered in an invisible iframe

Post by flower »

Yes, I've tried (and trying) to do it with vanila Modal :) But I faced with the two problems:
1) some css styles applied incorrectly
2) javascript events doesn't works at all. FileManager component doesn't react to any user action.

I suspect problem with styles is about css rules clashing. I am trying to investigate this by myself, but you know Zimbra engine much better than I, maybe you can speed up my efforts here.

Just thought. Would be ideal to create a container without any Zimbra styles and put it into the Modal container - almost iframe, but with the context. Since I gonna use an external library, I think it would be great idea to isolate them.

Zimbra+FileManager:
FileManagerProject.zip
(150.29 KiB) Downloaded 184 times
FileManager separated (how it should work). "yarn start" to deploy dev-server:
DXFileManager.zip
(494.72 KiB) Downloaded 168 times
Thank you!
User avatar
barrydegraaff
Zimbra Employee
Zimbra Employee
Posts: 242
Joined: Tue Jun 17, 2014 3:31 am
Contact:

Re: My components rendered in an invisible iframe

Post by barrydegraaff »

2. If you need a specific Javascript event, you can try getting it from window.parent.document, we may drop support for that in the future, but it may work for you now.

1. You have a styles.css and a styles.less in your project, I recommend you only use .css OR .less, but not both.

Example on how it works is at:
https://github.com/Zimbra/zimbra-zimlet ... u/index.js

Code: Select all

import style from './style';
...
return (<div class={style.XSpamZimlet} id="XSpamZimlet">{this.state.header}</div>)
and in the style.less https://github.com/Zimbra/zimbra-zimlet ... style.less

Code: Select all

.XSpamZimlet{
   background-color:#f2f2f2;
   margin:20px;
   padding:10px;
   font-family:monospace;
   font-size:10px;
}
Please take a look at the example Zimlets at https://wiki.zimbra.com/wiki/DevelopersGuide if you have not done so already, thanks!
--
Barry de Graaff
Email: barry.degraaff [at] synacor [dot] com
Admin of Zimbra-Community Github: https://github.com/orgs/Zimbra-Community/ and the
Zimlet Gallery https://gallery.zetalliance.org/extend/
flower
Posts: 7
Joined: Mon Apr 20, 2020 11:00 am

Re: My components rendered in an invisible iframe

Post by flower »

barrydegraaff wrote:2. If you need a specific Javascript event, you can try getting it from window.parent.document, we may drop support for that in the future, but it may work for you now.
No, I need that FileManager component will be reacting as intended. For example, when you click on the right mouse button in the component's area, you should see a context menu. But nothing happened.
ContextMenu.png
ContextMenu.png (10.04 KiB) Viewed 14210 times
It works without Zimbra, but doesn't with :(
User avatar
barrydegraaff
Zimbra Employee
Zimbra Employee
Posts: 242
Joined: Tue Jun 17, 2014 3:31 am
Contact:

Re: My components rendered in an invisible iframe

Post by barrydegraaff »

In google chrome hit F12 to open developer tools, check console and issues tab.

But yeah, third party libraries can be problematic, especially if there not npm/react proof. Anyways, I do not have the time right now to debug that for you.
--
Barry de Graaff
Email: barry.degraaff [at] synacor [dot] com
Admin of Zimbra-Community Github: https://github.com/orgs/Zimbra-Community/ and the
Zimlet Gallery https://gallery.zetalliance.org/extend/
flower
Posts: 7
Joined: Mon Apr 20, 2020 11:00 am

Re: My components rendered in an invisible iframe

Post by flower »

Ok, thank for your help. Can you please notify me when you will have time for debugging closely? Until it I gonna try to solve it by myself.
Post Reply