Hi, i would like to know if anyone has some general code structure for embedding source code into an addin's configuration file? I've been trying to do this with the help of the documentation provided in geotab developers, though had no luck getting the add-in to work. Help would be much appreciated.
You need to be logged in to reply to this post and participate in the Geotab Community discussions.
Hi @JMart-2007 - It appears your setup is a little incorrect from an old example. You don't need to have the script to the Geotab JS in your files. It's already part of the page itself
The Script for the addon is also missing the focus and blur methods. There is an example of the page structure above - https://developers.geotab.com/myGeotab/addIns/developingAddIns#geotab-add-in-custom-button-add-ins - The documentation headers are a little broken since the migration away from Github pages awhile ago.
A working example of the custom page you posted is as follows. You would just need to upload it to the Files tab when configuring the Addon.
<!DOCTYPE html>
<html>
<head>
<title>Sample Geotab Add-In</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
}
#message {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Sample Geotab Add-In</h1>
<p>This add-in displays the current user's name.</p>
<div id="message"></div>
</div>
<script>
geotab.addin.CustomPage1 = () => {
return {
initialize(api, state, callback) {
callback();
},
focus(api, state) {
api.getSession(function (session) {
if (session && session.userName) {
document.getElementById("message").textContent =
"Hello, " + session.userName + "!";
} else {
document.getElementById("message").textContent =
"Could not retrieve user information.";
}
});
}, blur(api, state) { }
};
}
</script>
</body>
</html>Below is a configuration file that will work with the new menu layout too.
{
"name": "Sample Add-in",
"supportEmail": "supportmail@support.com",
"version": "1.0",
"items": [
{
"url": "customPage.html",
"category": "Addins",
"path": "ActivityLink",
"menuName": {
"en": "Custom Page"
}
}
],
"files": {
"customPage.html": "customPage.html"
}
}
Can you share an example of your current Add-in Config? Or confirm if it is valid JSON?
As per the docs, some characters may need to use HTML escape characters to ensure the JSON is valid.
Hi Ashley, i've been working with a sample code, json:
{
"name": "Sample Add-in",
"supportEmail": "supportmail@support.com",
"version": "1.0",
"items": [
{
"url": "customPage.html",
"path": "ActivityLink",
"menuName": {
"en": "Custom Page"
}
}
],
"files": {
"customPage.html": "customPage.html"
}
}
--------------------------------------------------------------------------------------------------------------------------------------------------
HTML code to insert:
<!DOCTYPE html>
<html>
<head>
<title>Sample Geotab Add-In</title>
<script src="https://static.geotab.com/sdk/js/2/latest/geotab.js"></script>
<style>
body {
font-family: sans-serif;
padding: 20px;
}
#message {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Sample Geotab Add-In</h1>
<p>This add-in displays the current user's name.</p>
<div id="message"></div>
</div>
<script>
(function () {
geotab.addin.initialize(function (api, state, callback) {
api.getSession(function (session) {
if (session && session.userName) {
document.getElementById("message").textContent =
"Hello, " + session.userName + "!";
} else {
document.getElementById("message").textContent =
"Could not retrieve user information.";
}
callback();
});
});
})();
</script>
</body>
</html>
Hi @JMart-2007 - It appears your setup is a little incorrect from an old example. You don't need to have the script to the Geotab JS in your files. It's already part of the page itself
The Script for the addon is also missing the focus and blur methods. There is an example of the page structure above - https://developers.geotab.com/myGeotab/addIns/developingAddIns#geotab-add-in-custom-button-add-ins - The documentation headers are a little broken since the migration away from Github pages awhile ago.
A working example of the custom page you posted is as follows. You would just need to upload it to the Files tab when configuring the Addon.
<!DOCTYPE html>
<html>
<head>
<title>Sample Geotab Add-In</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
}
#message {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Sample Geotab Add-In</h1>
<p>This add-in displays the current user's name.</p>
<div id="message"></div>
</div>
<script>
geotab.addin.CustomPage1 = () => {
return {
initialize(api, state, callback) {
callback();
},
focus(api, state) {
api.getSession(function (session) {
if (session && session.userName) {
document.getElementById("message").textContent =
"Hello, " + session.userName + "!";
} else {
document.getElementById("message").textContent =
"Could not retrieve user information.";
}
});
}, blur(api, state) { }
};
}
</script>
</body>
</html>Below is a configuration file that will work with the new menu layout too.
{
"name": "Sample Add-in",
"supportEmail": "supportmail@support.com",
"version": "1.0",
"items": [
{
"url": "customPage.html",
"category": "Addins",
"path": "ActivityLink",
"menuName": {
"en": "Custom Page"
}
}
],
"files": {
"customPage.html": "customPage.html"
}
}
Hi @AshleyFC-1448 , thank you so much for your help! Have a great day!