Salesforce site.com compatibility with Flare HTML5 outputs

[zeroone42]

Hi everyone;

I've built an HTML5 sidenav project with Flare, and now I'm looking to host it on site.com, the html/css-compatible arm of salesforce. The reasoning behind this is that my org is looking to protect their help with SF authentication.

So far, I am having a huge host of problems. Essentially, when I zip my project and import it, the import is successful with no CSS errors. However, the previews are missing all sorts of nav components - breadcrumbs, sidenav, hamburger menus, menu proxies.

When I look at the project in the output folder, all of these elements are present. It is just the import or the preview that is giving me problems. Site.com uses modified CSS/HTML, which means that it does something to the code when it is imported. What it is actually doing, I can't tell. I've spent some time comparing the HTML and CSS as "converted" by site.com, and I don't see any surface-level issues. I even replaced the content of most of the CSS files wholesale with their original contents generated by Flare. However, the actual link components Flare builds are broken. For example, this is the sidenav in my project after it is built (when I inspect it on the page):

Code: Select all

	
<div class="sidenav-wrapper">
       <div class="sidenav-container">
            <ul class="off-canvas-accordion vertical menu sidenav" role="tablist" aria-multiselectable="true" data-mc-toc="True" data-mc-expand-event="click.zf.accordionMenu" data-mc-defer-expand-event="True" data-mc-include-back="False" data-mc-include-parent-link="False" data-mc-include-icon="False" data-mc-include-indicator="False" data-mc-css-sub-menu="vertical menu accordion-menu is-accordion-submenu nested" data-mc-css-tree-node-collapsed="is-accordion-submenu-parent" data-mc-css-tree-node-expanded="is-accordion-submenu-parent" data-accordion-menu="m8v0bk-accordion-menu" data-mc-side-nav-menu="True" data-mc-chunk="Data/Toc.xml">
                <li class="tree-node is-accordion-submenu-parent" aria-expanded="true" data-mc-id="0"><a href="../../../../../Content/POC/product_Help_Splash.htm">Products<span class="submenu-toggle-container"><span class="submenu-toggle"> </span></span></a>
					<ul class="vertical menu accordion-menu is-accordion-submenu nested">
						<li class="tree-node is-accordion-submenu-parent" data-mc-id="1"><a href="../../../../../Content/POC/folder2/folder2_subproductA_Ovv.htm">topic1<span class="submenu-toggle-container"><span class="submenu-toggle"> </span></span></a></li>
						<li class="tree-node is-accordion-submenu-parent" aria-expanded="true" data-mc-id="2"><a href="../../../../../Content/POC/folder1/subproductA_Ovv.htm">topic1<span class="submenu-toggle-container"><span class="submenu-toggle"> </span></span></a>
							<ul class="vertical menu accordion-menu is-accordion-submenu nested">
								<li class="tree-node is-accordion-submenu-parent" aria-expanded="true" data-mc-id="3"><a href="../../../../../Content/POC/folder1/subproductC/subproductC_Ov.htm">topic2<span class="submenu-toggle-container"><span class="submenu-toggle"> </span></span></a>
									<ul class="vertical menu accordion-menu is-accordion-submenu nested">
										<li class="tree-node tree-node-leaf" data-mc-id="4"><a href="../../../../../Content/POC/folder1/subproductC/subproductC_A.htm">topic3<span class="submenu-toggle-container"><span class="submenu-toggle"> </span></span></a></li>
										<li class="tree-node is-accordion-submenu-parent" aria-expanded="true" data-mc-id="5"><a href="../../../../../Content/POC/folder1/subproductC/subproductC_B.htm">topic4<span class="submenu-toggle-container"><span class="submenu-toggle"> </span></span></a>
											<ul class="vertical menu accordion-menu is-accordion-submenu nested">
												<li class="tree-node is-accordion-submenu-parent" aria-expanded="true" data-mc-id="6"><a href="../../../../../Content/POC/folder1/subproductC/cat1/subproductC_cat1.htm">topic5<span class="submenu-toggle-container"><span class="submenu-toggle"> </span></span></a>
													<ul class="vertical menu accordion-menu is-accordion-submenu nested">
														<li class="tree-node tree-node-leaf tree-node-selected" data-mc-id="7"><a class="selected" href="../../../../../Content/POC/folder1/subproductC/cat1/subproductC_cat1_C.htm">topic6<span class="submenu-toggle-container"><span class="submenu-toggle"> </span></span></a></li>
														<li class="tree-node tree-node-leaf" data-mc-id="8"><a href="../../../../../Content/POC/folder1/subproductC/cat1/subproductC_cat1_D.htm">topic7<span class="submenu-toggle-container"><span class="submenu-toggle"> </span></span></a></li>
														<li class="tree-node tree-node-leaf" data-mc-id="9"><a href="../../../../../Content/POC/folder1/subproductC/cat1/subproductC_cat1_E.htm">topic8<span class="submenu-toggle-container"><span class="submenu-toggle"> </span></span></a></li>
														<li class="tree-node tree-node-leaf" data-mc-id="10"><a href="../../../../../Content/POC/folder1/subproductC/cat1/subproductC_cat1_F.htm">topic9<span class="submenu-toggle-container"><span class="submenu-toggle"> </span></span></a></li>
														<li class="tree-node tree-node-leaf" data-mc-id="11"><a href="../../../../../Content/POC/folder1/subproductC/cat1/subproductC_cat1_G.htm">topic10<span class="submenu-toggle-container"><span class="submenu-toggle"> </span></span></a></li>
														<li class="tree-node tree-node-leaf" data-mc-id="12"><a href="../../../../../Content/POC/folder1/subproductC/cat1/subproductC_cat1_H.htm">topic11<span class="submenu-toggle-container"><span class="submenu-toggle"> </span></span></a></li>
														<li class="tree-node tree-node-leaf" data-mc-id="13"><a href="../../../../../Content/POC/folder1/subproductC/cat1/subproductC_cat1_I.htm">topic12<span class="submenu-toggle-container"><span class="submenu-toggle"> </span></span></a></li>
														<li class="tree-node tree-node-leaf" data-mc-id="14"><a href="../../../../../Content/POC/folder1/subproductC/cat1/subproductC_cat1_J.htm">topic13<span class="submenu-toggle-container"><span class="submenu-toggle"> </span></span></a></li>
														<li class="tree-node tree-node-leaf" data-mc-id="15"><a href="../../../../../Content/POC/folder1/subproductC/cat1/subproductC_cat1_K.htm">topic14<span class="submenu-toggle-container"><span class="submenu-toggle"> </span></span></a></li>
														<li class="tree-node tree-node-leaf" data-mc-id="16"><a href="../../../../../Content/POC/folder1/subproductC/cat1/subproductC_cat1_L.htm">topic15<span class="submenu-toggle-container"><span class="submenu-toggle"> </span></span></a></li>
														<li class="tree-node tree-node-leaf" data-mc-id="17"><a href="../../../../../Content/POC/folder1/subproductC/cat1/subproductC_cat1_M.htm">topic16<span class="submenu-toggle-container"><span class="submenu-toggle"> </span></span></a></li>
														<li class="tree-node tree-node-leaf" data-mc-id="18"><a href="../../../../../Content/POC/folder1/subproductC/cat1/subproductC_cat1_N.htm">topic16<span class="submenu-toggle-container"><span class="submenu-toggle"> </span></span></a></li>
													</ul>
												</li>
											</ul>
										</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>	
		</div>
	</div>

