commit f1ffe4

Commit `f1ffe4`

2024-11-04 17:19:29 Hargata Softworks: x

0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9

`advanced/custom widgets.md` ..
@@ 26,3 26,57 @@
	- JavaScript and jQuery syntaxes
	- Consuming JSON data from API Endpoints
	- Displaying data in DOM elements
+
+	To get started, navigate to the Settings tab and open up your Developer's Console(F12).
+
+	1. Run command `showCustomWidgets()`
+	2. You will be greeted by a warning and notice, read carefully.
+	![](/Advanced/Custom%20Widgets/a/image-1730740633388.png)
+	3. You now have access to the Custom Widgets Editor
+
+	## Example Configuration
+
+	The following code sample will tally up all service, repair, and upgrade records with the custom field `Days Out of Service` and display it in the Custom Widgets window in the Dashboard
+
+	```
+	<script>
+	var apiEndpoints = [
+	'/api/vehicle/servicerecords',
+	'/api/vehicle/repairrecords',
+	'/api/vehicle/upgraderecords'
+	]
+	var dataArray = [];
+	var dataEndpointsLoaded = 0;
+	apiEndpoints.forEach(apiUrl => {
+	$.get(`${apiUrl}?vehicleId=${GetVehicleId().vehicleId}`, function(result) {
+	if (result.length > 0){
+	result.map(x=> {dataArray.push(x);});
+	}
+	dataEndpointsLoaded++;
+	checkAllDataLoaded();
+	})
+	})
+	function checkAllDataLoaded() {
+	if (dataEndpointsLoaded == apiEndpoints.length){
+	var extraFieldName = 'Days Out of Service';
+	var totalDaysOutOfService = 0;
+	dataArray.filter(x=>x.extraFields.length > 0).map(x=>x.extraFields).map(x=>x.filter(y=>y.name == extraFieldName).map(x=>{totalDaysOutOfService += parseInt(x.value)}));
+	$("#daysOutOfServiceLabel").html(totalDaysOutOfService);
+	}
+	}
+	</script>
+	<div class="modal-header">
+	<h5 class="modal-title">Additional Widgets</h5>
+	<button type="button" class="btn-close" onclick="hideCustomWidgetsModal()" aria-label="Close"></button>
+	</div>
+	<div class="modal-body" style="max-height:50vh; overflow-y:auto;">
+	<div class="row row-cols-1 row-cols-md-3 g-4 justify-content-center">
+	<div class="col text-center">
+	<span class="lead">Day(s) Out of Service</span><br/>
+	<span id="daysOutOfServiceLabel" class="display-7"></span>
+	</div>
+	</div>
+	</div>
+	```
+
+	![](/Advanced/Custom%20Widgets/a/image-1730740764919.png)

Commit `f1ffe4`