Home A - Z

An Otter Wiki

Blame

ff3b99 Hargata Softworks 2024-11-04 17:10:37 1
# Custom Widgets
2
3
::: warning
4
# Future Feature
5
Only available in 1.4.0 and newer
6
:::
7
8
::: danger
9
# Security
10
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.
11
:::
12
13
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.
14
15
## How It Works
16
17
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
18
19
![](/Advanced/Custom%20Widgets/a/image-1730740032073.png)
20
21
Clicking on this button will bring up a dialog/modal which will render everything in `widgets.html` (JavaScripts included)
22
23
## Configuring Custom Widgets
24
25
This feature requires the user to be comfortable with the following paradigms:
26
- JavaScript and jQuery syntaxes
27
- Consuming JSON data from API Endpoints
28
- Displaying data in DOM elements
f1ffe4 Hargata Softworks 2024-11-04 17:19:29 29
30
To get started, navigate to the Settings tab and open up your Developer's Console(F12).
31
2c9283 Hargata Softworks 2024-11-04 18:54:58 32
1. Set Environment Variable `LUBELOGGER_CUSTOM_WIDGETS` to `true`
33
2. Run command `showCustomWidgets()`
34
3. You will be greeted by a warning and notice, read carefully.
0e78b2 Hargata Softworks 2024-11-04 17:20:46 35
f1ffe4 Hargata Softworks 2024-11-04 17:19:29 36
![](/Advanced/Custom%20Widgets/a/image-1730740633388.png)
0e78b2 Hargata Softworks 2024-11-04 17:20:46 37
2c9283 Hargata Softworks 2024-11-04 18:54:58 38
4. You now have access to the Custom Widgets Editor
f1ffe4 Hargata Softworks 2024-11-04 17:19:29 39
0e78b2 Hargata Softworks 2024-11-04 17:20:46 40
![](/Advanced/Custom%20Widgets/a/image-1730740828897.png)
41
f1ffe4 Hargata Softworks 2024-11-04 17:19:29 42
## Example Configuration
43
44
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
45
46
```
47
<script>
48
var apiEndpoints = [
49
'/api/vehicle/servicerecords',
50
'/api/vehicle/repairrecords',
51
'/api/vehicle/upgraderecords'
52
]
53
var dataArray = [];
54
var dataEndpointsLoaded = 0;
55
apiEndpoints.forEach(apiUrl => {
56
$.get(`${apiUrl}?vehicleId=${GetVehicleId().vehicleId}`, function(result) {
57
if (result.length > 0){
58
result.map(x=> {dataArray.push(x);});
59
}
60
dataEndpointsLoaded++;
61
checkAllDataLoaded();
62
})
63
})
64
function checkAllDataLoaded() {
65
if (dataEndpointsLoaded == apiEndpoints.length){
66
var extraFieldName = 'Days Out of Service';
67
var totalDaysOutOfService = 0;
68
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)}));
69
$("#daysOutOfServiceLabel").html(totalDaysOutOfService);
70
}
71
}
72
</script>
73
<div class="modal-header">
74
<h5 class="modal-title">Additional Widgets</h5>
75
<button type="button" class="btn-close" onclick="hideCustomWidgetsModal()" aria-label="Close"></button>
76
</div>
77
<div class="modal-body" style="max-height:50vh; overflow-y:auto;">
78
<div class="row row-cols-1 row-cols-md-3 g-4 justify-content-center">
79
<div class="col text-center">
80
<span class="lead">Day(s) Out of Service</span><br/>
81
<span id="daysOutOfServiceLabel" class="display-7"></span>
82
</div>
83
</div>
84
</div>
85
```
86
87
![](/Advanced/Custom%20Widgets/a/image-1730740764919.png)