Add-in Tab: How to configure html and Javascript

Ga naar hoofdinhoud

StartpaginaCommunitySDK/APIAdd-insAdd-in Tab: How to configure html and Javascript

Add-in Tab: How to configure html and Javascript

Opgelost

SDK/API

Add-ins

MobileObie-1715

Oorspronkelijke plaatser

Team,

I was able to create a Tab Add-In using the information I shared here but have been unable to link a Javascript file to said HTML page. The page itself is loading properly from what I can tell when selecting the Add-In tab, but that is all.

I reviewed the GeoTab SDK and attempted to implement the Javascript file using the following template: https://community.geotab.com/s/question/0D52J00009iBdpaSAC/addin-tab-items?language=en_US

I know that button Add-Ins have a different Javascript template so where does a Tab Add-In fall? Will it not have an initialize, focus, and blur event?

I also reviewed the examples here though Tab Add-In example is not implemented

Thanks in advance!

Deelnemen aan het gesprek

Je moet ingelogd zijn om op dit bericht te reageren en deel te nemen aan de discussies in de Geotab Community.

Populaire antwoorden

SidSalah-1262

@MobileObie-1715 I hope all is well. You are correct, the typical Lifecyle events for page add-in do not apply to tab add-ins. You need to provide only one function that is called when everything is ready, pass an element where you can render anything you want and a few services that you can use to communicate with MyG. We are currently working on documentation for tab add-ins. Just note that tab add-ins behave exactly like the MAP Panel add-in, that is, it loads with the page. Please see the example below:

// Config
 
{
    "name": "Tab",
    "supportEmail": "support@geotab.com",
    "version": "1.0",
    "items": [{
        "page": "device",
        "url": "/tab-addin/addin.html",
        "tabTitle": "Tab add-in example"
    }, {
        "page": "exception",
        "url": "/tab-addin/addin.html",
        "tabTitle": "Tab add-in example"
    }, {
        "page": "user",
        "url": "/tab-addin/addin.html",
        "tabTitle": "Tab add-in example"
    }]
}
 
// CSS
 
.addin .addin_row {
    display: flex;
    margin-bottom: 10px;
}
 
.addin .addin_field {
    flex: 1 1 auto;
    padding: 5px;
    border: 1px solid #0000ff;
    border-radius: 4px;
}
 
.addin .addin_row label {
    flex: 0 0 50px;
}
 
.addin .addin_row button {
    flex: 1 1 50px;
}
 
// HTML 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="addin.css"/>
    <script src="addin.js"></script>
</head>
<body></body>
</html>
 
// JS
 
geotab.addin.hello = (elt, service) => {
    elt.innerHTML = `
            <div class="addin">
            <fieldset>
                <div class="addin_row">
                    <button id="addin_disable">Disable for 10 seconds</button>
                    <button id="addin_hide">Hide for 10 seconds</button>
                    <button id="addin_go_to_devices">Go to devices page</button>
                    <input id="addin_tab_title" value="Tab add-in example" />
                </div>
                <div>
                    <span>Current device speed: </span><span id="addin_speed"></span>
                </div>
            </fieldset>
        </div>`
 
    let disable = elt.querySelector("#addin_disable");
    let hide = elt.querySelector("#addin_hide");
    let goToDevices = elt.querySelector("#addin_go_to_devices");
    let input = elt.querySelector("#addin_tab_title");
    let speed = elt.querySelector("#addin_speed");
 
    let updateSpeed = async () => {
        let url = await service.page.get();
 
        if (url.id && typeof url.id === "string") {
            let dsi = await service.api.call("Get", { typeName: "DeviceStatusInfo", search: { deviceSearch: { id: url.id } } });
            speed.textContent = dsi[0].speed + "km/h";
        }
 
        setTimeout(updateSpeed, 10000);
    };
    updateSpeed();
 
    goToDevices.addEventListener("click", () => {
        service.page.go("devices");
    }, false);
 
    input.addEventListener("input", () => {
        service.tab.updateTitle(input.value || "Tab add-in example");
    }, false);
 
    disable.addEventListener("click", () => {
        service.tab.disabled = true;
 
        setTimeout(() => {
            service.tab.disabled = false;
        }, 10000);
    }, false);
 
    hide.addEventListener("click", () => {
        service.tab.visible = false;
 
        setTimeout(() => {
            service.tab.visible = true;
        }, 10000);
    }, false);
};

