Last updated June 25, 2019
Create an organization Order Frame that will display differently depending on Order Form Type.
If you want to create an Order Frame, say a ‘Order Form Summary’ frame that will display different content depending on the Order Form type, you can use the below snippet:
Copy the Hook Id, which can be found in the url top of the Hook Overview
Create and name an Order Frame. In the url portion of the frame creation, insert the below url with the hook id, copied from the Hook Overview, immediately after the =:
https://lib-frames.factoryfour.com/frame.html?container=INSERT_ORG_ID&taskId=INSERT_TASK_ID
Note: This snippet contains content for 2 forms but can easily be adjusted for 1 or N.
/*
* Templates is an object that defines what fields get rendered and how the data is extracted from the form
*/
const templates = {
default: {
// if there is no other match based off device id, the default will get used
fields: {
widgetType: {
label: 'Widget Type',
},
quantity: {
label: 'Quantity',
},
material: {
label: 'Material',
},
finish: {
label: 'Finish',
},
size: {
label: 'Size',
},
},
extractData: form => {
const data = {};
data.widgetType = form.General.WidgetType;
data.quantity = form.General.Quantity;
data.material = `${form.General.WidgetMaterial}: ${form.General[
`${form.General.WidgetMaterial}Type`
]}`;
data.finish = form.General.Finish;
data.size = form.General.Size;
if (data.size === 'Custom:') {
const { Unit, Length, Width, Depth } = form.General;
const un = Unit || '';
data.size = `Custom: ${Length}${un} x ${Width}${un} x ${Depth}${un}`;
}
return data;
},
},
'v2-04a49523-346d-4cab-acc2-b344ce91a8f8': {
name: 'Simple Widget', // name field doesn't get used
// just useful so we don't have to look up this deviceiD
fields: {
widgetType: {
label: 'Widget Type',
},
quantity: {
label: 'Quantity',
},
material: {
label: 'Material',
},
size: {
label: 'Size',
},
},
extractData: form => {
const data = {};
data.widgetType = form.General.WidgetType;
data.quantity = form.General.Quantity;
data.material = `${form.General.WidgetMaterial}`;
data.size = form.General.Size;
if (data.size === 'Custom:') {
const { Unit, Length, Width, Depth } = form.General;
const un = Unit || '';
data.size = `Custom: ${Length}${un} x ${Width}${un} x ${Depth}${un}`;
}
return data;
},
},
};
module.exports = function(context, cb) {
if (!context.body) {
return cb('No body given');
}
console.log(context.body.context.order.deviceId);
const { stages } = context.body.context.order;
let fields;
let extractData;
if (templates[context.body.context.order.deviceId]) {
({ fields, extractData } = templates[
context.body.context.order.deviceId
]);
} else {
({ fields, extractData } = templates.default);
}
const data = extractData(stages);
return cb(null, {
fields,
data,
columns: 1,
});
};
