I am working with Veeva CRM, trying to use Click Stream Tracking. I have the code which I am using and trying to track the Presentation id, Product Key Message, track an Element Description and Answer.
Can anybody help with the code that I am using.
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CLM_CERT_HCPName</title>
<!-- Bootstrap -->
<link href="css/style.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<script src="js/veeva-library-3.0.js"></script>
<script>
function start(){
header_getAccountName();
}
function header_getAccountName(){ com.veeva.clm.getDataForCurrentObject("Account","Name",header_displayAccountName)}
function header_displayAccountName(result){
var AccountNameHTML = document.getElementById("hcpName");
AccountNameHTML.innerHTML += result.Account.Name;com.veeva.clm.getDataForCurrentObject("Presentation","Survey_vod__c",header_getSurveyID);
}
function mySaveObject(){
//This is the start of my JSON object
var myCallClickStream = {Call_vod__c, Key_Message_vod__c};
//i am using my JSON obj name with the field API name of the call clickstream object obj.apiName then set the value. obj.apiName= value;]
// Create the record using the com.veeva.clm.createRecord
com.veeva.clm.createRecord("Call_ClickStream_vod_c", myCallClickStream, printSavedResults)}
function printSavedResults(result){
alert(JSON.stingify(result));
}
</script>
</head>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
I have also some sample code to try out but not sure what I am doing wrong.
function mySaveObject(){
var myCallClickStream = {};
myCallClickStream.Text_Entered_vod__c = "i will put some text here";
com.veeva.clm.createRecord("Call_Clickstream_vod__c", myCallClickStream, printSavedResults)
}
function printSavedResults(result) {
alert(JSON.stringify(result));
}
Not sure if you still need help on this or not. But my team uses a simple method in every project to simplify the tracking process. The below was modified to fit some of your naming conventions/needs.
// clmDescription - string submitted as the description to be tracked
// clmAnswer - string submitted as the answer to be tracked`
// callback - call back function which will be used to return the information
function mySaveObject( clmDescription, clmAnswer, clmCallback ) {
var url = window.location.pathname,
filename = url.substring(url.lastIndexOf('/') + 1),
clmTrackingID = filename.replace(".html", "");
var myCallClickStream = {};
myCallClickStream.Track_Element_Id_vod__c = clmTrackingID;
myCallClickStream.Track_Element_Type_vod__c = clmDescription;
myCallClickStream.Selected_Items_vod__c = clmAnswer;
myCallClickStream.Track_Element_Description_vod__c = clmAnswer;
// var myJSONText = JSON.stringify( myCallClickStream );
com.veeva.clm.createRecord( Call_Clickstream_vod__c, myCallClickStream, clmCallback );
}
Simply call the method and pass in your parameters, including your callback method.
Hope this helps!
Related
data.indexOf is not a function error in Tabulator JavaScript Library.
Complete error message:
[Error] TypeError: data.indexOf is not a function. (In 'data.indexOf("{")', 'data.indexOf' is undefined)
load (tabulator.js:6075)
_loadInitialData (tabulator.js:7971)
_create (tabulator.js:7841)
(anonieme functie) (tabulator.js:7756)
And warning:
Table Not Initialized - Calling the redraw function before the table is initialized may result in inconsistent behavior, Please wait for the `tableBuilt` event before calling this function
I used the setup as described in the doc, browser based so tabulator.js and tabulator.css in the location that is in the html. Nothing else done.
My HTML:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/tabulator.css">
<!-- <link rel="stylesheet" href="css/tabulator.css.map"> -->
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/style.css">
<script defer src="js/tabulator.min.js"></script>
<script defer src="js/crud.js"></script>
<script defer src="js/data.js"></script>
<script defer src="js/assess.js"></script>
<title>DMMA</title>
</head>
<body>
<main id="home">
<h1 class="center-text dark-blue-text">Datamanagement Maturity Assessment</h1>
<div id="entree" class="container"></div>
<div class="output container"></div>
</main>
</body>
</html>
My javascript in assess.js:
document.addEventListener('DOMContentLoaded', async function() {
// the assObj is the data of assessment objects I want to retrieve
const assObj = new dataProvider;
// Use Tabulator
assObj.get('api.php/records/AssmntPlusObjects')
// .then(async dataArray => displayRecords(dta, false)) // Works!
.then(dataArray => {
let table = new Tabulator("#entree", {
data: dataArray,
autoColumns: true
})
})
.catch(err => displayError(err, null))
});
The assObj.get goes to a fetch class that gets the data from a MySQL database that gets the data via a PHP generic API. That all works.
The data array with objects is transformed to JavaScript object OK. The Tabulator gives the above error.
The site is on an internet provider host, I don't want to run another MySQL locally.
Any suggestions? Setup wrong?
dataArray is either empty or undefined. Check by console.log(dataArray)
Found the culprit! I needed get to the records in dataArray with
data: dataArray.records,
That's it!
I found that amazing because in a custom table function I built with the data (the displayRecords(dataArray, false)) it just worked without the .records property.
Thanks for putting me on the track of the contents of the dataArray.
PLeaseHelp. it wont show the Value, even for form authentication, to get username & password values,I was trying the same methods.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="result">Selected movie is </h1>
<select id="movie" onchange="showmovie()">
<option value="Spiderman">Spiderman</option>
<option value="Spiderman2">Spiderman2</option>
<option value="Spiderman3">Spiderman3</option>
</select>
</body>
</html>
<script>
var movie = document.getElementById("movie").value
function showmovie(){
alert("Changed")
document.getElementById("result").innerHTML="Movie chosen is"+movie
}
</script>
Try with this function showmovie
<script>
function showmovie() {
//Selected option
var selectedMovie = document.getElementById("movie").value;
document.getElementById("result").innerHTML = "Movie chosen is " + selectedMovie;
}
</script>
The issue here is because of the line var movie = document.getElementById("movie").value being executed just one time at the beginning (you could verify that adding console.log(movie); just after the movie variable declaration)
(movie stores then the value 'Spierdaman') and it never executes again with the calls for showmovie() function, so you could just move the movie declaration line above inside the function so it executes each time the action occurs and then having the good values.
Other details : To have a compliant code i suggest moving the script bloc to part just before and dont forget to add semicolons ';' at the end of each line ! + Better approach would be to use an eventListener as suggested by #T.J. Crowder in comments section above
I have created a simple login page with hardcoded username and password, I was successful in calling the next page once the login credentials are passed but I am having a tough time passing the user name entered in page 1 to appear on page 2.
I tried to find a way to make user inputs as global variables in js file so I can use the same variables in the second page but I am unsuccessful.
greeter.html
<body>
<h1>Simple Login Page</h1>
<form name="login">
Username<input type="text" name="userid"/>
Password<input type="password" name="pswrd"/>
<input type="button" onclick="check(this.form);" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<p id = "passwarn"></p>
<script language="javascript" src="source.js">
</script>
</body>
source.js
function check(form) { /*function to check userid & password*/
/*the following code checkes whether the entered userid and password are
matching*/
let uid = form.userid.value;
let pswrd = form.pswrd.value;
if(uid == "shiva" && pswrd == "mypswrd") {
window.open('test.html')/*opens the target page while Id & password
matches*/
}
else {
document.getElementById("passwarn").innerHTML = "User name or
password is incorrect!"/*displays error message*/
}
}
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script language="javascript" src="source.js"></script>
<h1> Hello <span id = "UI"></span></h1>
</body>
</html>
I want Hello shiva printed on the test.html page, I do not want to use jquery while doing so, is there any way?
You can simply reference the value from the opening page in test.html.
To make things more straightforward, add an ID to the Username field :
Username <input type="text" name="userid" id="userid">
Then you can grab and display the value from the opened window like this :
<h1> Hello
<script>
document.write(window.opener.document.getElementById("userid").value)
</script>
</h1>
If you want to do things a little more elegantly, you could keep the scripting in your .js file and change the innerHTML of your "UI" span from there.
Bear in mind that cross-origin scripting rules mean that this will only work when served from the same domain.
Following on from the comments from your question two key points to identify
This is a very insecure way to do this
You may want to use cookies if the user if going to traverse many pages (not sponsoring, but I would recommend js-cookie, I have used it for a while and it's pretty robust)
In order to get what i believe you wanted to work i had to do a couple of this.
Put your JS on the page as for testing it quicker to have it all accessible on one page
I use function that is for parameter grabbing (yes this is completely insecure but would achieve what you want, a cookie would be more secure) you can find it here.
I renamed your inputs from names to ID's as they are more accessible in javascript this way.
This function when used with decode and encode URI components in javascript will help you pass the data from one page to another see code below
Greeter.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Simple Login Page</h1></script>
<form name="login">
Username<input type="text" id="userid"/>
Password<input type="password" id="pswrd"/>
<input type="button" value="Login" id="LoginSubmit"/>
<input type="reset" value="Cancel"/>
</form>
<p id = "passwarn"></p>
<script type="text/javascript" src="./source.js"></script>
</body>
</html>
then your test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1> Hello <span id="UI"></span></h1>
<script type="text/javascript" src="./source.js"></script>
</body>
</html>
Finally your source.js
window.onload = checkpage(window.location.href);
function checkpage(url){
if(url.split('/').pop() == 'greeter.html'){
document.getElementById('LoginSubmit').addEventListener('click',function () {
var uid = document.getElementById('userid').value;
var pswrd = document.getElementById('pswrd').value;
console.log(uid, pswrd);
check(uid, pswrd);
});
}
else{
document.getElementById("UI").innerHTML = getAllUrlParams(decodeURIComponent(window.location.href)).uid;
}
}
function check(uid, pswrd) { /*function to check userid & password*/
/*the following code checkes whether the entered userid and password are
matching*/
let redirect = "test.html"
let parameters = encodeURIComponent('uid='+uid);
if(uid == "shiva" && pswrd == "mypswrd") {
window.open(redirect+"?"+parameters)/*opens the target page while Id & password
matches*/
}
else {
document.getElementById("passwarn").innerHTML = "User name or password is incorrect!"/*displays error message*/
}
}
function getAllUrlParams(url) {
// get query string from url (optional) or window
var queryString = url ? url.split('?')[1] : window.location.search.slice(1);
// we'll store the parameters here
var obj = {};
// if query string exists
if (queryString) {
// stuff after # is not part of query string, so get rid of it
queryString = queryString.split('#')[0];
// split our query string into its component parts
var arr = queryString.split('&');
for (var i = 0; i < arr.length; i++) {
// separate the keys and the values
var a = arr[i].split('=');
// set parameter name and value (use 'true' if empty)
var paramName = a[0];
var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];
// (optional) keep case consistent
paramName = paramName.toLowerCase();
if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();
// if the paramName ends with square brackets, e.g. colors[] or colors[2]
if (paramName.match(/\[(\d+)?\]$/)) {
// create key if it doesn't exist
var key = paramName.replace(/\[(\d+)?\]/, '');
if (!obj[key]) obj[key] = [];
// if it's an indexed array e.g. colors[2]
if (paramName.match(/\[\d+\]$/)) {
// get the index value and add the entry at the appropriate position
var index = /\[(\d+)\]/.exec(paramName)[1];
obj[key][index] = paramValue;
} else {
// otherwise add the value to the end of the array
obj[key].push(paramValue);
}
} else {
// we're dealing with a string
if (!obj[paramName]) {
// if it doesn't exist, create property
obj[paramName] = paramValue;
} else if (obj[paramName] && typeof obj[paramName] === 'string'){
// if property does exist and it's a string, convert it to an array
obj[paramName] = [obj[paramName]];
obj[paramName].push(paramValue);
} else {
// otherwise add the property
obj[paramName].push(paramValue);
}
}
}
}
return obj;
}
So long as your HTML files are in the same folder you can run this. The main thing to notice is that you are binding the event listener to the element, getting the values input and then submitting them to the function.
I have added a function that retrieves the url of the page location and pops out the last bit of it and runs a check on it to ensure you are looking at the right place to run the correct code. as this runs on load then the subsequent functions run after. You can further refactor this to modularise it and ensure that it's cleaner to read if you wanted.
Splitting it out this way will make it easier when trying to implement a cookie as you can in the event listener (with a cookie created) can save those values to it on your greet page and then call them back after on your test page.
Hope that helps
I'm trying to get some dynamic content to display based on UTMs in my URL. While I can call the function in the browser to get the content to display, it isn't doing so on page load. (Function works, but my timing must be off)
I've tried to change the order in which I call jQuery and my JS file, but either way it doesn't show unless I paste my function into chrome dev tools.
Here's the relevant part of the function:
// regex to find the URL param above
var dynamicContent = getParameterByName('dc');
$(document).ready(function() {
if (dynamicContent == 'fintech') {
$('#fintech').show();
}
else if (dynamicContent == 'martech') {
$('#martech').show();
}
//... excluded remaining options
else {
$('#default-content').show();
}
And the HTML:
<span id="default-content" class="dynamic-content">Tech</span>
<span id="fintech" class="dynamic-content">Fintech</span>
<span id="martech" class="dynamic-content">Martech</span>
<!-- excluded remaining options -->
And here's my header in case there's a different way I should be calling everything:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="assets/dynamic.js" type="text/javascript"></script>
</head>
Again, as copying/pasting my code into dev tools after the page load works, how do I time it so that this function runs on page load?
Thanks.
Maybe try this:
$(window).on('load', function () {
var dynamicContent = getParameterByName('dc');
if (dynamicContent == 'fintech') {
$('#fintech').show();
}
else if (dynamicContent == 'martech') {
$('#martech').show();
}
//... excluded remaining options
else {
$('#default-content').show();
}
});
I have a cloud pages.
On this page , i have
SSJS script , which retrives records from a data extension. From the count column in the data extension , i want to create a array like
dataarray = [10,20,30,40,50]
Then i need to pass this array (dataarray ) to another script where i can use it in d3.
The problem i am facing is how to pass values from a script which run at server to a script which run in client . I have tried hidden html element method which does not work and does not garrentte seq of script execution.
can you please advise how to pass values .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://www.abc.nl/favicon.ico">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
</head>
<body>
<script runat="Server">
Platform.Load("core","1.1.5");
var data_rec;
try
{
var myDE = DataExtension.Init('01_Reporting_Sent_Today');
var filter = {Property:'return',SimpleOperator:'equals',Value:'1'};
var data = myDE.Rows.Retrieve(filter);
data_rec = data.length;
Write("<br/>The len is :" + Stringify(data_rec))
}catch(ex)
{
Write("<br/>The error is :" + Stringify(ex))
}
</script>
<script>
var datachart = [10,20,30,40,50];
var canvas = d3.select("body")
.append("svg")
.attr("width",500)
.attr("height",500)
var bars = canvas.selectAll("rect")
.data(datachart)
.enter()
.append("rect")
.attr("width",function (d) { return d;})
.attr("height",50);
</script>
</body>
</html>
so the dataarray from first script , i need to use in second script
You can use AMPScript to return the value inside the JS script:
Update: fixed incorrect syntax in my example as pointed out by Reidenshi
<script runat="server">
...
var dataString = Stringify(data);
Variable.SetValue("#dataString", dataString);
</script>
<script>
var data = JSON.parse(%%=v(#dataString)=%%);
</script>