Page 1 of 1

DataTables is not working in Webhelp

Posted: Thu Oct 17, 2024 9:50 pm
by desireeh
Hello,
I'm trying to implement the DataTables feature seen here:
https://github.com/oxygenxml/oxygen-pub ... ata-tables

I've been able to get this to work locally. But I had to set the parameter webhelp.fragment.head to the data-tables-script-fragment.xml

I've tried many different things to get the parameter into the Opt file. I finally was able to by making the data-tables-script-fragment.xml into a xhtml file.

It still works locally, but will not work in the Webhelp at all.

Here is my OPT file:

Code: Select all

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<publishing-template>
    <name>OrderDynamics Help</name>
    <description>Webhelp Responsive</description>
        <webhelp>
        <preview-image file="../../Resources/Images/logo.png"/>
        <parameters>
            <parameter name="webhelp.show.main.page.tiles" value="yes"/>
            <parameter name="args.outext" value="htm"/>
            <parameter name="args.artlbl" value="no"/>
            <parameter name="args.figurelink.style" value="TITLE"/>
            <parameter name="args.tablelink.style" value="TITLE"/>
            <parameter name="clean.output" value="yes"/>
            <parameter name="force-unique" value="true"/>
            <parameter name="generate.copy.outer" value="3"/>
            <parameter name="webhelp.default.collection.type.sequence" value="yes"/>
            <parameter name="webhelp.fragment.footer" value="resources/footer.xhtml" type="filePath"/>
            <parameter name="webhelp.publication.toc.links" value="all"/>
            <parameter name="webhelp.show.indexterms.link" value="no"/>
            <parameter name="webhelp.show.main.page.toc" value="no"/>
            <parameter name="webhelp.show.top.menu" value="yes"/>
            <parameter name="webhelp.top.menu.depth" value="4"/>
            <parameter name="webhelp.logo.image" value="tecsys-OMNIWMS.svg" type="filePath"></parameter>
            <parameter name="webhelp.logo.image.target.url" value="../index.htm"/>
            <parameter name="args.figurelink.style" value="TITLE"/>
            <parameter name="args.tablelink.style" value="TITLE"/>
            <parameter name="fix.external.refs.com.oxygenxml" value="true"/>
            <parameter name="webhelp.fragment.head" value="resources/data-table-script-fragment.xhtml" type="filePath"/>
            </parameters>
            
            <html-fragments>
                <fragment file="googleAnalytics.xml" placeholder="webhelp.fragment.head"/>
                <fragment placeholder="webhelp.fragment.head" file="html-fragments/data-tables-script-fragment.xml"/>      
            </html-fragments>
        <resources>
            <css file="oxygen.css"/>
            <css file="ODHelp.css"/>
            <logo file="tecsys-OMNIWMS.svg" target-url="" alt="Omni WMS Help"/>
            <fileset>
                <include name="resources/**/*"/>
                <include name="resources/images/"/>
                <exclude name="resources/**/*.svn"/>
                <exclude name="resources/**/*.git"/>
                <include name="../../xslt/*.xsl"/>
                <include name="DataTables/**/*"/>
            </fileset>
        </resources>
           
          <tags>
            <tag type="layout">tiles</tag>
            <tag type="color">blue</tag>
            <tag type="color">light</tag>
        </tags>
        <xslt>
            <extension file="../../xslt/tablelabel.xsl" id="com.oxygenxml.webhelp.xsl.createMainPage"/>
            <extension file="../../xslt/tablelabel.xsl" id="com.oxygenxml.webhelp.xsl.dita2webhelp"/>
            <extension file="../../xslt/tablelabel.xsl" id="com.oxygenxml.webhelp.xsl.createSearchPage"/>
            <extension file="../../xslt/tablelabel.xsl" id="com.oxygenxml.webhelp.xsl.createIndexTermsPage"/>
        </xslt>
    </webhelp>
    <pdf>
        <preview-image file="oxygen-tiles.png"/>
        <tags>
            <tag type="layout">tiles</tag>
            <tag type="color">blue</tag>
            <tag type="color">light</tag>
        </tags>
        <parameters>
            <parameter name="hide.frontpage.toc.index.glossary" value="no"/>
        </parameters>
        
        <resources>
           <css file="oxygen-print.css"/>
           <css file="ODAPI.css"/>  
            <css file="tecsys-branding.css"/>
        </resources>
    </pdf>
</publishing-template>

Re: DataTables is not working in Webhelp

Posted: Fri Oct 18, 2024 4:19 pm
by desireeh
I'm managed to get it working without the parameter setting so my OPT file is fine. But it still will only work locally. It won't work in the WebHelp.

Here's the fragment file:

Code: Select all

<html>
    <head>
        <!-- The DataTables library styles (for local use please uncomment the following lines) -->
        <!--<link rel="stylesheet" type="text/css" href="${oxygen-webhelp-template-dir}/DataTables/datatables.min.css"/>
        <script src="${oxygen-webhelp-template-dir}/DataTables/jquery.dataTables.min.js" defer="true"/>-->
        <link rel="stylesheet" type="text/css"
            href="http://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
        <script src="http://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js" defer="true"/>
        <script>
        <!--
            window.addEventListener("DOMContentLoaded", (event) => {
                $('.table').DataTable();
            });
        //-->
        </script>
    </head>
</html>