Hi folks, I'm happy to announce a mini app I was working last month for our Avant2 website at Codeoscopic.
It's a widget app that is embedded in our Wordpress based website. The purpose was to upgrade the old visualization we had, since our Avant2 product integrates lots of insurance products from many insurance companies. So the old one was very bloated and cumbersome since it was just composed of static galleries with images of company logos. The new Royale version shows 3 views: One for products, that shows all companies that have that product available in the tool. One for companies, that shows all products available for them. And finally a grid or table visualization with products on X axis and companies on Y axis. There are some particularities about complementary products and more, but I don't think it is interesting for you :). This was even posted in our Companies social networks. To show some: https://twitter.com/Avant2Multi/status/1285511117712826369?s=20 https://www.linkedin.com/feed/update/urn:li:activity:6691276788431130625 Technically: I added some CPT (Custom Post Types) to our Wordpress backend to create the data structures and its relations. Since we integrate more products and companies each month, people in our staff need to add it vía WP admin console to make it easy for them. Then this data is exported via JSON WP Rest API and the Royale widget consumes it vía mx:HTTPService. The widget uses Jewel as UI set (of course ;)), with some theme customization to make it close to avant2 website look and feel. I use Crux as well to handle event handling, IoC, and service (HTTPService) integration. The widget shows the new Responsive additions I added lately, so if you access via Mobile, you should see how size for images and fonts decrease to make all fit nicely in your mobile device. Then for Tablet and Desktop images and fonts increase size to get the correct size. More things! I added a new "extern" library called "royale-html2pdf" that uses the html2pdf js library and exposes it to Royale. The library is used to print the table of products in a PDF on the fly directly from the dynamically generated HTML. This was particularly challenging due to all the security things browsers do today to protect content. So getting the images to show in PDF was a bit challenging even with that library in place. I had to try many, many things to get it finally work. Another thing worth mentioning is the use of "iFrameResizer", that makes the widget behave as if it's part of the page. I started applying scrolls to lists and table components inside the widget app, but that was not the best experience. The problem with iframes is that it is difficult to make it adapt to the host page as height changes, but this JS script does all the magic. So you can see how as you change views in the app, you never get scrollbars inside the iframe, and the rest of the page adapts correctly. The scrollbars are always in the host page. So the experience is more "natural" and the iframe is sized to the app content :). You can check this app live here: https://avant2.es/productos-y-companias/ Also I want the source code be available to all that wants to check it and learn from it: https://github.com/codeoscopic/avant2-website Finally I added the "Powered by" Royale logo at the end of the app, so people can know that was done with our beloved Royale and is in an official company's website. ;-) Also hope to add it to the Royale Showcase Page this summer (and will ask you for the info required to add more apps of course, along our TodoMVC, TDJ, and more!). I still need to continue improving it with some things in the following days, since I detected some issues and as well I think others can be improved. For example I want to add BrowserRouter to it since I think it will be a very good example for it and will complete the example event better. Anyway, today we decided to publish it, since it is in a sufficient good state now. Hope you like it! :) -- Carlos Rovira http://about.me/carlosrovira
