Skip to content

Instantly share code, notes, and snippets.

@metadaddy

metadaddy/MobileInventory.page

Last active December 21, 2015 04:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save metadaddy/6247566 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save metadaddy/6247566 to your computer and use it in GitHub Desktop.
Download ZIP
After uploading photo
Raw
MobileInventory.page
<apex:page standardStylesheets="false" showHeader="false" sidebar="false"
standardController="Merchandise__c" extensions="MobileInventoryExtension"
recordSetVar="products">
<head>
<title>Mobile Inventory</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<apex:stylesheet value="{!URLFOR($Resource.jquerymobile130, 'jquery.mobile-1.3.0.min.css')}" />
<apex:stylesheet value="{!$Resource.style}" />
<apex:includeScript value="{!$Resource.jquery191}"/>
<apex:includeScript value="{!URLFOR($Resource.jquerymobile130, 'jquery.mobile-1.3.0.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.cordova230, cordovaLib)}"/>
<apex:includeScript value="{!$Resource.forcetk}"/>
<script>
var dataChanged = false;
var forcetkClient = new forcetk.Client();
forcetkClient.setSessionToken('{!$Api.Session_ID}');
// Log JS errors to console
window.onerror = function(message, url, lineNumber) {
console.log("Error: "+message+" in "+url+" at line "+lineNumber);
};
$(document).ready(function() {
$(".reloadLink").click(function() {
// true forces the page to be reloaded from the server
location.reload(true);
});
$(".updateButton").click(function() {
var id = $(this).attr('data-id');
var merchRecord = {
id: id,
Quantity__c: parseInt($("#quantity"+id).val()),
Price__c: parseFloat($("#price"+id).val())
};
$.mobile.showPageLoadingMsg();
MobileInventoryExtension.updateMerchandiseItem(merchRecord, handleUpdate);
});
$(".photoButton").click(function() {
// Which photo button was pressed?
var sourceType = $(this).hasClass('cameraButton')
? Camera.PictureSourceType.CAMERA
: Camera.PictureSourceType.PHOTOLIBRARY;
var id = $(this).attr('data-id');
navigator.camera.getPicture(function(imageData) {
onPhotoDataSuccess(imageData, id);
}, function(errorMsg) {
// Most likely error is user cancelling out of camera
alert(errorMsg);
}, {
quality: 50,
correctOrientation: true,
sourceType: sourceType,
destinationType: Camera.DestinationType.DATA_URL
});
});
});
function handleUpdate(result,event) {
console.log('Response from server: '+result);
alert(result);
if (result == 'Item Updated') {
dataChanged = true;
}
$.mobile.hidePageLoadingMsg();
}
function onPhotoDataSuccess(imageData, recordId) {
console.log("in onPhotoDataSuccess, Merchandise id = " + recordId);
// Upload the image data to Chatter files
$.mobile.showPageLoadingMsg();
forcetkClient.create('ContentVersion', {
"Origin": "H",
"PathOnClient": "image.png",
"VersionData": imageData
}, function(data) {
$.mobile.hidePageLoadingMsg();
alert('Success! Created ContentVersion ' + data.id);
}, onErrorSfdc);
}
function onErrorSfdc(error) {
$.mobile.hidePageLoadingMsg();
console.log("onErrorSfdc: " + JSON.stringify(error));
alert(JSON.stringify(error));
}
</script>
</head>
<body>
<!-- Main page, to display list of Merchandise once app starts -->
<div data-role="page" data-theme="b" id="mainpage">
<!-- page header -->
<div data-role="header">
<!-- button for reloading the page -->
<a href='#' class="reloadLink" data-role="button" data-icon='refresh'>
Reload
</a>
<!-- page title -->
<h2>Merchandise</h2>
</div>
<!-- page content -->
<div id="#content" data-role="content">
<img class="logo" width="200" src="{!$Resource.logo}"></img>
<!-- list of merchandise, links to detail pages -->
<ul data-inset="true" data-role="listview" data-theme="a"
data-dividertheme="a">
<apex:repeat value="{!products}" var="product">
<li>
<a href="#detailpage{!product.Id}">
{!product.Name}
</a>
</li>
</apex:repeat>
</ul>
</div>
</div>
<!-- Detail page, to display details when user clicks specific Merchandise record -->
<apex:repeat value="{!products}" var="product">
<div data-role="page" data-theme="b" id="detailpage{!product.Id}">
<!-- page header -->
<div data-role="header">
<!-- button for going back to mainpage -->
<a href='#mainpage' id="backInventory" class='ui-btn-left'
data-icon='home'>
Home
</a>
<!-- page title -->
<h1>Edit</h1>
</div>
<!-- page content -->
<div id="#content" data-role="content">
<h2 id="name">
<apex:outputField value="{!product.Name}"/>
</h2>
<div data-role="fieldcontain">
<label for="quantity{!product.Id}">Quantity:</label>
<input type="text" id="quantity{!product.Id}"
value="{!ROUND(product.Quantity__c, 0)}"/>
</div>
<div data-role="fieldcontain">
<label for="price{!product.Id}">Price ($):</label>
<input type="text" id="price{!product.Id}"
value="{!product.Price__c}"/>
</div>
<a href="#" data-role="button" data-id="{!product.Id}"
class="updateButton" data-theme="b">
Update
</a>
<a href="#" data-role="button" data-id="{!product.Id}"
class="photoButton cameraButton" data-theme="b">
Take Photo with Camera
</a>
<a href="#" data-role="button" data-id="{!product.Id}"
class="photoButton photoLibButton" data-theme="b">
Upload from Photo Library
</a>
</div>
</div>
</apex:repeat>
</body>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment