In this tutorial, you’ll learn how to create a custom dashboard that will allow you to print shipping labels. This tutorial will take you step by step — enabling developers tools, adding a dashboard page, read from the Orders collection and connect the data to elements on the page using Wix Code.
The end product: A page that contains all your orders in a printable shipping label format
Full tutorial here :
Excellent & useful piece of code
I just implemented it & have one issue - my address fields (both billing & shipping) have telephone number as the last line of the address. I don’t want this tel number appearing on the labels as I ship via national post, not couriers.
Is there any way to format this address data to remove the last filled-in line (phone number) from appearing on the printed labels?
@zeevg
Thanks for the speedy reply
The text I see in Billing info is
{“address”:{“formatted”:“11 Oaklands Park, Ballsbrdige\nDublin, Dublin D04 RF24\nIreland\n+35316687572”},“firstName":“Bill”,“lastName”:“Maher”,“email”:"bill.maher@gmail.com”,“phone”:“+35316687572”,“paymentMethod”:“offline”}
I thought I could use shipping Info instead but the address also contains phone number
{“deliveryOption”:“Registered Post”,“estimatedDeliveryTime”:“usually 2 -3 days”,“shipmentDetails”:{“address”:{“formatted”:“11 Oaklands Park, Ballsbrdige\nDublin, Dublin D04 RF24\nIreland\n+35316687572”},“firstName":“Bill”,“lastName”:“Maher”,“email”:"bill.maher@gmail.com”,“phone”:“+35316687572”},“pickupDetails”:null}
Thanks for your code suggestion - can I ask some questions, please?
I need to split the address data into array elements based on ‘\n’ not ‘,’ divider
Hi, I am glade you like it!
Currently the formatted address is the only way to access address data.
In the future we will expose all the address fields so that the user can formate his own address.
For now, you can use this workaround:
If you want to remove the phone number which is in the last line, you can use some simple javascript code:
// e.g. for : "235 W 23rd St, New York, NY 10011, USA, 972-543434343";
const address = itemData.shippingInfo.shipmentDetails;
const array = address.split('\n'); //split into array by "\n"
const phoneNumber = array.pop(); //remove last item from array
const addressWithoutPhone = array.join('\n'); // create new string, separate each item by comma
console.log(addressWithoutPhone); //addressWithoutPhone has address without last line
Please note that this code always removes that last line…
If you need help with javascript, I can help 
FYI, I have fixed a bug in the tutorial, it took billing info instead of shipping info. They are not always the same
@john-f-kenny yes, I have updated the replay, you must have read the old one.
in any case you are correct there is a phone number there.
You can use “\n” instead of “,”. actually that is what I meant but wrote comma for some reason…
Please feel free to ask anything
@zeevg forgive my inexperience (none) with javascript but how do I amend this code to achieve what I want - eliminate the phone number from the label print?
const $repeater = $w(“#repOrders”);
$repeater.onItemReady(($w, itemData, index) => {
const $address = $w(“#txtAddress”);
const $fullName = $w(“#txtFullName”);
$fullName.text = ${itemData.billingInfo.firstName} ${itemData.billingInfo.lastName};
$address.text = itemData.shippingInfo.shipmentDetails.address.formatted;
const $array = $address.split(‘\n’); //split into array by “\n”
const $phoneNumber = $array.pop(); //remove last item from array
const $addressWithoutPhone = $array.join(‘\n’); // create new string, separate each item by \n
console.log($addressWithoutPhone);
});
@john-f-kenny
Don’t worry about it, I am happy to help
here you go:
const $repeater = $w("#repOrders");
$repeater.onItemReady(($w, itemData, index) => {
const $address = $w("#txtAddress");
const $fullName = $w("#txtFullName");
$fullName.text = `${itemData.billingInfo.firstName} ${itemData.billingInfo.lastName}`;
const address = itemData.shippingInfo.shipmentDetails.address.formatted;
const array = address.split('\n'); //split into array by "\n"
const phoneNumber = array.pop(); //remove last item from array
const addressWithoutPhone = array.join('\n'); // create new string, separate each item by comma
$address.text = addressWithoutPhone; //set new address to address label in view
});
This seems to do it but is it more awkward than it should be?
const $array = $address.text.split(‘\n’); //split into array by “\n”
const $phoneNumber = $array.pop(); //remove last item from array
const $addressWithoutPhone = $array.join(‘\n’); // create new string, separate each item by \n
$address.text = $addressWithoutPhone;
@john-f-kenny checkout my code from prev message, I think you missed it
@zeevg Thanks, yes I missed it while I was posting - I knew mine was awkward but worked - I’ll revert it to your more elegant code
PS. Works perfectly, thanks!
Full code without the phone enjoy 
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixData from 'wix-data';
import wixLocation from 'wix-location';
$w.onReady(function () {
//This code runs when the page is loaded
initUI();
initOrders();
});
function initUI() {
//open current page in new tab for clean print view
const $printView = $w('#btnPrintView');
$printView.link = wixLocation.url;
$printView.target = '_blank';
}
function initOrders() {
return loadOrders().then((loadedOrders) => {
initOrdersRepeater(loadedOrders)
});
}
function loadOrders() {
return wixData.query('Stores/Orders')
.limit(100)
.find()
.then((results) => {
//wixcode does not support filtring by fulfillmentStatus yet. So we do it manually here
return results.items.filter(item => (item.fulfillmentStatus === 'NOT_FULFILLED' && item.paymentStatus !== "PARTIALLY_REFUNDED" && item.paymentStatus !== "FULLY_REFUNDED"));
});
}
function initOrdersRepeater(orders) {
const $repeater = $w("#repOrders");
$repeater.onItemReady(($w, itemData, index) => {
const $address = $w("#txtAddress");
const $fullName = $w("#txtFullName");
$fullName.text = `${itemData.billingInfo.firstName} ${itemData.billingInfo.lastName}`;
const address = itemData.shippingInfo.shipmentDetails.address.formatted;
const array = address.split('\n'); //split into array by "\n"
const phoneNumber = array.pop(); //remove last item from array
const addressWithoutPhone = array.join('\n'); // create new string, separate each item by comma
$address.text = addressWithoutPhone; //set new address to address label in view
});
$repeater.data = orders;
$repeater.show();
}
export function btnHideButtons_click(event) {
$w('#btnPrintView').hide();
$w('#btnHideButtons').hide();
}