Embed CSS into Wrapper Component / page

  • 1
  • Question
  • Updated 2 years ago
So, I've been working through this issue on this thread, but I thought I would move it to its own.
https://community.skuid.com/skuid/topics/idea-page-to-print-page-to-pdf-page-to-email-page-to-conten...

Thanks to everyone who has helped me so far!!

Our use case: we are using a Skuid detail page with a custom Theme applied.  We've started using Doc Raptor, a 3rd party tool that takes HTML sent to it and converts it to a pdf.  We have a Skuid button that sends the data to Doc Raptor to go into the PDF, and the content to be the pdf is all stored in a Skuid wrapper on the detail page.

Our first problem was that our pdf output would have no CSS applied because the data that was sent to create the pdf didn't reference our custom Theme.  We solved that with the page-load snippet that Henry gave me that loads the CSS locally on page-load, thus making it available to send to Doc Raptor:

(function(skuid){        var $ = skuid.$;
        $(document.body).one('pageload',function(){
     //Change the static resource to the org's static resource location TODO: Dynamically set this 
            $.when($.get("/resource/XXXXXXXXXXXXXX/<MY_THEME>/skuidtheme.css"))
            .done(function(response) {
                // Create style tag to inject
                var style = $('<style />');
                style.append(response);
                //inject it into the page
                style.appendTo($('#pdf-export'));
            });
        });
})(skuid);


With this snippet, the good news is that my document now has the same CSS properties as my page, using my custom Theme.  

The bad news is that this snippet applied the skuidtheme.css to my entire Skuid page, but ONLY is using the skuidtheme.css and has dropped the icon portion of the css that is also found in the Theme zip file.  So, my theme isn't only being applied to my wrapper component (called #pdf-export), the whole page is getting it instead of the referenced Theme at the page level.  And we really need the page to have icons - the table row actions are missing because the icons are gone.

So, we tried to solve this a couple ways:
Make the above snippet a snippet (in line) instead of a page load snippet - and when we click the button to send the data to Doc Raptor, we first ran the snippet to import the skuidtheme.css data and apply it to the Wrapper #pdf-export.  The result was that my page had my Theme back (with icons) since the standard custom theme had take back over, but no css was applied to my wrapper/document, so my pdf had no css.

Modified the page load snippet posted above to also grab in the skuidicons.css on page load.  This did now work either - no icons came in.

So, we're stuck again - and hoping that someone can help us out.  Thanks in advance!

Chandra
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Henry Goddard

Henry Goddard

  • 776 Points 500 badge 2x thumb
Hi Chandra,

Perhaps some context might help me. Can you provide the modified snippet you tried? All that my script is doing is inserting the external css file as a style tag. You can achieve the same effect with inline css, whereby you just copy + paste the entirety of both files.