cancel
Showing results for 
Search instead for 
Did you mean: 

SUP HWC - Trying to change screen title

Former Member
0 Kudos

Hi,

I am trying to change the screen title manually from custom.js file by modifying the ScreenDiv's attribute by following code:-

var titleView = document.getElementById('Batch_ItemScreenDiv');

titleView.removeAttr("sup_screen_title");

titleView.attr("sup_screen_title", "new title");

However, it doesn't achieve what I wanna to do.

Any idea what goes wrong or suggestion?

Thanks.

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

Try to change the line bellow...

var titleView = document.getElementById('Batch_ItemScreenDiv');

to this one

var titleView = $('#Batch_ItemScreenDiv');

Alternatively, you can try to set the <h1> title directly:

$('#Batch_ItemScreenDiv h1').html("new title");

Note that this code only works on jQuery-enabled devices... if you plan to be compatible with BlackBerry V5, you should do this using "raw" JavaScript code.

Hope it helps

Bruno

Former Member
0 Kudos

Hi,

I tried your solution, it work on the sample code provided by sap (sample inventory and sample approval).

However, it doesn't work on the new project I created on sup 2.1.3#, and I check on the workflow.html, it doesn't have a h1 tag for the title so my guess would be in sup 2.1.3# already change the template.

I tried code as following (I am testing on IOS device anyway), but doesn't work:-

1. setScreenTitle(), which available in API.js

Is anyone successfully change the header title in sup 2.1.3#?

following is the generated workflow.html

<!doctype html>

<!-- Warning, this file is overwritten with each run of the package generation wizard -->

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <meta name="HandheldFriendly" content="True" />

        <meta http-equiv="PRAGMA" content="NO-CACHE" />

        <meta name="viewport" content="minimum-scale=.25, initial-scale=1" />

        <script src="js/API.js"></script>

        <script src="js/Callbacks.js"></script>

        <script src="js/Camera.js"></script>

        <script src="js/Certificate.js"></script>

        <script src="js/Custom.js"></script>

        <script src="js/ExternalResource.js"></script>

        <script src="js/json2.js"></script>

        <script src="js/Resources.js"></script>

        <script src="js/SUPStorage.js"></script>

        <script src="js/Timezone.js"></script>

        <script src="js/Utils.js"></script>

        <script src="js/Workflow.js"></script>

        <script src="js/WorkflowMessage.js"></script>

        <link rel="stylesheet" href="css/jquery/custom.css" type="text/css" />

        <link rel="stylesheet" href="css/Stylesheet.css" type="text/css" />     

    </head>

    <body onload="onWorkflowLoad();">

    <div id="BatchesScreenDiv" sup_screen_title="Batches" style="display: none" sup_menuitems="Refresh,Refresh" sup_okaction="doCancelAction()">

        <script>if (isIOS()) { document.writeln("<h3 id=\"BatchesScreenTitle\" class=\"screenTitle\">Batches</h3>"); }</script>

        <ul id="BatchesScreenDivMenu" class="menu">

            <li><a class="nav" href="javascript:void(0)" name="Refresh" id="BatchesRefresh" onclick="menuItemCallbackBatchesRefresh();">Refresh</a></li>

            <li><a class="nav" href="javascript:void(0)" name="Cancel" id="BatchesCancel" onclick="menuItemCallbackBatchesCancel()">Cancel</a></li>

        </ul>

        <form style="margin: 0px;" name="BatchesForm" id="BatchesForm" onSubmit="return false;" autocomplete="on" sup_show_alert_on_validation_error="true">

        <table class="screen">

          <tr><td colspan="2"><span id="BatchesForm_help" class="help"></span></td></tr>

          <tr><td colspan="2" id="topOfBatchesForm"></td></tr>

        </table>

        <div id="batches_html" sup_html_type="htmlview">

        </div>

        <table class="screen">

          <tr><td colspan="2" id="bottomOfBatchesForm"></td></tr></table>      

        </form> 

    </div> <!-- end of screen Batches -->

    <div id="Batch_ItemScreenDiv" sup_screen_title="Batch Item" style="display: none" sup_menuitems="_,_,Reject,Reject,Approve,Approve" sup_okaction="doSaveActionWithoutReturn()">

        <script>if (isIOS()) { document.writeln("<h3 id=\"Batch_ItemScreenTitle\" class=\"screenTitle\">Batch Item</h3>"); }</script>

        <ul id="Batch_ItemScreenDivMenu" class="menu">

            <li><a class="nav" href="javascript:void(0)" name="_" id="Batch_Item_" onclick="menuItemCallbackBatch_Item_();">_</a></li>

            <li><a class="nav" href="javascript:void(0)" name="Reject" id="Batch_ItemReject" onclick="menuItemCallbackBatch_ItemReject();">Reject</a></li>

            <li><a class="nav" href="javascript:void(0)" name="Approve" id="Batch_ItemApprove" onclick="menuItemCallbackBatch_ItemApprove();">Approve</a></li>

            <li><a class="nav" href="javascript:void(0)" name="Cancel" id="Batch_ItemCancel" onclick="menuItemCallbackBatch_ItemCancel()">Cancel</a></li>

        </ul>

        <form style="margin: 0px;" name="Batch_ItemForm" id="Batch_ItemForm" onSubmit="return false;" autocomplete="on" sup_show_alert_on_validation_error="true">

        <table class="screen">

          <tr><td colspan="2"><span id="Batch_ItemForm_help" class="help"></span></td></tr>

          <tr><td colspan="2" id="topOfBatch_ItemForm"></td></tr>

        </table>

        <div id="batch_item_html" sup_html_type="htmlview">

        </div>

        <table class="screen">

          <tr><td colspan="2" id="bottomOfBatch_ItemForm"></td></tr></table>      

        </form> 

    </div> <!-- end of screen Batch Item -->

    <div id="PaymentScreenDiv" sup_screen_title="Payment" style="display: none" sup_menuitems="Cancel,Cancel" sup_okaction="doSaveActionWithoutReturn()">

        <script>if (isIOS()) { document.writeln("<h3 id=\"PaymentScreenTitle\" class=\"screenTitle\">Payment</h3>"); }</script>

        <ul id="PaymentScreenDivMenu" class="menu">

            <li><a class="nav" href="javascript:void(0)" name="Cancel" id="PaymentCancel" onclick="menuItemCallbackPaymentCancel()">Cancel</a></li>

        </ul>

        <form style="margin: 0px;" name="PaymentForm" id="PaymentForm" onSubmit="return false;" autocomplete="on" sup_show_alert_on_validation_error="true">

        <table class="screen">

          <tr><td colspan="2"><span id="PaymentForm_help" class="help"></span></td></tr>

          <tr><td colspan="2" id="topOfPaymentForm"></td></tr>

        </table>

        <div id="payment_html" sup_html_type="htmlview">

        </div>

        <table class="screen">

          <tr><td colspan="2" id="bottomOfPaymentForm"></td></tr></table>      

        </form> 

    </div> <!-- end of screen Payment -->

    <div id="blankScreenDiv" style="display: none">

    </div>

    </body>

