Przycisk wykonujący operacje na API? Jasne, że się da!

Często od naszych partnerów otrzymujemy zapytania dotyczące wykonywania przez techników operacji na API bezpośrednio z interface aplikacji. Większość zapytań dotyczy tego, jak bezpiecznie ukryć klucz technika potrzebny do wykonania działania. Rozwiązanie dla większości Waszych zapytań jest proste – wykonajcie zapytanie na uprawnieniach zalogowanego użytkownika. Jak to zrobić? Pokażemy Wam to krok po kroku 🙂

Zanim zaczniemy…

Zanim przejdziemy do tworzenia przykładowego przycisku przyjmijmy sobie małe założenie – chcemy dodać przycisk „Zmień tryb na telefon”, które wykona modyfikację pola „Tryb” (ang. „Mode”) na wartość „Telefon”. Może nie jest to interesujące zadanie ale pozwoli ono, na zrozumienie działania API w kontekście zalogowanego użytkownika.

Tworzenie przycisku

Sam proces tworzenia przykładowego przycisku opisaliśmy tutaj. Większość z Was zapewne już wykorzystuje ten lub podobny sposób tworzenia dodatkowych przycisków – nie będziemy więc się tym zajmować od początku.

Mamy więc przykładowy kod, który doda przycisk:

if(pageLocationHref.indexOf('WorkOrder.do?woMode=viewWO&woID=') !=-1 ){
    //Button code
    var buttonCode = "<button id=\"API_EditModeTelephone\" class=\"btn btn-default btn-xs\" rel=\"uitooltip\" title=\"Zmień tryb na telefon\" onclick=\"editModeTelephone()\">Zmień tryb na telefon</button>";
    //Append button to actionsBar
    jQuery('#actionsBar').append(buttonCode); 
     
}

Piszemy kod – API Request

Mamy więc już przycisk. Ale co dalej? Teraz musimy wykonać API Request. W naszym przykładzie wykorzystamy funkcję jQuery.Ajax, która wykonuje asynchroniczne zapytanie do naszego API. Tak jak w przypadku każdej innej edycji z poziomu API musimy przygotować zawartość naszego zapytania. W naszym przypadku jest to bardzo krótki JSON:

{
    "request": {
        "mode": "Telefon"
    }
}

Teraz musimy przygotować funkcję, która wykona operację po naciśnięciu naszego przycisku:

function editModeTelephone(){
	var inputData = 'input_data={"request":{"mode":"Telefon"}}';
	var editResult = executeRequest(inputData);
};

function executeRequest(requestData){
	var result = jQuery.ajax({
		type: 'POST',
		url: '/api/v3/requests',
		data: requestData,
		dataType: 'json',
		success: function(data){console.log("Success "+ data);},
		failure: function(errMSG){console.log("Failure "+ errMSG);}
	
	});
};

Scalamy wszystko to, co napisaliśmy

Mamy już wszystkie części naszego kodu. Teraz nie pozostaje nic innego, jak złożyć to wszystko w jedną całość. Całość przedstawia się następująco:

if(pageLocationHref.indexOf('WorkOrder.do?woMode=viewWO&woID=') !=-1 ){
    //Button code
    var buttonCode = "<button id=\"API_EditModeTelephone\" class=\"btn btn-default btn-xs\" rel=\"uitooltip\" title=\"Zmień tryb na telefon\" onclick=\"editModeTelephone()\">Zmień tryb na telefon</button>";
    //Append button to actionsBar
    jQuery('#actionsBar').append(buttonCode); 

function editModeTelephone(){
	var inputData = 'input_data={"request":{"mode":"Telefon"}}';
	var editResult = executeRequest(inputData);
};

function executeRequest(requestData){
	var result = jQuery.ajax({
		type: 'POST',
		url: '/api/v3/requests',
		data: requestData,
		dataType: 'json',
		success: function(data){console.log("Success "+ data);},
		failure: function(errMSG){console.log("Failure "+ errMSG);}
	
	});
};
     
}

Jeśli wszystko poszło po naszej myśli to pole Mode w naszym zgłoszeniu powinno zostać zaktualizowane. Informację na temat wykonania samego zapytania znajdziecie w konsoli przeglądarki 🙂

Na zakończenie…

Powyższy kod to jedynie przykład wykonywania zapytań API w kontekście zalogowanego użytkownika. Jest to swego rodzaju baza do zrozumienia działania i możliwości jakie daje nam takie wykonywanie zapytań. Co jeszcze możemy osiągnąć dzięki takiemu rozwiązaniu? To już pozostawiamy Wam 🙂