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:
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.
Popup normally looks like this:
The project:
Thank you very much.
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.My components rendered in an invisible iframe
- barrydegraaff
- Zimbra Employee
- Posts: 242
- Joined: Tue Jun 17, 2014 3:31 am
- Contact:
Re: My components rendered in an invisible iframe
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
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/
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/
Re: My components rendered in an invisible iframe
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:
FileManager separated (how it should work). "yarn start" to deploy dev-server:
Thank you!
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:
FileManager separated (how it should work). "yarn start" to deploy dev-server:
Thank you!
- barrydegraaff
- Zimbra Employee
- Posts: 242
- Joined: Tue Jun 17, 2014 3:31 am
- Contact:
Re: My components rendered in an invisible iframe
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
and in the style.less https://github.com/Zimbra/zimbra-zimlet ... style.less
Please take a look at the example Zimlets at https://wiki.zimbra.com/wiki/DevelopersGuide if you have not done so already, thanks!
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>)
Code: Select all
.XSpamZimlet{
background-color:#f2f2f2;
margin:20px;
padding:10px;
font-family:monospace;
font-size:10px;
}
--
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/
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/
Re: My components rendered in an invisible iframe
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. It works without Zimbra, but doesn't withbarrydegraaff 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.
- barrydegraaff
- Zimbra Employee
- Posts: 242
- Joined: Tue Jun 17, 2014 3:31 am
- Contact:
Re: My components rendered in an invisible iframe
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.
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/
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/
Re: My components rendered in an invisible iframe
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.