I am trying out Dynatables and, so far, I am able to display my data correctly and update its contents when a certain event happens. So far, this is what I have: http://jsfiddle.net/pDVvx/28/
$(document).ready( function() {
var allSales = [{
locationId: 1001,
location: "Store A",
item: "Soap",
quantity: 2,
amount: 99.50
},{
locationId: 1002,
location: "Store B",
item: "Tissue",
quantity: 1,
amount: 49.75
}];
var allSales2 = [{
locationId: 2001,
location: "Store C",
item: "Bag",
quantity: 1,
amount: 10000.00
},{
locationId: 2002,
location: "Store D",
item: "Shoe",
quantity: 2,
amount: 5999.50
}];
var locationDetails = [{
locationId: 1001,
location: "Store A",
address: "some address here",
manager: "Pepito Manaloto"
},{
....
}];
var updateDynaTable = function(argument){
console.log("argument for updateDynaTable");
console.log(argument);
dynatable.settings.dataset.originalRecords = argument;
dynatable.process();
}
var dynatable = $('#my-final-table').dynatable({
dataset: {
records: allSales
}
}).data('dynatable');
$("#button1").click(function(){
updateDynaTable(allSales);
})
$("#button2").click(function(){
updateDynaTable(allSales2);
})
});
Furthermore, I want to make each location (Store A, Store B, etc.) a clickable link with the respective locationID associated with it. I need this so that whenever I click a store link, the corresponding store details (as shown in locationDetails table) will be prompted.
For example, if sales1 button is clicked and Store A is also clicked, a prompt (could be an alert) will show the store's address and manager (from locationDetails table).
If anyone can suggest any solution, that would be very helpful. Thank you!
I've been looking at this for the past 20 minutes or so and I'm coming to the conclusion that this is not going to be easy if you build your dynatable from JSON. I think that the countries example at the top of the dynatable site is probably built as a regular html table on the server side and then dynatable is just being used for sorting/pagination/etc.
Seems like the other likely option would be to return, in your JSON, the full content of the cells you want to create, including any links, etc (or postprocess the JSON in javascript to mangle it into the form you want).
Related
I am trying to implement google tag with event purchase to our ecommerce site. However the site is built in old ASP.NET. I need to push to the data layer all of items that were in the cart when the purchase was completed. I do have information which I want to push in code behing ascx.cs (information about number of products and specific properties for them) - I would like to use them on .asxc file where I do have javascript for pushing the informations to google tag manager. So it more or less looks like this:
<asp:PlaceHolder>
<script>
gtag("event", "purchase", {
transaction_id: "T_12345_1",
affiliation: "Google Merchandise Store",
value: 25.42,
tax: 4.90,
shipping: 5.99,
currency: "USD",
coupon: "SUMMER_SALE",
items: [
// If someone purchases more than one item,
// you can add those items to the items array
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
affiliation: "Google Merchandise Store",
coupon: "SUMMER_FUN",
currency: "USD",
discount: 2.22,
index: 0,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Adult",
item_category3: "Shirts",
item_category4: "Crew",
item_category5: "Short sleeve",
item_list_id: "related_products",
item_list_name: "Related Products",
item_variant: "green",
location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
price: 9.99,
quantity: 1
}]
});
</script>vvvv
</asp:PlaceHolder>
So more question is like this: is it possible to get data from ascx.cs file directly into .asxc, so I can put the data from there inside gta values like item_id, item_name etc. Or is there any other better way? For example use document.querySelector('') inside the script tag for each of the property values? Thanks in advance ;)
I'm trying to create a dataLayer variable so I can push the product name into the event label.
The dataLayer push when a user adds a product to cart is:
{
event: "addToCart",
gtm: {
uniqueEventId: 107,
start: 1666871102469,
scrollThreshold: 75,
scrollUnits: "percent",
scrollDirection: "vertical",
triggers: "30151582_46"
},
customer_id: "4cfa14bf-1749-47a3-9063-e19c0bc6f3a8",
ecommerce: {
currencyCode: "NZD",
add: {
products: [
{
name: "Panadol Rapid Soluble Tablets - Packet 20",
id: "FAH262",
price: 12.28,
brand: "Panadol",
category: "Web / Dental / Consumables / Anaesthetics / Pain" +
" Relief",
variant: "",
quantity: 1
}
]
}
}
}
I've tried to create a dataLayer variable with the following
ecommerce.add.products[0].name
This is returning undefined in preview mode when I do test add to carts.
Where am I going wrong?
You might need to change the DataLayer variable to
I can't really remember where I saw about this.
But when fetching data through here.
It is not regular get products[0].name but products.0.name
I am working on an offer letter template that will replace/modify Dynamic Data Points like Name, Address, Role, Salary, etc based on the candidate selected from a list of candidates. There is a fixed syntax for a dynamic data points i.e they will be enclosed within <<>>, for example :
Welcome to the family, <<Name>>
You will be paid <<Salary>> for the duration of your employment.
In other words, these few data points will change by selecting the candidate we want to offer the job and the rest of the template will remain the same. Here is a demo to help you understand.
This is a dummy array I have created with 1 template, In the real-world app, I can have many templates with different clauseNames, so I am looking for a permanent fix.
.ts file, Template List :
[{
templateId: 1,
templateName: "Offer",
clauses: [
{
clauseName: "Introduction",
clauseId: 1,
texts: [
{
text: "Hello <<Name>>, Welcome to the Machine",
textId: 1,
}]
},
{
clauseName: "Address",
clauseId: 2,
texts: [
{
text: "<<Address>>",
textId: 2,
}]
},
{
clauseName: "Date Of Joining",
clauseId: 3,
texts: [
{
text: "You can join us on <<DateOfJoining>>",
textId: 3,
}]
},
]
}]
and here is the candidate list,
candidateList = [
{ name: "Simba", address: "Some Random Cave" },
{ name: "Doe John", address: "line 4, binary avenue, Mobo" },
{ name: "B Rabbit", address: "8 mile road, Detroit" },
{ name: "Peter Griffin", address: "Spooner Street" },
{ name: "Speedy Gonzales", address: "401, hole 34, Slyvester Cat Road" },
{ name: "Morty", address: "Time Machine XYZ" },
{ name: "Brock", address: "pokeball 420, Medic center" },
]
You can use regular expressions to replace those placeholders such as:
var result = text.text.replace(/\<\<(.*?)\>\>/g, function(match, token) {
return candidate[token.toLowerCase()];
});
One way to incorporate this to your display is by creating a property that returns the formatted text.
I have updated your stackblitz here.
Take a look at this demo
I have modified the logic in below method:
showTeplate(name,address,doj) {
this.clauseList = [];
for (let a of this.templateList) {
if (a.clauses != null) {
for (let cl of a.clauses) {
const tempObj = JSON.parse(JSON.stringify(cl));
tempObj.texts.forEach(textObj => {
textObj.text = textObj.text.replace("<<Name>>",name);
textObj.text = textObj.text.replace("<<Address>>",address);
textObj.text = textObj.text.replace("<<DateOfJoining>>",doj);
})
this.clauseList.push(tempObj)
}
}
}
console.log("Clause list", this.clauseList)
}
I have dynamic children input fields that need to be rendered in a function, but when they are, then they are not included in inputData properly/not under the parent input field's key. When the children are included directly in the inputFields, it works as expected, but I can't use a function within the children array with Zapier.
Here is the inputData currently, when the line items are rendered in a function, the LI_ denotes that it is a child input key -
"inputData": {
"supplier": "1",
"LI_budget": 1,
"LI_tax": 1,
"company": "1",
"currency": "1",
"LI_price": "1",
"LI_description": "1"
}
I'm expecting ("parent" is the inputField parent key here):
"inputData": {
"supplier": "1",
"parent": [{
"LI_budget": 1,
"LI_tax": 1,
"LI_price": "1",
"LI_description": "1"
}],
"company": "1",
"currency": "1",
}
This is the function I'm using to pull in the parent and children input fields:
const getLineItems = async (z, bundle) => {
let lineItem = {
key: 'parent',
children: [{
key: 'LI_description',
label: 'Description',
required: true
},
{
key: 'LI_budget',
required: true,
label: 'Budget',
dynamic: 'budget.id'
},
{
key: 'LI_price',
required: true,
type: 'number',
label: 'Unit price',
helpText: 'Example: 50.25'
},
{
key: 'LI_tax',
required: true,
label: 'Tax Rate',
dynamic: 'tax_rate.id'
},
]
}
return [lineItem];
};
There are dynamic fields generated in the getLineItems function that I took out to simplify. TIA
Caleb here from Zapier Platform Support. This is a tough one! We have a pretty long-standing issue report on our platform for supporting custom fields with parent keys (it boils down to a chicken vs the egg problem that really makes my head spin when I read the discussion on the issue). Your inputFields function is spot-on, it's just a matter of properly storing it in the bundle on our part.
I think we could cobble together a workaround to unflatten it. Before I do that though, could you give this a test in the editor and submit actual line items from a previous step to this step? I'm not sure what the inputData looks like (e.g. if multiple items are split like 1,2,3 or in some other fashion). If you want to iterate on this, it might be better to switch over to our public developer Slack (http://zpr.io/ttvdr); then we can post the results here for the next person to run into this. 😁
I have a JSON file with multiple 'rows', how can i just show the rows i need?
In my case, i need to show the Name and Score, also, i need the IP to show up when i click a user's name, and do not show any UselessData rows.
(I do not require code for all that, i just need to get the general idea)
JSON File
{
"records": [
{
"name": "AAAA",
"score": 100,
"IP" : "0.0.0.0",
"UselessData" : "Whatever"
},
{
"name": "BBBB",
"score": 50,
"IP" : "1.1.1.1",
"UselessData" : "Whatever"
},
[...]
],
}
I've been searching through de Documentation and a bit of the Source Code, but did not see anything like it, i may have just skipped it though, because it seems like a basic setting, but i just cannot figure it out.
If I understand correctly, you're just needing an array of object with three properties. I think, what you can do is just to map through your records and return object with the data you just need. Something like this
x.records.map(function(record) {
return {name: record.name, score: record.score, IP: record.IP};
});