Home A - Z

An Otter Wiki

Blame

ff3b99 Hargata Softworks 2024-11-04 17:10:37 1
# Custom Widgets
2
3
::: danger
4
# Security
5
This feature can expose your instance of LubeLogger to XSS and other security vulnerabilities if you don't fully understand what you are doing. We(the maintainers of LubeLogger) are not responsible for the consequences that result from utilizing this feature. Zero support will be provided. You have been warned.
6
:::
7
8
The Custom Widgets Feature allows users to craft widgets that consumes from the API within LubeLogger itself. Only the Root(SuperAdmin) user can modify custom widgets, but once configured it is visible to every user.
9
10
## How It Works
11
12
When LubeLogger loads the Dashboard view, it will check if there is a `widgets.html` located within the `/data` directory. If this file exists, a button with the text `Additional Widgets` will be displayed
13
14
![](/Advanced/Custom%20Widgets/a/image-1730740032073.png)
15
16
Clicking on this button will bring up a dialog/modal which will render everything in `widgets.html` (JavaScripts included)
17
18
## Configuring Custom Widgets
19
20
This feature requires the user to be comfortable with the following paradigms:
21
- JavaScript and jQuery syntaxes
22
- Consuming JSON data from API Endpoints
23
- Displaying data in DOM elements
f1ffe4 Hargata Softworks 2024-11-04 17:19:29 24
39e756 Hargata Softworks 2024-11-14 22:22:10 25
To get started, Set Environment Variable `LUBELOGGER_CUSTOM_WIDGETS` to `true`
f1ffe4 Hargata Softworks 2024-11-04 17:19:29 26
39e756 Hargata Softworks 2024-11-14 22:22:10 27
1. Navigate to the Settings tab and open up your Developer's Console(F12)
2c9283 Hargata Softworks 2024-11-04 18:54:58 28
2. Run command `showCustomWidgets()`
29
3. You will be greeted by a warning and notice, read carefully.
0e78b2 Hargata Softworks 2024-11-04 17:20:46 30
f1ffe4 Hargata Softworks 2024-11-04 17:19:29 31
![](/Advanced/Custom%20Widgets/a/image-1730740633388.png)
0e78b2 Hargata Softworks 2024-11-04 17:20:46 32
2c9283 Hargata Softworks 2024-11-04 18:54:58 33
4. You now have access to the Custom Widgets Editor
f1ffe4 Hargata Softworks 2024-11-04 17:19:29 34
0e78b2 Hargata Softworks 2024-11-04 17:20:46 35
![](/Advanced/Custom%20Widgets/a/image-1730740828897.png)
36
f1ffe4 Hargata Softworks 2024-11-04 17:19:29 37
## Example Configuration
38
39
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
40
41
```
42
<script>
43
var apiEndpoints = [
44
'/api/vehicle/servicerecords',
45
'/api/vehicle/repairrecords',
46
'/api/vehicle/upgraderecords'
47
]
48
var dataArray = [];
49
var dataEndpointsLoaded = 0;
50
apiEndpoints.forEach(apiUrl => {
51
$.get(`${apiUrl}?vehicleId=${GetVehicleId().vehicleId}`, function(result) {
52
if (result.length > 0){
53
result.map(x=> {dataArray.push(x);});
54
}
55
dataEndpointsLoaded++;
56
checkAllDataLoaded();
57
})
58
})
59
function checkAllDataLoaded() {
60
if (dataEndpointsLoaded == apiEndpoints.length){
61
var extraFieldName = 'Days Out of Service';
62
var totalDaysOutOfService = 0;
63
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)}));
64
$("#daysOutOfServiceLabel").html(totalDaysOutOfService);
65
}
66
}
67
</script>
68
<div class="modal-header">
69
<h5 class="modal-title">Additional Widgets</h5>
70
<button type="button" class="btn-close" onclick="hideCustomWidgetsModal()" aria-label="Close"></button>
71
</div>
72
<div class="modal-body" style="max-height:50vh; overflow-y:auto;">
73
<div class="row row-cols-1 row-cols-md-3 g-4 justify-content-center">
74
<div class="col text-center">
75
<span class="lead">Day(s) Out of Service</span><br/>
76
<span id="daysOutOfServiceLabel" class="display-7"></span>
77
</div>
78
</div>
79
</div>
80
```
81
82
![](/Advanced/Custom%20Widgets/a/image-1730740764919.png)