"Every conservation effort starts with documentation and listing". With this philosophy in mind I was approached by the team at , a heritage walk's group (where I also volunteer) and to build a for the beautiful city of Dehradun and its surrounding areas. Been There, Doon That? INTACH or the Indian National Trust for Art and Cultural Heritage digital registry With the prospect of registering thousands of trees and the memories we share with them, I knew that this was a complex and dynamic project which requires a flexible platform. Luckily, my experience with Wix and the made me know almost instantly that Velo would be the right fit. With , a project such as this can be spread at a global level and not stay limited to serve only the memories of our city in the Himalayan foothills. Velo integrated development environment (IDE) Velo Heritage Trees Registry In the course of explaining how I built the registry, I will also highlight the importance of key features of and the which not only made this possible but a breeze to develop. Velo Velo API These are: . Custom Forms . Velo / Wix Collections . Dynamic Category and Item Pages Several APIs within the , and API Docs. Wix Data Wix Dataset Wix Editor Elements However, please note that I will only touch upon some unique things that I did and will give references to docs and forum posts for general guidance on Velo functionality. If you are trying to build a similar registry and need further guidance, feel free to reach out to me on . LinkedIn Note: Here are the separate topics covered in this article: Getting users to create a unique ID. Building for dynamic category pages (applicable to normal pages as well). advanced filters with a seamless reset button Using multi-reference fields with dynamic item pages. Building a with monthly count for scores or in our case tree info/story contributions using and other APIs.] leaderboard or stats page wixData.aggregate So here we go... First up, an overview of how the registry works at a conceptual level:        (refer to the infographic below) The Custom Form: The Form was built using custom input elements (ref. and my previous to learn how to create the underlying form). custom elements article on building advanced forms Although this is a standard custom form in wix, what is different is that it has a captcha element to protect submissions. While also using the first 4 letters of the thana (Police Station) or area and the first 3 letters of the registrant's name to generate a unique tree ID in combination with the submission time in UNIX Epoch Time (ref. , and ). this article on unique ID generation by Rahman Fadhil on dev.to Epoch Converter this REPL from w3schools I achieved this with the following code (with help from the interwebs): $w.onReady( {
    
  $w( ).onVerified( {
      $w( ).hide();
	  $w( ).hide();    
    $w( ).enable();
  })
  
  $w( ).onError( {
    $w( ).text = ;
    $w( ).show()
    .then( {
      $w( ).hide( , { : });
    } );
  })

  $w( ).onTimeout( {
    $w( ).disable();
  })
 
}); { t = ().getTime(); numCode = t.toString(); thanaCode = $w( ).value;
      thanaCode = thanaCode.replace( , );
      thanaCode = thanaCode.slice( , );
      thanaCode = thanaCode.toUpperCase(); personCode = $w( ).value;
      personCode = personCode.replace( , );
      personCode = personCode.slice( , );
      personCode = personCode.toUpperCase(); customID = numCode.concat(personCode); gencode = thanaCode.concat(customID); ($w( ).valid && $w( ).valid){
         $w( ).setFieldValue( , gencode);
      }   
    } ( ) function "#captcha" => () "#errorMessage" "#successMessage" "#submitButton" "#captcha" => () "#errorMessage" "The reCAPTCHA element lost connection with the CAPTCHA provider. Try again later." "#errorMessage" => () "#errorMessage" "fade" "delay" 10000 "#captcha" => () "#submitButton" /**
    *	Adds an event handler that runs when the element is clicked.
    *	 @param {$w.MouseEvent} event
    */ export ( ) function generateID_click event // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 // Add your code for this event here: let new Date let let '#thana' /\s/g '' 0 4 let '#contributorName' /\s/g '' 0 3 let let if '#thana' '#contributorName' '#dataset1' 'title' [Note: For input sanitization, ref. above code, and the following MDN Web Docs on and . Also note that #dataset1 is the Heritage Trees Registry Dataset.] this REPL from w3schools Assertions Regular Expressions In addition, this form feeds data to the same collection which feeds the dynamic pages of the Heritage Tree Registry. With each registry item having its own dynamic item page once it is approved. This approval mechanism being controlled by a filter on the dynamic dataset on the dynamic category page. The Dynamic Category/List Page: This is a simple (simple, courtesy of the good folks at Wix as its pretty powerful in terms of functionality). Even the code for filters I have used is inspired from . But with some modification to the clear/reset button which is an improvement upon the discussions and . dynamic category page this video here here in the forums wixData ;

