HTML view in HWC app

[fenil_doshi]

Hi guys,

I just started with the development of HWC app and have one query that when we pull an HTML view from palette onto the screen and then

we can assign custom code to it in custom.js file and have whole UI+logic and everything can be hard coded in the HTML view but

my point is how to access htmlview element in custom.js and write a script for the whole form design which is latter part.

Right now my main concern is that how to access the html view element in custom.js file ?

Regards,

Fenil Doshi.

[Dan_vL]

On the htmlview's property page, there will be a key such as htmlKey.

In custom.js you can reference that htmlview and modify its content with the following code.

var htmlview = document.getElementById("htmlKey");

htmlview.innerHTML = "<h2>New Title</h2>";

[fenil_doshi]

Thanks Daniel for your reply,now can I write the custom code between the inverted commas where right now you have header field ??

and i did but error { customBeforeWorkflowLoad() is not defined } is coming and mind u guys i checked twice in custom.js

Regards,

Fenil Doshi.

[Dan_vL]

When I see that error, it usually occurs because I have introduced a syntax error.

Are you using the Chrome browser?  If so, try pressing Ctrl Shift J to open the Web Inspector.  It may show you where the error is.  Note, you will need to specify ?screenToShow=Screen_Key_Name.

There is a sample that goes over debugging techniques that may be helpful.  It explains the above in more detail.

Debugging a Mobile Workflow https://cw.sdn.sap.com/cw/docs/DOC-150957

[fenil_doshi]

Hi Daniel,

What I am trying to do is on the start screen where I have HTML view I am trying to display three buttons which perform open screen task when they are pressed,But right now i am not able to show them on screen only and here is my code in custom.js.

function customAfterShowScreen(screenToShow, screenToHide) {

          if (screenToShow == "Start_Screen" && (screenToHide === ""))

    {

        var form = document.forms[screenToShow + "Form"];

        if (form)

                  {

                  var htmlview = document.getElementById("HTML_key");

                  htmlview.innerHTML ="<div data-inline="true">

                  <a href="index.html" data-role="button">Create</a>

                  <a href="index.html" data-role="button" data-theme="b">Detail</a>

                  <a href="index.html" data-role="button">HtmlTest</a>

        </div>";

                  }

    }

    return true;

}

Regards,

Fenil Doshi.

[Dan_vL]

The following code worked for me.

var htmlview = document.getElementById("htmlKey");

htmlview.innerHTML ='<a id="Create" href="index.html" data-role="button">Create</a>';

var btn = document.getElementById("Create");

$(btn).button();