Add-in Tab: How to configure html and Javascript

본문으로 바로가기

홈커뮤니티SDK/APIAdd-insAdd-in Tab: How to configure html and Javascript

Add-in Tab: How to configure html and Javascript

해결됨

SDK/API

Add-ins

MobileObie-1715

원글 작성자

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!

대화에 참여하기

이 게시물에 답글을 달고 Geotab 커뮤니티 토론에 참여하려면 로그인해야 합니다.

최고 답변

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);
};

최고의 답변

답글 5개

Genevieve-1051

커뮤니티 관리자

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

원글 작성자

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

커뮤니티 관리자

@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);
};

최고의 답변

MobileObie-1715

원글 작성자

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

여전히 궁금한 점이 있으신가요?

아카데미와 함께 배우세요 문서 탐색