$w.onReady( {
	wixData.query( )
	.find()
	.then( { options = [{ : , : }];
		options.push(...res.items.map( { { : DehradunPoliceStations.title, : DehradunPoliceStations.title};
		}));
		$w( ).options = options;
	})
}); lastFilterTitle; lastFilterThana; lastFilterTree; debounceTimer; { (debounceTimer) {
		clearTimeout(debounceTimer);
		debounceTimer = ;
	}
	debounceTimer = setTimeout( {
		filter($w( ).value, lastFilterThana, lastFilterTree);
	}, );
} { (lastFilterTitle !== title || lastFilterThana !== thana || lastFilterTree !== tree) { newFilter = wixData.filter(); (title) 
			newFilter = newFilter.contains( , title); (thana)
			newFilter = newFilter.eq( , thana); (tree)
			newFilter = newFilter.contains( , tree);
		newFilter = newFilter.eq( , );
		$w( ).setFilter(newFilter);
		lastFilterTitle = title;
		lastFilterThana = thana;
		lastFilterTree = tree;
	}
} { filter(lastFilterTitle, $w( ).value, lastFilterTree);
} { (debounceTimer) {
		clearTimeout(debounceTimer);
		debounceTimer = ;
	}
	debounceTimer = setTimeout( {
		filter(lastFilterTitle, lastFilterThana, $w( ).value);
	}, );
} { $w( ).value= ;
		$w( ).resetValidityIndication();

		$w( ).value= ;
		$w( ).resetValidityIndication();

		$w( ).value = ;
		$w( ).resetValidityIndication(); (debounceTimer) {
		clearTimeout(debounceTimer);
		debounceTimer = ;
	}
	debounceTimer = setTimeout( {
		filter($w( ).value, $w( ).value, $w( ).value);
	}, );
} import from 'wix-data' ( ) function 'DehradunPoliceStations' => res let "value" '' 'label' 'All Thanas' => DehradunPoliceStations return 'value' 'label' '#iThana' let let let let export ( ) function iTreeID_keyPress event // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 // Add your code for this event here: if undefined => () '#iTreeID' 200 ( ) function filter title, thana, tree if let if 'title' if 'thana' if 'treeName' 'status' 1 '#dataset1' /**
*	Adds an event handler that runs when an input element's value
 is changed.
*	 @param {$w.Event} event
*/ export ( ) function iThana_change event // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 // Add your code for this event here: '#iThana' /**
*	Adds an event handler that runs when the cursor is inside the
 input element and a key is pressed.
*	 @param {$w.KeyboardEvent} event
*/ export ( ) function iTree_keyPress event // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 // Add your code for this event here: if undefined => () '#iTree' 200 /**
 *	Adds an event handler that runs when the element is clicked.
 *	 @param {$w.MouseEvent} event
 */ export ( ) function clearFilters_click event // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 // Add your code for this event here: "#iTreeID" null "#iTreeID" "#iTree" null "#iTree" "#iThana" '' "#iThana" if undefined => () '#iTreeID' '#iThana' '#iTree' 200 [Note: Notice how using the same filter function across the board makes the filtering logic consistent in the above code. Also please accept my apologies on the autocorrect on the formatting front in the above code.] Another thing that I had to do differently was using an alternate dataset to replace the dynamic dataset for diplaying items in the the list repeater on the dynamic list/category page. This was essential in order to enable filtering the dynamic category page without negatively affecting the dynamic URLs being controlled by the filtered dynamic dataset. The Dynamic Item Page: The Dynamic Item Page is a testament to how simple the process of handling dynamic content on Wix is. The only additional step I did on this page was to display OtherContributors and OtherStories about already registered trees via for contributors and a for stories, that too without any code. Where stories and contributors will be identified by team Treesofdehradun from the Facebook comments plugin comments, a contribution/guest blogger form and the registrants in the Heritage Trees Registry. multi-reference fields reference field The Stats Page: It took me some time to build the stats page. On this one, I had almost given up as I couldn't find what I was looking for in the forums as well as elsewhere. But as the stats page will be essential to the future rewards and recognition drives it was essential to push through. Slowly pieces started to come together and I was able to create a leaderboard style top 3 monthly contributors table. In hindsight the code is pretty simple and is as follows: wixData ;

