Efficy customs 2014 - Problem with DetailSpecial display handling (solved)

Wed, 15 Oct 2014 11:37:56 +0000

[Fixed. See below.]

Hello,

I have adapted a custom wich appears in the Projects entity, in a new tab (a financial dashboard). Everything works fine, but still, I meet an impossibility to display normaly this dashboard by clicking on the new tab. Here is everything, in detail:

MacroConsultCustom.txt

In the "Avalable details" section, DetailTabsButtons.Pro contains the new tab (Financial)
In the "General page" layout, "ConsultQueries.Proj.Financial" all the required Queries (Runquery)...
In the "Consult Detail Area" section, DetailTabs contains the Image, Label and Title definitions of my new tab
In the "Consult Detail Content" section, DetailSwitch.Proj.Financial uses the macro "DetailSpecial"
Still in the "Consult Detail Content" section, DetailSpecial.Proj.Financial contains the front-end code of the dashboard.

What does not work :
If I click on my tab, the screen goes white, displaying a top frame, which only contains the value of the first Efficy DB field to be displayed (returned by a query). The code is a javascript line :

var poin = <%OnField("POIN",query="POIN",then="0",else="%%GetField('POIN',query='POIN')")%>;

... so all I see on the screen is the value of 'POIN'. No more interface, no more Efficy...

What works :
If I remove all the code present in "DetailSpecial.Proj.Financial", replacing it by "Toto", and save the custom, I'm suddenly perfectly able to display my tab and its content (Toto) : it looks fine.
But here is the 'straaange" : if I put my display code back in "DetailSpecial.Proj.Financial", save the custom, and refresh the page by using F5, my dashboard appears!

Then, if I log out, login again, and try to go to the Financial dashboard, exerything explodes again.

Any hint ? Could it be about delaying the execution of something somewhere ? Any idea ?

Thanks in advance, and thanks for reading that looooooong question. ;-)

UPDATE : FIXED on 16/10/2014

All my problem were due to the usage of some "document.write()" in the javascript of the custom I had to adapt to 2014 edition.

The problem was:

« document.write » can't be called from an asynchronous script, because it's detached from the document. As Efficy 2014 uses async scripts for the display, its usage can write over the top of global efficy responsive display template. The result if often a blank page, displaying only what the first « document.write » of your custom has to display, and ignoring the rest of your script.

The solution that worked for me:

Ban the use of any document.write in 2014 customs. I had toimplement some « .innerHTML » properties to populate blank tags or tags. This approach does not break the display flow of Efficy 2014.

Simple example of replacement:

Before:

<table>
    <tr>
        <td>Total PO Budget :</td>
        <td class="right-bold">
            <script>
                var poin = <%OnField("POIN",query="POIN",then="0",else="%%GetField('POIN',query='POIN')")%>;
                var total = (parseInt(poin,10));
                document.write(total);
            </script> €
        </td>
    </tr>
</table>

After:

<table>
    <tr>
        <td>Total PO Budget :</td>
        <td class="right-bold"><span id="totalPOIN"></span>
        <script>
            var poin = <%OnField("POIN",query="POIN",then="0",else="%%GetField('POIN',query='POIN')")%>;
            var total = (parseInt(poin,10));
            //document.write(total);
            document.getElementById("totalPOIN").innerHTML = total;
        </script> €
        </td>
    </tr>
</table>

More advanced example of replacement, using <#repeat> loops:

Before:

<table>
    <%GetDataGrid(query="TasksStatus",TemplateText=|<#repeat>
        <tr>
            <td><#F=role></td>
            <td class="center-txt no-warp"><#I=consumed;#EMPTY=0;#ELSE=<#F=consumed>> €</nowarp> / <#F=budget> €</td>
            <td class="center-txt no-warp"><#F=DONE> / <#F=forecast></td>
            <td>
                <script>
                    if ((<#F=DONE>) > (<#F=forecast>))
                        document.write('<img src="http://chart.apis.google.com/chart?chbh=a&chs=200x12&cht=bhg&chco=FF0000&chds=0,<#F=forecast>&chd=t:<#F=done>" width="200" height="12" alt="" />'); 
                    else 
                        document.write('<img src="http://chart.apis.google.com/chart?chbh=a&chs=200x12&cht=bhg&chco=049900&chds=0,<#F=forecast>&chd=t:<#F=done>" width="200" height="12" alt="" />');
                </script>
                <span class="no-warp"><script>var percentage = Math.round((<#F=DONE>/<#F=FORECAST>)*100); document.write(" "+percentage)</script> %</span>
            </td>
        </tr>
    </#repeat>|)%>
</table>

After:

<table>
    <script> var idCmpt=0; </script>
    <%GetDataGrid(query="TasksStatus",TemplateText=|<#repeat>
        <tr>
            <td><#F=role></td>
            <td class="center-txt no-warp"><#I=consumed;#EMPTY=0;#ELSE=<#F=consumed>> €</nowarp> / <#F=budget> €</td>
            <td class="center-txt no-warp"><#F=DONE> / <#F=forecast></td>
            <td><img id="idChartToReplace" src="" width="200" height="12" alt="" />
                <script>
                    var divCharId = "TasksStatusChartImg"+idCmpt;
                    document.getElementById("idChartToReplace").id = divCharId ;
                    if ((<#F=DONE>) > (<#F=forecast>)) {
                        document.getElementById(divCharId).src = "http://chart.apis.google.com/chart?chbh=a&chs=200x12&cht=bhg&chco=FF0000&chds=0,<#F=forecast>&chd=t:<#F=done>"; 
                    }
                    else {
                        document.getElementById(divCharId).src = "http://chart.apis.google.com/chart?chbh=a&chs=200x12&cht=bhg&chco=049900&chds=0,<#F=forecast>&chd=t:<#F=done>"; 
                    }
                </script>
                <span id="idChartPercentToReplace" class="no-warp"></span>
                <script>
                    var spanCharPercentId = "TasksStatusChartPercent"+idCmpt;
                    document.getElementById("idChartPercentToReplace").id = spanCharPercentId;
                    var percentage = Math.round((<#F=DONE>/<#F=FORECAST>)*100); 
                    //document.write(" "+percentage+" %");
                    document.getElementById(spanCharPercentId).innerHTML = " "+percentage+" %";
                    idCmpt++;
                </script>
            </td>
        </tr>
    </#repeat>|)%>
</table>

Efficy Overflow Q&A - Recent questions tagged diplay

Efficy customs 2014 - Problem with DetailSpecial display handling (solved)