Beste antwoord

5 antwoorden

Genevieve-1051

Community-beheerder

Hi @MobileObie-1715 ,

Thanks for bringing this to the Geotab Community! I know other members will come across this too and I'm glad we can clear up the confusion.

Tab add-ins are just page add-ins with a different config structure.

For example:

{

"name": "tabtest",

"supportEmail": "support@tab.com",

"version": "0.0.1",

"items": [{

"page": "device",

"url": "https://server.com/addin.html",

"tabTitle": "tabaddin"

}]

}

Please let me know if that answered your questions or if you still are looking for help?

Warm Regards,

Gen

MobileObie-1715

Oorspronkelijke plaatser

Thanks @Genevieve-1051 for your response! I was able to create the Tab Add-In correctly, but the issue I'm facing is with the actual addin.html. It seems as though the typical lifecycle events for the page are not being triggered the way they do in a Page Add-In (mirroring the example in the SDK found here).

Is there a different way to structure the html for Tab Add-Ins?

Genevieve-1051

Community-beheerder

@EishiFUN can you talk with our MyGeotab SDK experts and see how they can help?

SidSalah-1262

// Config
 
{
    "name": "Tab",
    "supportEmail": "support@geotab.com",
    "version": "1.0",
    "items": [{
        "page": "device",
        "url": "/tab-addin/addin.html",
        "tabTitle": "Tab add-in example"
    }, {
        "page": "exception",
        "url": "/tab-addin/addin.html",
        "tabTitle": "Tab add-in example"
    }, {
        "page": "user",
        "url": "/tab-addin/addin.html",
        "tabTitle": "Tab add-in example"
    }]
}
 
// CSS
 
.addin .addin_row {
    display: flex;
    margin-bottom: 10px;
}
 
.addin .addin_field {
    flex: 1 1 auto;
    padding: 5px;
    border: 1px solid #0000ff;
    border-radius: 4px;
}
 
.addin .addin_row label {
    flex: 0 0 50px;
}
 
.addin .addin_row button {
    flex: 1 1 50px;
}
 
// HTML 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="addin.css"/>
    <script src="addin.js"></script>
</head>
<body></body>
</html>
 
// JS
 
geotab.addin.hello = (elt, service) => {
    elt.innerHTML = `
            <div class="addin">
            <fieldset>
                <div class="addin_row">
                    <button id="addin_disable">Disable for 10 seconds</button>
                    <button id="addin_hide">Hide for 10 seconds</button>
                    <button id="addin_go_to_devices">Go to devices page</button>
                    <input id="addin_tab_title" value="Tab add-in example" />
                </div>
                <div>
                    <span>Current device speed: </span><span id="addin_speed"></span>
                </div>
            </fieldset>
        </div>`
 
    let disable = elt.querySelector("#addin_disable");
    let hide = elt.querySelector("#addin_hide");
    let goToDevices = elt.querySelector("#addin_go_to_devices");
    let input = elt.querySelector("#addin_tab_title");
    let speed = elt.querySelector("#addin_speed");
 
    let updateSpeed = async () => {
        let url = await service.page.get();
 
        if (url.id && typeof url.id === "string") {
            let dsi = await service.api.call("Get", { typeName: "DeviceStatusInfo", search: { deviceSearch: { id: url.id } } });
            speed.textContent = dsi[0].speed + "km/h";
        }
 
        setTimeout(updateSpeed, 10000);
    };
    updateSpeed();
 
    goToDevices.addEventListener("click", () => {
        service.page.go("devices");
    }, false);
 
    input.addEventListener("input", () => {
        service.tab.updateTitle(input.value || "Tab add-in example");
    }, false);
 
    disable.addEventListener("click", () => {
        service.tab.disabled = true;
 
        setTimeout(() => {
            service.tab.disabled = false;
        }, 10000);
    }, false);
 
    hide.addEventListener("click", () => {
        service.tab.visible = false;
 
        setTimeout(() => {
            service.tab.visible = true;
        }, 10000);
    }, false);
};

Beste antwoord

MobileObie-1715

Oorspronkelijke plaatser

Thank you so much @SidSalah-1262 ! This will be great to unblock me and I will reach out with other questions.

Thanks again for the example

Heeft u nog vragen?

Leer met Academy Door documenten bladeren