$w.onReady( { today = (); options = { month: , : };
    $w( ).text = today.toLocaleDateString( , options); currentMonth = ().getMonth(); nextMonth = currentMonth + ; currentYear = ().getFullYear(); .log(currentMonth); .log(nextMonth); .log(currentYear); $w( ).columns = [ { : , : , : , : , : , : ,
    }, { : , : , : , : , : , : ,
    }
  ]; beginDate = (currentYear, currentMonth, , , , ) endDate = (currentYear, nextMonth, , , , ) filter = wixData.filter().gt( ,beginDate).lt( ,endDate); wixData.aggregate( )
	.filter(filter)
	.group( , )
	.count()
	.run()
	.then( { items = results.items;
		items = items.reverse(); .log(results.items); ItemsTable; (items.length >= )
		ItemsTable = [items[ ],items[ ],items[ ]]; (items.length === )
		ItemsTable = [items[ ],items[ ]]; (items.length === )
		ItemsTable = [items[ ]]; (items.length === )
    ItemsTable = [];
		$w( ).rows = ItemsTable;
	});

}); import from 'wix-data' ( ) function // Write your JavaScript here // To select an element by ID use: $w("#elementID") const new Date const //weekday: "long", //day: "numeric", "long" year "numeric" "#month" 'en-US' let new Date let 1 let new Date console console console // set the table columns "#table1" // the column that shows the document name "id" "col1" "dataPath" "title" // matches field key from collection "label" "Name" "width" 130 "visible" true "type" "string" // the column that shows the document description "id" "col2" "dataPath" "count" // matches field key from collection "label" "Contributions" "width" 130 "visible" true "type" "string" const new Date 1 0 0 0 // first day of month const new Date 1 0 0 0 // first day of next month let "_createdDate" "_createdDate" // Click "Preview" to run your code "ContributionTable" "contributionBy" "title" ( ) => results let console let if 3 0 1 2 if 2 0 1 if 1 0 if 0 '#table1' The above code can be broken down in 4 steps: 1. Get data on the current month. 2. Set Table Columns. 3. Prepare filter for aggregate function. 4. Run aggregate with filter and grouping. In step 4, I had to reverse the order of results array to get values in the descending order (the default being ascending). I also had to check exceptions with a few if-statements after which I could proceed with inserting the data array into a table with the following output: [Note: , the and were especially helpful in solving for the stats page. As the final code is more comprehensive than the sources referred, feel free to adapt it to your scenario.] This forum discussion on date formatting column API this forum post on filtering date by month I hope this article helped you. Follow the inline references in the article above for more details on the Velo API. The references combined with this article will surely help you build any kind of registry or dynamic data oriented solution using Velo by Wix. All images used are original. API Used: WixData [ , , ], Wix Site Elements APIs [ , , , , , , ] and [ , ]. WixDataQuery WixDataFilter WixDataAggregate Button Dropdown Text Columns Rows Valid resetValidityIndication WixDataset APIs setFieldValue setFilter This article is part of The Velo Writing Contest hosted by Hacker Noon in partnership with Wix.

Facebook

Instantly

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Building a Heritage Trees Registry with Velo

Too Long; Didn't Read

Companies Mentioned

Ritwik

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Building a Heritage Trees Registry with Velo

Too Long; Didn't Read

Companies Mentioned

Ritwik

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES