on 10-01-2012 9:21 AM
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.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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>
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(...).
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");
}
}
}
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"
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Use the provided Javascript API...
use
setScreenTitle(screenKey, screenTitle)
Reward points if useful..
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
85 | |
23 | |
11 | |
9 | |
8 | |
5 | |
5 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.