</html>

former_member228049
Participant
0 Kudos

From the generated html file, this is not JQM style , titleView doesnt' have removeAttr and attr function, you could try

var ddd = document.getElementById('BatchesScreenDiv');

ddd.setAttribute('sup_screen_title', 'new title');  but you need to put it in the right place in custom.js ( such as customBeforeNavigateFroward(...).

Former Member
0 Kudos

Hi,

Thanks for your reply, tried the codes on "customBeforeNavigateFroward" part, unfortunately, it didn't works.

Thanks for your suggestion anyway.

Former Member
0 Kudos

Hi,

actually I tried to change the title and it worked for me, I modified the customAfterNavigateForward in custom.js, suppose you will go from screen X to screen Y

function customAfterNavigateForward(screenKey, destScreenKey) {

    if (screenKey == "X" && (destScreenKey === "Y")){

       

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

         if (form)

       {

             //calling API method

             setScreenTitle(destScreenKey, "testing");

       }

       

     }

}

Answers (2)

Answers (2)

Former Member
0 Kudos

Hi, In HWC application ScreenTitle updated from sup_screen_title attribute of the page.

Assume that this is your page;

<div data-role="page" data-theme="e" id="StartScreenDiv" sup_screen_title="Başlangıç" style="" sup_menuitems="Cancel,Cancel" sup_okaction="doCancelAction()" data-url="StartScreenDiv">

        ....... 

    </div>

as you see our screen title is "Başlangıç".

What you can do is that call following custom function into your custom.js on event customAfterShowScreen

function setScreenTitleCustom(ScreenName,title){

$("div[data-role=page]#"+ScreenName+"ScreenDiv div[data-role=header][role:heading] h1, h2, h3, h4, h5, h6").text(title);

}

For example:  setScreenTitleCustom("Start","Test"); It will replaec "Başlangıç" to "Test"

Former Member
0 Kudos

Use the provided Javascript API...

use

setScreenTitle(screenKey, screenTitle)

Reward points if useful..