Greetings, ServiceNow Community.
I am facing a challenge in GooglePickerAPI on ServiceNow UI Page. Well, the code renders but the popUP for auth., won't come. But when i save the code as html doc n run on my liveServer then it is all fine. I do not know where am wrong. Any advise?
UIPageCodeBelow
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<html>
<head>
<title>Picker API Quickstart</title>
<meta charset="utf-8" />
</head>
<body>
<p>Picker API API Quickstart</p>
<!--Add buttons to initiate auth sequence and sign out-->
<button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
<button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>
<pre id="content" style="white-space: pre-wrap;"></pre>
<div id="pickerDiv" class="picker-dialog"
style="height: 500px; width:800px; border: 1px solid red; position: relative; top: 50%;"></div>
<script type="text/javascript">
const SCOPES = 'https://www.googleapis.com/auth/drive.metadata.readonly';
const CLIENT_ID = // clientID
const API_KEY = // apiKey
const APP_ID = // projectNumber
let tokenClient;
let accessToken = null;
let pickerInited = false;
let gisInited = false;
document.getElementById('authorize_button').style.visibility = 'hidden';
function gapiLoaded() {
gapi.load('picker', intializePicker);
}
function intializePicker() {
pickerInited = true;
maybeEnableButtons();
}
function gisLoaded() {
tokenClient = google.accounts.oauth2.initTokenClient({
client_id: CLIENT_ID,
scope: SCOPES,
callback: '', // defined later
});
gisInited = true;
maybeEnableButtons();
}
function maybeEnableButtons() {
if (pickerInited & gisInited) {
document.getElementById('authorize_button').style.visibility = 'visible';
}
}
function handleAuthClick() {
tokenClient.callback = async (response) => {
if (response.error !== undefined) {
throw (response);
}
accessToken = response.access_token;
document.getElementById('signout_button').style.visibility = 'visible';
document.getElementById('authorize_button').innerText = 'Refresh';
await createPicker();
};
if (accessToken === null) {
tokenClient.requestAccessToken({ prompt: 'consent' });
} else {
tokenClient.requestAccessToken({ prompt: '' });
}
}
function createPicker() {
const view = new google.picker.View(google.picker.ViewId.DOCS);
view.setMimeTypes("application/pdf,image/png,image/jpeg,image/jpg,image/gif,image/svg+xml,application/vnd.ms-excel,application/vnd.google-apps.spreadsheet,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.google-apps.document,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,video/x-flv,video/mp4,video/quicktime,video/mpeg,video/x-matroska,video/x-ms-asf,video/x-ms-wmv,video/avi,audio/mpeg,audio/wav,audio/ac3,audio/aac,audio/ogg,audio/oga,audio/x-m4a,application/zip")
const picker = new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
.setDeveloperKey(API_KEY)
.setAppId(APP_ID)
.setOAuthToken(accessToken)
.addView(view)
.addView(new google.picker.DocsUploadView())
.setCallback(pickerCallback)
picker.build();
const myDiv = document.getElementById('pickerDiv');
const iframe = document.createElement('iframe');
iframe.setAttribute("src", picker.toUri());
iframe.style.width = "100%";
iframe.style.height = "100%";
myDiv.appendChild(iframe)
}
function pickerCallback(data) {
if (data.action === google.picker.Action.PICKED) {
document.getElementById('content').innerText = JSON.stringify(data, null, 2);
}
}
</script>
<script async='true' src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
<script async='true' src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
<style>
.picker-dialog {
border: 1px solid red;
}
</style>
</body>
</html>
</j:jelly>
Many thanks,
Kingstan.
1 ACCEPTED SOLUTION
Alright, Let me handle the redirectURL challenge.
Many thanks for your knowledge.
Can this be adjusted via CSS anyway?
Some blank line under auth and signOut button.
Also, the renderer which is hanging in the bottom.
Plus, Could you help me with any resource for the jellyScripting knowlege?
