Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Enable Computed Properties by patching OData Read method
/// <reference path="~/GeneratedArtifacts/viewModel.js" />
myapp.Customer.created = function (entity) {
// Write code here.
};
myapp.Customer.CSZ_Compute = function (entity, result) {
// Write code here.
var Me = entity;
result = Me.City + ', ' + Me.State + " " + Me.Zip;
return result;
};
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="msapplication-TileImage" content="Content/Images/user-logo-144.png" />
<meta name="msapplication-TileColor" content="#0072c6" />
<link rel="icon" href="Content/Images/user-logo.ico" type="image/x-icon" />
<title>HTMLApp101.HTMLClient</title>
<script type="text/javascript">
// Work around viewport sizing issue in IE 10 on Windows Phone 8
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
document.writeln("<style>@-ms-viewport { width: auto!important; }</style>");
}
</script>
<!-- Change light-theme-2.5.0.css and msls-light-2.5.0.css to dark-theme-2.5.0.css and msls-dark-2.5.0.css respectively to use the
dark theme. Alternatively, you may replace light-theme-2.5.0.css with a custom jQuery Mobile theme. -->
<link rel="stylesheet" type="text/css" href="Content/light-theme-2.5.0.css" />
<link rel="stylesheet" type="text/css" href="Content/msls-light-2.5.0.css" />
<link rel="stylesheet" type="text/css" href="Content/jquery.mobile.structure-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="Content/msls-2.5.0.min.css" />
<!-- Default font, header, and icon styles can be overriden in user-customization.css -->
<link rel="stylesheet" type="text/css" href="Content/user-customization.css"/>
</head>
<body>
<div id="msls-id-app-loading" class="ui-body-a msls-layout-ignore">
<div class="msls-app-loading-img"></div>
<span class="ui-icon ui-icon-loading"></span>
<div class="ui-bottom-load">
<div>HTMLApp101.HTMLClient</div>
</div>
</div>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script type="text/javascript" src="Scripts/winjs-1.0.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="Scripts/datajs-1.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/Generated/resources.js"></script>
<script type="text/javascript" src="Scripts/msls-2.5.0.js"></script>
<script type="text/javascript" src="Scripts/Generated/generatedAssets.js"></script>
<!-- ADD THIS SCRIPT REFERENCE LAST -->
<script type="text/javascript" src="scripts/odatareadpatch.js"></script>
<script type="text/javascript">
$(document).ready(function () {
msls._run()
.then(null, function failure(error) {
alert(error);
});
});
</script>
</body>
</html>
/*
This script patches the OData read method
enabling us to inject operations before the results return to the LS runtime
*/
var origJsonReadFunc = OData.jsonHandler.read;
OData.jsonHandler.read = function (response, context) {
var result = origJsonReadFunc.call(OData.jsonHandler, response, context);
var data = response.data, results = data.results;
if (results) {
results.forEach(function (entity) {
//do stuff to each entity here
//call function to add Computed properties
myapp.addComputedProperties.call(this, entity);
});
}
return result;
};
myapp.addComputedProperties = function (entity) {
//get entity name ie: "LightSwitch.Customer" = "Customer"
var entityType = entity.__metadata.type.split(".").pop();
//get the entity class - this object contains all methods defined in Customer.lsml.js
var entityClass = myapp[entityType]
//build an array of property names from '_Compute' methods
var properties = [];
for (var p in entityClass) {
if (typeof entityClass[p] === "function" && p.indexOf("_Compute") > 0) {
prop = { name: p.split("_")[0], type: String };
properties.push(prop);
}
};
//console.log(properties);
//add the computed prop to this entity by calling the _Compute method
if (properties) {
properties.forEach(function (entry) {
var entryName = entry.name;
var computeMethod = entityClass[entryName + "_Compute"];
entity[entryName] = computeMethod.call(this, entity);
});
}
/*entry.get = function () {
return entry.getValue(this.details);
};*/
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment