Skip to content

Instantly share code, notes, and snippets.

@shrutis22
Created Aug 29, 2016
Embed
What would you like to do?
First Visualforce to demonstrate data passing from one page to another.
<apex:page standardStylesheets="false" showHeader="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" cache="false" expires="0">
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Transferring Data Between VF Pages</title>
<link type="text/css" href="https://www.lightningdesignsystem.com/assets/styles/slds.css" rel="stylesheet" />
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<style type="text/css">
.slds-card {
height: 400px;
}
</style>
</head>
<body class="slds">
<div class="slds-m-around--large">
<!--Page Header-->
<div class="slds-page-header slds-m-bottom--small" role="banner">
<div class="slds-media slds-media--center">
<div class="slds-media__body">
<p class="slds-page-header__title slds-truncate slds-align-middle slds-text-heading--large">
<strong><i class="fa fa-exchange" aria-hidden="true"></i>&nbsp;Transferring data between VF Pages</strong>
</p>
<p class="slds-text-body--small page-header__info">3 different ways to send data from one VF page to another</p>
</div>
</div>
</div>
<div class="slds-grid slds-m-around--large">
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--4-of-12">
<!--URL Parameter Card-->
<article class="slds-card">
<header class="slds-card__header slds-grid">
<div class="slds-media slds-media--center slds-has-flexi-truncate">
<div class="slds-media__body slds-truncate">
<span class="slds-text-heading--medium">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-stack-1x fa-inverse fa-lg"><strong>1</strong></i>
</span>
</span>
</div>
</div>
</header>
<div class="slds-card__body slds-p-around--medium slds-text-heading--small">
Pass data via <strong>URL Parameters</strong>.
<br />
<br />
<strong><u>Pros</u></strong>
<ul class="slds-list--dotted">
<li>Simple to implement</li>
<li>Faster</li>
<li>No Storage required</li>
</ul>
<strong><u>Cons</u></strong>
<ul class="slds-list--dotted">
<li>Cannot send large amount of data</li>
<li>Less secure (If that's a concern)</li>
</ul>
<hr />
<div class="slds-form--inline slds-m-top--small">
<div class="slds-form-element">
<label class="slds-form-element__label">Data</label>
<div class="slds-form-element__control">
<input id="txtUrl" class="slds-input" type="text" />
</div>
</div>
<div class="slds-form-element">
<button id="btnUrl" class="slds-button slds-button--brand" type="button">
<i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp;Send
</button>
</div>
</div>
</div>
<div class="slds-card__footer">&nbsp;</div>
</article>
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--4-of-12">
<!--Local Storage Card-->
<article class="slds-card">
<header class="slds-card__header slds-grid">
<div class="slds-media slds-media--center slds-has-flexi-truncate">
<div class="slds-media__body slds-truncate">
<span class="slds-text-heading--medium">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-stack-1x fa-inverse fa-lg"><strong>2</strong></i>
</span>
</span>
</div>
</div>
</header>
<div class="slds-card__body slds-p-around--medium slds-text-heading--small">
Pass data with the help of <strong>Local Storage</strong>.
<br />
<br />
<strong><u>Pros</u></strong>
<ul class="slds-list--dotted">
<li>Pass large amount of data</li>
<li>Secure than URL parameter method</li>
</ul>
<strong><u>Cons</u></strong>
<ul class="slds-list--dotted">
<li>Some JavaScript required</li>
<li>Data is persistent.Chances to read older data</li>
<li>Cannot be triggered from Apex</li>
</ul>
<hr />
<div class="slds-form--inline slds-m-top--small">
<div class="slds-form-element">
<label class="slds-form-element__label">Data</label>
<div class="slds-form-element__control">
<input id="txtLocalStrg" class="slds-input" type="text" />
</div>
</div>
<div class="slds-form-element">
<button id="btnLS" class="slds-button slds-button--brand" type="button">
<i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp;Send
</button>
</div>
</div>
</div>
<div class="slds-card__footer">&nbsp;</div>
</article>
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--4-of-12">
<!--Form Post Card-->
<article class="slds-card">
<header class="slds-card__header slds-grid">
<div class="slds-media slds-media--center slds-has-flexi-truncate">
<div class="slds-media__body slds-truncate">
<span class="slds-text-heading--medium">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-stack-1x fa-inverse fa-lg"><strong>3</strong></i>
</span>
</span>
</div>
</div>
</header>
<div class="slds-card__body slds-p-around--medium slds-text-heading--small">
Pass data with the help of <strong>Form Post</strong> method.
<br />
<br />
<strong><u>Pros</u></strong>
<ul class="slds-list--dotted">
<li>Easy to implement</li>
<li>Secure</li>
<li>Little or No code required</li>
<li>Fast</li>
</ul>
<strong><u>Cons</u></strong>
<ul class="slds-list--dotted">
<li>Cannot be triggered from Apex</li>
</ul>
<hr />
<form class="slds-form--inline" action="{!$Page.Page2}" method="post" onsubmit="localStorage.clear()">
<div class="slds-form-element">
<label class="slds-form-element__label">Data</label>
<div class="slds-form-element__control">
<input id="txtFormPost" name="fdata" class="slds-input" type="text" />
</div>
</div>
<div class="slds-form-element">
<button class="slds-button slds-button--brand" type="submit">
<i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp;Send
</button>
</div>
</form>
</div>
<div class="slds-card__footer">&nbsp;</div>
</article>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
var dataTransfer = {
constants : {
variables : {
DATA_TO_SEND : null
},
elements : {
TEXT_URL : "txtUrl",
BUTTON_URL : "btnUrl",
TEXT_LS : "txtLocalStrg",
BUTTON_LOCAL_STORAGE : "btnLS"
},
eventNames : {
},
urls : {
SECOND_PAGE : "{!$Page.page2}"
},
keys : {
UDATA : "udata",
LDATA : "ldata"
}
},
helpers : {
bindEvents : function() {
$( "#" + dataTransfer.constants.elements.BUTTON_URL ).click(
function() {
dataTransfer.actions.sendViaUrl();
}
);
$( "#" + dataTransfer.constants.elements.BUTTON_LOCAL_STORAGE ).click(
function() {
dataTransfer.actions.sendViaLS();
}
);
}
},
actions : {
sendViaUrl : function() {
var constants = dataTransfer.constants;
localStorage.clear();
constants.variables.DATA_TO_SEND = $( "#" + constants.elements.TEXT_URL ).val();
var url = constants.urls.SECOND_PAGE + "?" +
constants.keys.UDATA + "=" +
constants.variables.DATA_TO_SEND;
location.href = url;
},
sendViaLS : function() {
var constants = dataTransfer.constants;
constants.variables.DATA_TO_SEND = $( "#" + constants.elements.TEXT_LS ).val();
localStorage.setItem( constants.keys.LDATA, constants.variables.DATA_TO_SEND );
location.href = constants.urls.SECOND_PAGE;
}
},
init : function() {
dataTransfer.helpers.bindEvents();
}
};
dataTransfer.init();
</script>
</body>
</html>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment