Since I haven’t found any example code on how to do this now that I finished it I wanted to post it. Disclaimer is that I am not a Javascript programmer I am much more comfortable in C so that any obvious mistakes i’m sorry about.
Here is a picture of what the page looks like. I can’t link to this for demonstration purposes because it is password protected.
Here is the code. I tried to make all the names self explanatory.
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
import { session } from ‘wix-storage’;
import wixWindow from ‘wix-window’;
$w.onReady( function () {
//TODO: write your page related code here…
});
//Toggles the database boolean filed “forSale”
export function ToggleButton_click(event) {
//Retrieve the row clicked in the table.
if (session.getItem(“row”) === null ) {
//If the stored item is null show an error.
wixWindow.openLightbox(“Error”);
} else {
//If the stored item is a number good,
//set it as the current index.
$w(‘#dataset2’).setCurrentItemIndex(session.getItem(“row”))
//Get the forSale item.
let item = $w(‘#dataset2’).getCurrentItem();
//Set field value opposite of what was there.
if (item.forSale === true ) {
$w(‘#dataset2’).setFieldValue(“forSale”, false );
} else {
$w(‘#dataset2’).setFieldValue(“forSale”, true );
}
//Save the entry.
$w(‘#dataset2’).save();
}
}
//click event insde table to set the row selected.
export function table1_rowSelect(event) {
//Clear the current session just in case.
session.clear();
//Grab the item clicked on. This is compensated for the page size and current page.
//Current page is one indexed and subtracting one makes it zero indexed.
//Current page minus one time page size give the number of database entries not shown.
//Then adding the row index give the selected row.
session.setItem(“row”, (($w(“#dataset2”).getCurrentPageIndex() - 1) * $w(“#dataset2”).getPageSize()) + event.rowIndex);
}
//Launches a light box that allows editing of an existing entry.
export function EditButton_click(event) {
//Retrieve the row clicked in the table.
if (session.getItem(“row”) === null ) {
//If the stored item is null show an error.
wixWindow.openLightbox(“Error”);
} else {
//chains together events for when the light box is closed.
//this refreshes the table to show data changes.
wixWindow.openLightbox(“Edit”).then(() => { $w(“#dataset2”).refresh() }).then(() => {
$w(“#table1”).refresh();
});
}
}
//Delets an entry from the database that was selected in the table.
export function DeleteButton_click(event) {
//Retrieve the row clicked in the table.
if (session.getItem(“row”) === null ) {
//If the stored item is null show an error.
wixWindow.openLightbox(“Error”);
} else {
//chains together events for when the light box is closed.
//this refreshes the table to show data changes.
wixWindow.openLightbox(“Delete”).then(() => { $w(“#dataset2”).refresh() }).then(() => {
$w(“#table1”).refresh();
});
}
}
//Refresh the table after saving database1.
//This event fires when a save completes.
//A completed save means there is new data to show.
export function dataset1_afterSave() {
//First refresh dataset2, this will pull new data from the database.
//The data does not autorefresh.
$w(“#dataset2”).refresh().then(() => {
//Once the new data is pulled, refresh the table.
$w(“#table1”).refresh();
});
}
//Uploads new images into the gallery. This may be used multiple times to load
//several images.
export function uploadButton_change(event) {
//Disable the submit button so that a submit does not happens
//while uploading.
$w(‘#SubmitButton’).disable();
//Beacuse everything is done manually some limits need to be set.
let uploadedImageSizeLimit = 15728640; //15MB
let databaseNumberOfImages = 10;
//The gallery might have been hidden so show it.
$w(“#gallery”).show();
//Grab the info about the selected file.
let selectedFile = $w(“#uploadButton”).value;
//Grab the size of the file.
let selectedFileSize = selectedFile[0].size;
//If the file size is less then the limit start the upload process.
if (selectedFileSize < uploadedImageSizeLimit) {
//Galleries don’t have validation like a text box.
//These items (red box and missing image text) are
//used to simulate that validation feel.
$w(“#MissingImage”).hide();
$w(“#MissingImage2”).hide();
//Hide the status text box. Since the text shown by upload button cannot
//be dirrectly controlled this avoids the file name shown on top of the txt.
$w(“#uploadStatusText”).hide();
//Start the upload and change the button label.
$w(“#uploadButton”).startUpload($w(“#uploadButton”).buttonLabel = “Uploading”)
.then((uploadedFile) => {
//Grab the URL that the file was loaded to.
let uploadfileurl = uploadedFile.url;
//Pull the existing items in the gallery.
//If the gallery was empty this just sets up the array.
let items = $w(“#gallery”).items;
//Push will append itmes to the array.
//Store the image to the array.
items.push({
“src”: uploadfileurl,
“description”: “”,
“title”: “”
});
//Now load the array with the newly appended item back into
//the gallery.
$w(“#gallery”).items = items;
//Reset the upload button.
$w(“#uploadButton”).reset();
//Change the button label back to the original one.
$w(“#uploadButton”).buttonLabel = “Add an Image”;
//Enable the delete image button because there are now
//images to delete.
$w(“#DeleteImageButton”).enable();
//Use the upload text to show the image uploaded successfully.
$w(“#uploadStatusText”).text = “Image Uploaded”;
//Now that the file name is gone, show the upload text.
$w(“#uploadStatusText”).show();
//When the max number of images is reached,
//disable the upload button.
if (items.length >= databaseNumberOfImages) {
$w(“#uploadButton”).disable();
}
//Play the gallery just in case.
$w(“#gallery”).play();
})
//If an error occures
. catch ((uploadError) => {
//Reset the upload button.
$w(“#uploadButton”).reset();
//Change the button label back to the original one.
$w(“#uploadButton”).buttonLabel = “Add an Image”;
//Use the upload text to show that a problem occured.
$w(“#uploadStatusText”).text = “File type not supported”;
//Now that the file name is gone, show the error text.
$w(“#uploadStatusText”).show();
});
} else {
//Reset the upload button.
$w(“#uploadButton”).reset();
//Use the upload text to show the max file size.
$w(“#uploadStatusText”).text = “Max FIle Size 15 MB”;
//Now that the file name is gone, show the upload text.
$w(“#uploadStatusText”).show();
}
//Enable submitt now that whatever is done.
$w(‘#SubmitButton’).enable();
}
//Store all the entered data. Validate data before storing.
export function SubmitButton_click(event) {
//Disable the Submit button to prevent multiclick.
$w(‘#SubmitButton’).disable();
//Create a flag that assumes eveything in the form is fine.
//The flag is set to false if something in the form is wrong.
let formGoodToGo = true ;
/Systematically validate all the inputs. This is done
because the sumbit happens manually. This also makes
sure that the required fields are sumbitted./
//Checks to see that the title is not blank.
$w(‘#TitleTextBox’).onCustomValidation((value, reject) => {
if (value === “”) {
//Something in the form is wrong.
formGoodToGo = false ;
//Set the reject text. Not sure if this is actually needed.
reject(“Blank”);
//Show the red box not that the data is invalid.
$w(‘#TitleTextBox’).updateValidityIndication();
} else {
//Reset the red box.
$w(‘#TitleTextBox’).resetValidityIndication();
}
});
//Checks to see that the type is not blank.
$w(‘#TypeDropdown’).onCustomValidation((value, reject) => {
if (value === “”) {
//Something in the form is wrong.
formGoodToGo = false ;
//Set the reject text. Not sure if this is actually needed.
reject(“Blank”);
//Show the red box not that the data is invalid.
$w(‘#TypeDropdown’).updateValidityIndication();
} else {
//Reset the red box.
$w(‘#TypeDropdown’).resetValidityIndication();
}
});
//Checks to see that the gallery is not empty.
if ($w(‘#gallery’).items.length === 0) {
//Something in the form is wrong.
formGoodToGo = false ;
//Show the red box not that the data is invalid.
//This is done manually since gallery does not have
//built in validity red box.
$w(‘#MissingImage’).show();
$w(‘#MissingImage2’).show();
} else {
//Reset the red box.
$w(‘#MissingImage’).hide();
$w(‘#MissingImage2’).hide();
}
//Check if the price entered is valid.
//A blank price is valid.
//The standard is dollars followed by 2 decimal places.
if ($w(‘#PriceTextBox’).valid === false ) {
//Something in the form is wrong.
formGoodToGo = false ;
}
//Check if the form is fine.
if (formGoodToGo === true ) {
//The form is fine, now store the data.
//When new data is pushed to the database a new entry is created automatically.
$w(‘#dataset1’).setFieldValue(“title”, $w(‘#TitleTextBox’).value);
$w(‘#dataset1’).setFieldValue(“type”, $w(‘#TypeDropdown’).value);
$w(‘#dataset1’).setFieldValue(“date”, $w(‘#datePicker1’).value);
$w(‘#dataset1’).setFieldValue(“forSale”, $w(‘#checkbox1’).checked);
$w(‘#dataset1’).setFieldValue(“price”, $w(‘#PriceTextBox’).value);
$w(‘#dataset1’).setFieldValue(“notes”, $w(‘#NotesTextBox’).value);
//Check if a Document is stored.
if (session.getItem(“Document”) !== “null”) {
//If it is, store it in the database.
$w(‘#dataset1’).setFieldValue(“patern”, session.getItem(“Document”));
}
//Grab the items from the gallery.
let items = $w(‘#gallery’).items;
//Grab the first image and store it as a thumbnail.
//The reason for the thumbnail is that a table can not display a gallery.
//The table shows the data nicly.
$w(‘#dataset1’).setFieldValue(“thumbnail”, items[0].src);
//Store the gallery.
$w(‘#dataset1’).setFieldValue(“image”, items);
//Now save the data.
$w(‘#dataset1’).save()
.then(() => {
//The save completed correctly,
//now clear the data out of the form
//and reset all parameters.
//Show the success message.
$w(‘#text18’).show();
$w(‘#TitleTextBox’).value = ‘’;
$w(‘#TypeDropdown’).value = ‘’;
let today = new Date();
$w(‘#datePicker1’).value = today;
$w(‘#checkbox1’).checked = false ;
$w(‘#PriceTextBox’).value = ‘’;
$w(‘#NotesTextBox’).value = ‘’;
while (items.length !== 0) {
items.splice(0, 1);
}
$w(‘#gallery’).items = items;
//Resetting the validity here will keep the text boxes from lighting up red.
$w(‘#TypeDropdown’).resetValidityIndication();
$w(‘#TitleTextBox’).resetValidityIndication();
//Reset the upload button.
$w(“#uploadButton2”).reset();
//Change the button label back to the original one.
$w(“#uploadButton2”).buttonLabel = “Add a Pattern”;
//Use the upload text to show the max file size.
$w(“#uploadStatusText2”).text = “Max FIle Size 35MB”;
//Now that the file name is gone, show the upload text.
$w(“#uploadStatusText2”).show();
//Reset the upload button.
$w(“#uploadButton”).reset();
//Use the upload text to show the max file size.
$w(“#uploadStatusText”).text = “Max FIle Size 15MB”;
//Now that the file name is gone, show the upload text.
$w(“#uploadStatusText”).show();
//Clear out the previously stored value of document.
session.setItem(“Document”, null );
//Disable the delete image button.
$w(‘#DeleteImageButton’).disable();
})
//If we get this far, hide the success message after 3 seconds.
.then(setTimeout( function () { $w(‘#text18’).hide(); }, 3000))
//If something goes wrong show the failure message for 3 seconds.
//I’m probably doing this wrong.
. catch (() => { $w(‘#text22’).show().then(setTimeout( function () { $w(‘#text22’).hide(); }, 3000)); })
} **else** {
//If something on the form is wrong then show the failure message.
$w(‘#text22’).show().then(setTimeout( function () { $w(‘#text22’).hide(); }, 3000));
}
//Re-enable the button after the form is submitted.
$w(‘#SubmitButton’).enable();
}
//Delete the currenlty shown image.
export function DeleteImageButton_click(event) {
//We need some limits.
let databaseNumberOfImages = 10;
//Grab the current index of the image shown.
let currentItem = $w(‘#gallery’).currentIndex;
//Store the items in the gallery in an array.
let items = $w(‘#gallery’).items;
//Using splice remove the item out of the array that
//matches the index of the image.
items.splice(currentItem, 1);
//If the upload button was disabled when the
//limit of images was reached this will re-enable the button
//since an image was just deleted.
if (items.length < databaseNumberOfImages) {
$w(‘#uploadButton’).enable();
}
//Store the items back in to the gallery.
$w(‘#gallery’).items = items;
//If the number of images is zero, disable the delete button.
if (items.length === 0) {
$w(‘#DeleteImageButton’).disable(). catch ((error) => { console.log(error) });
}
}
//Loads a document.
export function uploadButton2_change(event) {
//Disable the submit button so that a submit does not happens
//while uploading.
$w(‘#SubmitButton’).disable();
//Beacuse everything is done manually some limits need to be set.
let uploadedImageSizeLimit = 36700160; //35MB
//Clear out the previously stored value.
session.setItem(“Document”, null );
//Grab the info about the selected file.
let selectedFile = $w(‘#uploadButton2’).value;
//Grab the size of the file.
let selectedFileSize = selectedFile[0].size;
//If the file size is less then the limit start the upload process.
if (selectedFileSize < uploadedImageSizeLimit) {
//Hide the status text box. Since the text shown by upload button cannot
//be dirrectly controlled this avoids the file name shown on top of the txt.
$w(“#uploadStatusText2”).hide();
//Start the upload and change the button label.
$w(“#uploadButton2”).startUpload($w(“#uploadButton2”).buttonLabel = “Uploading”)
.then((uploadedFile) => {
//Grab the URL that the file was loaded to.
let uploadfileurl = uploadedFile.url;
//Now store the URS in the session file.
session.setItem(“Document”, uploadfileurl);
//Reset the upload button.
$w(“#uploadButton2”).reset();
//Change the button label back to the original one.
$w(“#uploadButton2”).buttonLabel = “Change the Pattern”;
//Use the upload text to show the image uploaded successfully.
$w(“#uploadStatusText2”).text = “Pattern Uploaded”;
//Now that the file name is gone, show the upload text.
$w(“#uploadStatusText2”).show();
})
//If an error occures
. catch ((uploadError) => {
//Reset the upload button.
$w(“#uploadButton2”).reset();
//Change the button label back to the original one.
$w(“#uploadButton2”).buttonLabel = “Add a Pattern”;
//Use the upload text to show that a problem occured.
$w(“#uploadStatusText2”).text = “File type not supported”;
//Now that the file name is gone, show the error text.
$w(“#uploadStatusText2”).show();
});
} else {
//Reset the upload button.
$w(“#uploadButton2”).reset();
//Use the upload text to show the max file size.
$w(“#uploadStatusText2”).text = “Max FIle Size 35 MB”;
//Now that the file name is gone, show the upload text.
$w(“#uploadStatusText2”).show();
}
//Enable submitt now that whatever is done.
$w(‘#SubmitButton’).enable();
}