And this is the sidenav when I preview in site.com:

Code: Select all

	<div class="sidenav-wrapper">
		<div class="sidenav-container">
			<ul class="off-canvas-accordion vertical menu sidenav" data-accordion-menu="3l3zdp-accordion-menu" data-mc-css-tree-node-expanded="is-accordion-submenu-parent" data-mc-css-tree-node-collapsed="is-accordion-submenu-parent" data-mc-css-sub-menu="vertical menu accordion-menu is-accordion-submenu nested" data-mc-include-indicator="False" data-mc-include-icon="False" data-mc-include-parent-link="False" data-mc-include-back="False" data-mc-defer-expand-event="True" data-mc-expand-event="click.zf.accordionMenu" data-mc-toc="True" data-mc-side-nav-menu="True" role="tablist" aria-multiselectable="true"> 
			</ul>							
		</div>
	</div>

The preview also doesn’t seem to be a true preview, although the Salesforce documentation doc says that “all browser-related functions should work.” However, it also says that stylesheets get rendered as inline styles for preview – I suspect that this could be the cause of my issues. That, or the elements I am using are unsupported by their modified HTML/CSS. Source: https://help.salesforce.com/articleView ... htm&type=5

Since this is a POC before we start throwing money at Salesforce, I can't actually test publishing my content to see if the elements render in that context (publishing is blocked in the Salesforce sandbox).

So, my questions are:

1. Are you able to get the following Flare HTML5 target components to function in site.com? If so, were you able to preview it in sandbox, or does it need to be published?
   
   • Hamburger menus (off-canvas menu)
   • Side nav
   • Breadcrumbs
   • TOC proxies
2. For those of you who are more familiar with how Flare-generated HTML5 works when it is published and hosted, what is the process behind getting the TOC list items to render? Should I expect them to render if my preview page is using inline styles? Note that xref links between topics are working and can be followed.

Note: I am aware of the Salesforce Knowledge plugin for Flare. It's too simplistic for our use case, which is a large, complex help system for multiple products with many topics - I tested this out, but the category being tied to the publishing destination was incredibly limiting and caused a lot of my links between products to break. I also lost a lot of my basic formatting (e.g. borders between rows in tables).

[Psider]

There seems to be a file size limit, so maybe check you aren't breaching that? (I assume not, but worth checking)
https://help.salesforce.com/articleView ... htm&type=5

[zeroone42]

There seems to be a file size limit, so maybe check you aren't breaching that? (I assume not, but worth checking)
https://help.salesforce.com/articleView ... htm&type=5

My project is less than 5 mb unzipped, so unfortunately it looks like the problem lies elsewhere. Thanks.