Update!

The solution I provide to display the native PDF in the preview page is flawed.  A better solution is available here.

The problem

What if the HTML preview of a document is not displaying as you think it should?  Depending on the cause this may be out of our hands, however some problems can be avoided even if they cannot be completely resolved.

An Example

This particular post was spurred by one customer who was experiencing strange black boxes overlaying the HTML rendition of some PDFs.  It turns our that this was a problem in the rendered HTML  being exaggerated by the way the HTML was displayed in WebDrawer.

A Fix

In this video I spend the first half improving the viewing experience by displaying the HTML preview within an iframe, at about the 13 minute mark I look at how you might simply embed the native PDF in the preview page rather than rely on the HTML rendition of the PDF. 

Sorry about the audio levels in this, you may have to turn your volume up to full and listen carefully...

 

Scripts

This is the scripts section as seen in the above video.  It sets the iframe:

• height from the window heigh less the top position of the iframe (plus a 5 pixel buffer), and
• width to the window width less the iframe margin (10 pixels) plus the menu width (if the left menu is on the left).

@section scripts {
    <script>
        var resizePreview = function () {
            $('#preview-frame').show();
            $('#preview-frame').css("visibility", "visible");

            var height = $(window).height() - ($('#preview-frame').offset().top + 5);
            $('#preview-frame').height(height);


            var width = $(window).width() - 10;

            if (width > 630) {
                width = width - ($('#leftcolumn').width());
            }
            $('#preview-frame').width(width);
        }

        $(function () {
            $(window).on("load resize", function () {
                resizePreview();
            });
        });
    </script>
}

Styles

These styles simply tweak some of the WebDrawer built-in styles to make the iframe fit better into the page.

@section customhead {
    <style>
        h2 {
            white-space: normal;
        }

        #contentcolumn {
            height: auto;
            padding-bottom: 0;
        }
    </style>
}

Body

The body embeds the preview either using an iframe or as the actual source PDF.

if (record.Html.Length == 0)
{
    <div class="preview-pane">
        <div class="alert">
           <strong>@Translations.lang.error</strong> @Translations.lang.no_html
        </div>
    </div>
}
else
{
    if (record.Extension == "PDF")
    {
        <object 
             id="preview-frame"
             data='~/Record/@record.Uri/file/document?inline'
             type='application/pdf'
              width='100%'
              height='100%'
              style="border:none; margin-left:10px; visibility:hidden;">

            <p>
               It appears your Web browser is not configured to display PDF files.
                    No worries, just <a href='~/Record/@record.Uri/file/document?inline'>click here to download the PDF file.</a>
            </p>

        </object>
}
        else
        {
            <iframe 
               id="preview-frame"
               src="~/Record/@record.Uri/file/html"
               style="border:none; margin-left:10px; display:none;">            </iframe>
        }
    }

Record extension

In the code above record.Extension is referred to, depending on your version of WebDrawer Extension may not be available.  To verify this:

1. open the hptrim.config file, 
2. find the customPropertySets element,
3. within that find the RecordPreview, and
4. it should contain RecordExtension.

This code sample demonstrates the RecordPreview customPropertySet:

<add name="RecordPreview" properties="Html,Title,IsElectronic,RecordExtension,enabledcommandids,RecordIsInPartSeries,RecordRelatedRecs,RecordRecordType,RecordPrimaryContact,RecordIsContainer"/>

The complete solution

Get the complete template here,  don't forget the other piece in the solution is to edit the routeDefault element in hptrim.config.