Skip to Content

How to do json model bind to sap.m.input of text type?

Hi, I need to do a two way json biningd to a sap.m.input field in a html page, the input type is sap.m.InputType.Text, however, the binding does not work properly, it does not initialize the input field to the model's data.

The html file with the related code to set the binding is attached below. Could anyone see what may be wrong with the code?

Thanks

Jonathan

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta charset="UTF-8" />

<title>Default Logon Screen for Kapsel</title>

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

<script type="text/javascript" src="resources/sap/ui/thirdparty/jquery/jquery-1.7.1.js"></script>

<script type="text/javascript" src="resources/sap/ui/thirdparty/jqueryui/jquery-ui-position.js"></script>

<script id="sap-ui-bootstrap" type="text/javascript"

data-sap-ui-preload="none" data-sap-ui-libs="sap.m"

data-sap-ui-theme="sap_bluecrystal" src="resources/sap-ui-core-nojQuery.js"></script>

<script type="text/javascript" src="Notification.js"></script>

<script type="text/javascript" src="ProviderNotification.js"></script>

<script type="text/javascript" charset="utf-8">

window.onerror =

function(msg, url, line) {

var idx = url.lastIndexOf("/");

if(idx > -1) {url = url.substring(idx+1);}

alert("ERROR in " + url + " (line #" + line + "): " + msg);

return false; //suppressErrorAlert;

};

</script>

<script type="text/javascript" charset="utf-8">

var triggerEvent = function(actionId, valueString) {

var href = '#' + actionId;

if(valueString) {

href = href + '+' + valueString;

}

window.location.href = href;

};

function submitData(){

var path = document.getElementById("Path_item_text-inner").value;

var password = document.getElementById("Password_item_text-inner").value;

triggerEvent("SUBMIT", JSON.stringify({filepath:path, password:password}));

}

function cancel(){

triggerEvent("CANCEL");

}

var notification;

var providerNotification;

showNotification = function(notificationKey) {

//if notification is for certificate provider, load it from its own i18n property file

if ( notificationKey.indexOf('ERR_Certificate_Provider' == 0)){

if (!providerNotification){

providerNotification = new window.x509provider.Notification(triggerEvent);

}

providerNotification.show(notificationKey);

}

//else handling iab.html resource

else {

console.log('iab.html showNotification() called');

if (!notification) {

notification = new sap.logon.Notification(triggerEvent);

}

notification.show(notificationKey);

}

}

</script>

<script type="text/javascript" charset="utf-8">

var data ={

path:"set certificate path",

password:"set certificate password"

};

// create JSON model instance

var oModel = new sap.ui.model.json.JSONModel();

// set the data for the model

oModel.setData(data);

// set the model to the core

sap.ui.getCore().setModel(oModel);

screenId = "SCN_Certificate_Provider";

var app = new sap.m.App();

var page = new sap.m.Page();

page.setShowHeader(true);

app.addPage(page);

app.setInitialPage(page);

app.placeAt("placeholder");

if (typeof vbox === 'object' && vbox !== null) {

vbox.destroy();

}

vbox = new sap.m.VBox('smpLogon');

vbox.setFitContainer(true);

vbox.setJustifyContent(sap.m.FlexJustifyContent.Center);

vbox.onAfterRendering = function() {

var inputs = this.$().find(':input');

inputs.attr('autocapitalize', 'off');

inputs.attr('autocorrect', 'off');

inputs.attr('autocomplete', 'off');

sap.m.FlexBox.prototype.onAfterRendering.apply(this, arguments);

}

var bar = page.getCustomHeader();

if(!bar) {

bar = new sap.m.Bar(screenId + '_buttons');

page.setCustomHeader(bar);

}

bar.destroyContentLeft();

bar.destroyContentRight();

bar.destroyContentMiddle();

var button = new sap.m.Button("BTN_CANCEL",

{

text : "Cancel",

press : cancel

});

bar.addContentLeft(button);

var button = new sap.m.Button("BTN_SUBMIT",

{

text : "Submit",

press : submitData

});

bar.addContentRight(button);

var title = new sap.m.Label();

title.setText("Get File Certificate Settings");

title.setDesign(sap.m.LabelDesign.Bold);

bar.addContentMiddle(title);

inputList = new sap.m.List('smpList');

inputList.setInset(true);

var inputListItem = new sap.m.InputListItem( 'Path_item');

inputField = new sap.m.Input('Path_item_text');

inputField.bindValue("{/path}", null, sap.ui.model.BindingMode.TwoWay);

inputField.setType(sap.m.InputType.Text);

inputListItem.setLabel("Certificate Path");

inputListItem.addContent(inputField);

inputList.addItem(inputListItem);

var inputListItem = new sap.m.InputListItem( 'Password_item');

inputField = new sap.m.Input('Password_item_text');

inputField.bindValue("{/password}", null, sap.ui.model.BindingMode.TwoWay);

inputField.setType(sap.m.InputType.Text);

inputListItem.setLabel("Certificate Password");

inputListItem.addContent(inputField);

inputList.addItem(inputListItem);

vbox.addItem(inputList);

page.addContent(vbox);

</script>

</head>

<body class="sapUiBody">

<div id="logon_header"/></div>

<div id="placeholder" style="height:100%">

<!--div id="busy_indicator" >

<img src="img/Busy.gif" >

</div-->

</div>

<div id="logon_footer"></div>

</body>

</html>

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

1 Answer

  • author's profile photo Former Member
    Former Member
    Posted on Jan 08, 2014 at 09:38 PM

    Hi,

    Have you already solve this?

    inputField.bindValue("{/password}", null, sap.ui.model.BindingMode.TwoWay);


    Since you are using a bind<Propertie> method, there is no need to enclose the path between brackets, so that the correct instruction is:


    inputField.bindValue("/password", null, sap.ui.model.BindingMode.TwoWay);


    Furthermore, the default BindingMode for a json model is TwoWay, so you can make a shorter way:


    inputField.bindValue("/password");


    Regards,

    Luis Alberto

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.