สร้างอินเทอร์เฟซการค้นหาด้วยวิดเจ็ตการค้นหา

วิดเจ็ตการค้นหามีอินเทอร์เฟซการค้นหาที่ปรับแต่งได้สำหรับเว็บแอปพลิเคชัน วิดเจ็ตต้องการ HTML และ JavaScript เพียงเล็กน้อยเพื่อ ติดตั้งใช้งานและเปิดใช้ฟีเจอร์การค้นหาทั่วไป เช่น ข้อมูลประกอบและการใส่เลขหน้า คุณ นอกจากนี้ยังสามารถปรับแต่งส่วนต่างๆ ของอินเทอร์เฟซด้วย CSS และ JavaScript

หากคุณต้องการความยืดหยุ่นมากกว่าที่วิดเจ็ตมีให้ ให้ลองใช้ API การค้นหา สำหรับข้อมูลเกี่ยวกับการสร้างอินเทอร์เฟซการค้นหาด้วย Query API ดูการสร้างอินเทอร์เฟซการค้นหาด้วย API การค้นหา

สร้างอินเทอร์เฟซการค้นหา

การสร้างอินเทอร์เฟซการค้นหามีหลายขั้นตอนดังนี้

  1. กำหนดค่าแอปพลิเคชันการค้นหา
  2. สร้างรหัสไคลเอ็นต์สำหรับแอปพลิเคชัน
  3. เพิ่มมาร์กอัป HTML สำหรับช่องค้นหาและผลลัพธ์
  4. โหลดวิดเจ็ตบนหน้าเว็บ
  5. เริ่มต้นวิดเจ็ต

กำหนดค่าแอปพลิเคชันการค้นหา

อินเทอร์เฟซการค้นหาแต่ละรายการต้องมีแอปพลิเคชันการค้นหาที่กำหนดไว้ในคำสั่ง คอนโซลผู้ดูแลระบบ แอปพลิเคชันการค้นหาจะให้ข้อมูลเพิ่มเติมเกี่ยวกับ สำหรับการค้นหาข้อมูล เช่น แหล่งข้อมูล ข้อมูลประกอบ และการตั้งค่าคุณภาพการค้นหา

หากต้องการสร้างแอปพลิเคชันการค้นหา โปรดดู สร้างประสบการณ์การค้นหาที่กําหนดเอง

สร้างรหัสไคลเอ็นต์สำหรับแอปพลิเคชัน

นอกเหนือจากขั้นตอนใน กำหนดค่าการเข้าถึง Google Cloud Search API คุณต้องสร้างรหัสไคลเอ็นต์สำหรับเว็บแอปพลิเคชันด้วย

กำหนดค่าโปรเจ็กต์

สิ่งที่จะเกิดขึ้นเมื่อกำหนดค่าโปรเจ็กต์มีดังนี้

  • เลือกประเภทไคลเอ็นต์เว็บเบราว์เซอร์
  • ระบุ URL ต้นทาง ของแอปของคุณ
  • บันทึกรหัสไคลเอ็นต์ที่สร้างขึ้น คุณจะต้องใช้รหัสไคลเอ็นต์เพื่อ ทำตามขั้นตอนถัดไป ไม่จำเป็นต้องมีรหัสลับไคลเอ็นต์สำหรับ วิดเจ็ต

สำหรับข้อมูลเพิ่มเติม โปรดดู OAuth 2.0 สำหรับเว็บแอปพลิเคชันฝั่งไคลเอ็นต์

เพิ่มมาร์กอัป HTML

วิดเจ็ตนี้กำหนดให้ใช้ HTML เพียงเล็กน้อยจึงจะทำงานได้ คุณ ต้องระบุข้อมูลต่อไปนี้

  • องค์ประกอบ input สำหรับช่องค้นหา
  • องค์ประกอบที่จะตรึงป๊อปอัปคำแนะนำไว้
  • องค์ประกอบที่จะรวมผลการค้นหา
  • (ไม่บังคับ) ระบุองค์ประกอบเพื่อใส่ตัวควบคุมประกอบ

ข้อมูลโค้ด HTML ต่อไปนี้แสดง HTML สำหรับวิดเจ็ต Search โดยที่ องค์ประกอบที่จะเชื่อมโยงจะระบุโดยแอตทริบิวต์ id

serving/widget/public/with_css/index.html
<div id="search_bar">
  <div id="suggestions_anchor">
    <input type="text" id="search_input" placeholder="Search for...">
  </div>
</div>
<div id="facet_results"></div>
<div id="search_results"></div>

โหลดวิดเจ็ต

วิดเจ็ตจะโหลดแบบไดนามิกผ่านสคริปต์ตัวโหลด หากต้องการระบุ ตัวโหลด ให้ใช้แท็ก <script> ตามที่แสดง

serving/widget/public/with_css/index.html
<!-- Google API loader -->
<script src="https://apis.google.com/js/api.js?mods=enable_cloud_search_widget&onload=onLoad" async defer></script>

คุณต้องระบุ Callback onload ในแท็กสคริปต์ ฟังก์ชันนี้เรียกว่า เมื่อตัวโหลดพร้อมใช้งาน เมื่อตัวโหลดพร้อมแล้ว ให้โหลดวิดเจ็ตต่อไป โดยการเรียกใช้ gapi.load() เพื่อโหลดโมดูลไคลเอ็นต์ API, Google Sign-In และ Cloud Search

serving/widget/public/with_css/app.js
/**
* Load the cloud search widget & auth libraries. Runs after
* the initial gapi bootstrap library is ready.
*/
function onLoad() {
  gapi.load('client:auth2:cloudsearch-widget', initializeApp)
}

ระบบจะเรียกใช้ฟังก์ชัน initializeApp() หลังจากโมดูลทั้งหมด โหลดแล้ว

เริ่มต้นวิดเจ็ต

ขั้นแรก เริ่มต้นไลบรารีของไคลเอ็นต์โดยการเรียกใช้ gapi.client.init() หรือ gapi.auth2.init() ด้วยรหัสไคลเอ็นต์ที่สร้างขึ้น และขอบเขต https://www.googleapis.com/auth/cloud_search.query ต่อไป ให้ใช้ gapi.cloudsearch.widget.resultscontainer.Builder และ gapi.cloudsearch.widget.searchbox.Builder คลาสสำหรับกำหนดค่าวิดเจ็ต แล้วนำไปเชื่อมโยงกับองค์ประกอบ HTML

ตัวอย่างต่อไปนี้แสดงวิธีเริ่มใช้งานวิดเจ็ต

serving/widget/public/with_css/app.js
/**
 * Initialize the app after loading the Google API client &
 * Cloud Search widget.
 */
function initializeApp() {
  // Load client ID & search app.
  loadConfiguration().then(function() {
    // Set API version to v1.
    gapi.config.update('cloudsearch.config/apiVersion', 'v1');

    // Build the result container and bind to DOM elements.
    var resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
      .setSearchApplicationId(searchApplicationName)
      .setSearchResultsContainerElement(document.getElementById('search_results'))
      .setFacetResultsContainerElement(document.getElementById('facet_results'))
      .build();

    // Build the search box and bind to DOM elements.
    var searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
      .setSearchApplicationId(searchApplicationName)
      .setInput(document.getElementById('search_input'))
      .setAnchor(document.getElementById('suggestions_anchor'))
      .setResultsContainer(resultsContainer)
      .build();
  }).then(function() {
    // Init API/oauth client w/client ID.
    return gapi.auth2.init({
        'clientId': clientId,
        'scope': 'https://www.googleapis.com/auth/cloud_search.query'
    });
  });
}

ตัวอย่างข้างต้นอ้างอิงถึงตัวแปร 2 ตัวสำหรับการกำหนดค่าที่กำหนดไว้ ดังนี้

serving/widget/public/with_css/app.js
/**
* Client ID from OAuth credentials.
*/
var clientId = "...apps.googleusercontent.com";

/**
* Full resource name of the search application, such as
* "searchapplications/<your-id>".
*/
var searchApplicationName = "searchapplications/...";

กำหนดค่าประสบการณ์ในการลงชื่อเข้าใช้

โดยค่าเริ่มต้น วิดเจ็ตจะแจ้งให้ผู้ใช้ลงชื่อเข้าใช้และให้สิทธิ์แอป ในเวลาที่เริ่มพิมพ์ข้อความค้นหา คุณสามารถใช้ Google Sign-In สำหรับเว็บไซต์ เพื่อเสนอประสบการณ์การลงชื่อเข้าใช้ที่ปรับให้เหมาะกับผู้ใช้แต่ละคนมากขึ้น

ให้สิทธิ์ผู้ใช้โดยตรง

ใช้ลงชื่อเข้าใช้ด้วย Google เพื่อตรวจสอบสถานะการลงชื่อเข้าใช้ของ ผู้ใช้และลงชื่อเข้าใช้หรือออกจากระบบได้ตามต้องการ ตัวอย่างเช่น URL ต่อไปนี้ ตัวอย่างที่สังเกตการณ์ isSignedIn เพื่อตรวจสอบการเปลี่ยนแปลงการลงชื่อเข้าใช้ ใช้ GoogleAuth.signIn() วิธีเริ่มต้นการลงชื่อเข้าใช้จากปุ่ม คลิก:

serving/widget/public/with_signin/app.js
// Handle sign-in/sign-out.
let auth = gapi.auth2.getAuthInstance();

// Watch for sign in status changes to update the UI appropriately.
let onSignInChanged = (isSignedIn) => {
  // Update UI to switch between signed in/out states
  // ...
}
auth.isSignedIn.listen(onSignInChanged);
onSignInChanged(auth.isSignedIn.get()); // Trigger with current status.

// Connect sign-in/sign-out buttons.
document.getElementById("sign-in").onclick = function(e) {
  auth.signIn();
};
document.getElementById("sign-out").onclick = function(e) {
  auth.signOut();
};

โปรดดูรายละเอียดเพิ่มเติมที่หัวข้อลงชื่อเข้าใช้ด้วย Google

ลงชื่อเข้าใช้ให้ผู้ใช้โดยอัตโนมัติ

คุณสามารถปรับปรุงประสบการณ์การลงชื่อเข้าใช้ให้ดีขึ้นได้โดยให้สิทธิ์ แอปพลิเคชันในนามของผู้ใช้ในองค์กร เทคนิคนี้ กรณีที่ใช้พร็อกซี Cloud Identity Aware ก็มีประโยชน์เช่นกัน เพื่อปกป้องแอปพลิเคชัน

โปรดดูข้อมูลเพิ่มเติมที่หัวข้อใช้ Google Sign-In กับแอปไอที

ปรับแต่งอินเทอร์เฟซ

คุณสามารถเปลี่ยนรูปลักษณ์ของอินเทอร์เฟซการค้นหาโดยใช้ชุดค่าผสม ต่อไปนี้

  • ลบล้างรูปแบบด้วย CSS
  • ตกแต่งองค์ประกอบด้วยอะแดปเตอร์
  • สร้างองค์ประกอบที่กำหนดเองด้วยอะแดปเตอร์

ลบล้างรูปแบบด้วย CSS

วิดเจ็ต Search มาพร้อมกับ CSS ของตนเองเพื่อให้คำแนะนำรูปแบบและองค์ประกอบผลลัพธ์ รวมถึงส่วนควบคุมการใส่เลขหน้า คุณสามารถจัดรูปแบบองค์ประกอบเหล่านี้ใหม่ได้ตามต้องการ

ในระหว่างการโหลด วิดเจ็ต Search จะโหลดสไตล์ชีตเริ่มต้นแบบไดนามิก กรณีนี้จะเกิดขึ้นหลังจากโหลดสไตล์ชีตของแอปพลิเคชันแล้ว ซึ่งจะช่วยเพิ่มลำดับความสำคัญ กฎต่างๆ ได้ เพื่อให้สไตล์ของคุณมีลำดับความสำคัญเหนือกว่ารูปแบบเริ่มต้น ใช้ตัวเลือกระดับบนเพื่อเพิ่มความเฉพาะเจาะจงของกฎเริ่มต้น

ตัวอย่างเช่น กฎต่อไปนี้จะไม่ส่งผลใดๆ หากโหลดใน link หรือ style ในเอกสาร

.cloudsearch_suggestion_container {
  font-size: 14px;
}

ให้ใช้รหัสหรือคลาสของคอนเทนเนอร์ระดับบนแทน ที่ประกาศไว้ในหน้า

#suggestions_anchor .cloudsearch_suggestion_container {
  font-size: 14px;
}

สำหรับรายการคลาสการสนับสนุนและตัวอย่าง HTML ที่สร้างโดยวิดเจ็ต โปรดดูที่ ข้อมูลอ้างอิงคลาส CSS ที่รองรับ

ตกแต่งองค์ประกอบด้วยอะแดปเตอร์

หากต้องการตกแต่งองค์ประกอบก่อนการแสดงภาพ ให้สร้างและสำรองข้อมูล อะแดปเตอร์ที่ใช้วิธีการตกแต่งอย่างใดอย่างหนึ่ง เช่น decorateSuggestionElement หรือ decorateSearchResultElement.

ตัวอย่างเช่น อะแดปเตอร์ต่อไปนี้เพิ่มคลาสที่กำหนดเองลงในคำแนะนำและ เอลิเมนต์ของผลลัพธ์

serving/widget/public/with_decorated_element/app.js
/**
 * Search box adapter that decorates suggestion elements by
 * adding a custom CSS class.
 */
function SearchBoxAdapter() {}
SearchBoxAdapter.prototype.decorateSuggestionElement = function(element) {
  element.classList.add('my-suggestion');
}

/**
 * Results container adapter that decorates suggestion elements by
 * adding a custom CSS class.
 */
function ResultsContainerAdapter() {}
ResultsContainerAdapter.prototype.decorateSearchResultElement = function(element) {
  element.classList.add('my-result');
}

หากต้องการลงทะเบียนอะแดปเตอร์เมื่อเริ่มต้นวิดเจ็ต ให้ใช้ setAdapter() ของคลาส Builder ที่เกี่ยวข้อง:

serving/widget/public/with_decorated_element/app.js
// Build the result container and bind to DOM elements.
var resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setAdapter(new ResultsContainerAdapter())
  // ...
  .build();

// Build the search box and bind to DOM elements.
var searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
  .setAdapter(new SearchBoxAdapter())
  // ...
  .build();

อุปกรณ์ตกแต่งสามารถปรับเปลี่ยนแอตทริบิวต์ขององค์ประกอบคอนเทนเนอร์ องค์ประกอบย่อย คุณอาจเพิ่มหรือนำองค์ประกอบย่อยออกระหว่างการตกแต่งได้ อย่างไรก็ตาม หากมีการเปลี่ยนแปลงเชิงโครงสร้างองค์ประกอบ ให้พิจารณาสร้างองค์ประกอบ องค์ประกอบโดยตรง แทนการตกแต่ง

สร้างองค์ประกอบที่กำหนดเองด้วยอะแดปเตอร์

ในการสร้างองค์ประกอบที่กำหนดเองสำหรับคำแนะนำ คอนเทนเนอร์ข้อมูลประกอบ หรือผลการค้นหา สร้างและลงทะเบียนอะแดปเตอร์ที่จะ createSuggestionElement createFacetResultElement หรือ createSearchResultElement ไตร่ตรอง

อะแดปเตอร์ต่อไปนี้แสดงการสร้างคำแนะนำที่กำหนดเองและผลการค้นหา องค์ประกอบโดยใช้แท็ก HTML <template>

serving/widget/public/with_custom_element/app.js
/**
 * Search box adapter that overrides creation of suggestion elements.
 */
function SearchBoxAdapter() {}
SearchBoxAdapter.prototype.createSuggestionElement = function(suggestion) {
  let template = document.querySelector('#suggestion_template');
  let fragment = document.importNode(template.content, true);
  fragment.querySelector('.suggested_query').textContent = suggestion.suggestedQuery;
  return fragment.firstElementChild;
}

/**
 * Results container adapter that overrides creation of result elements.
 */
function ResultsContainerAdapter() {}
ResultsContainerAdapter.prototype.createSearchResultElement = function(result) {
  let template = document.querySelector('#result_template');
  let fragment = document.importNode(template.content, true);
  fragment.querySelector('.title').textContent = result.title;
  fragment.querySelector('.title').href = result.url;
  let snippetText = result.snippet != null ?
    result.snippet.snippet : '';
  fragment.querySelector('.query_snippet').innerHTML = snippetText;
  return fragment.firstElementChild;
}

หากต้องการลงทะเบียนอะแดปเตอร์เมื่อเริ่มต้นวิดเจ็ต ให้ใช้ setAdapter() ของคลาส Builder ที่เกี่ยวข้อง:

serving/widget/public/with_custom_element/app.js
// Build the result container and bind to DOM elements.
var resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setAdapter(new ResultsContainerAdapter())
  // ...
  .build();

// Build the search box and bind to DOM elements.
var searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
  .setAdapter(new SearchBoxAdapter())
  // ...
  .build();

การสร้างองค์ประกอบข้อมูลประกอบที่กำหนดเองด้วย createFacetResultElement อยู่ภายใต้ข้อจำกัดหลายประการ ดังนี้

  • คุณต้องแนบคลาส CSS cloudsearch_facet_bucket_clickable ไปยังไฟล์ องค์ประกอบที่ผู้ใช้คลิกเพื่อสลับที่เก็บข้อมูล
  • คุณต้องรวมที่เก็บข้อมูลแต่ละชุดไว้ในองค์ประกอบที่มี CSS คลาส cloudsearch_facet_bucket_container
  • คุณแสดงผลที่เก็บข้อมูลในลำดับที่ต่างจากที่ปรากฏใน คำตอบ

เช่น ข้อมูลโค้ดต่อไปนี้แสดงข้อมูลประกอบโดยใช้ลิงก์แทน ทั้งหมด

serving/widget/public/with_custom_facet/app.js
/**
 * Results container adapter that intercepts requests to dynamically
 * change which sources are enabled based on user selection.
 */
function ResultsContainerAdapter() {
  this.selectedSource = null;
}

ResultsContainerAdapter.prototype.createFacetResultElement = function(result) {
  // container for the facet
  var container = document.createElement('div');

  // Add a label describing the facet (operator/property)
  var label = document.createElement('div')
  label.classList.add('facet_label');
  label.textContent = result.operatorName;
  container.appendChild(label);

  // Add each bucket
  for(var i in result.buckets) {
    var bucket = document.createElement('div');
    bucket.classList.add('cloudsearch_facet_bucket_container');

    // Extract & render value from structured value
    // Note: implementation of renderValue() not shown
    var bucketValue = this.renderValue(result.buckets[i].value)
    var link = document.createElement('a');
    link.classList.add('cloudsearch_facet_bucket_clickable');
    link.textContent = bucketValue;
    bucket.appendChild(link);
    container.appendChild(bucket);
  }
  return container;
}

// Renders a value for user display
ResultsContainerAdapter.prototype.renderValue = function(value) {
  // ...
}

ปรับแต่งพฤติกรรมการค้นหา

การตั้งค่าแอปพลิเคชันการค้นหาแสดงค่าเริ่มต้น สำหรับอินเทอร์เฟซการค้นหาและแบบคงที่ เพื่อนำไปปรับใช้แบบไดนามิก หรือข้อมูลประกอบ เช่น การอนุญาตให้ผู้ใช้เปิด/ปิดแหล่งข้อมูล ลบล้างการตั้งค่าแอปพลิเคชันการค้นหาด้วยการสกัดกั้นคำขอค้นหา ด้วยอะแดปเตอร์

ติดตั้งอะแดปเตอร์ด้วย interceptSearchRequest ในการแก้ไขคำขอที่ส่งไปยัง API การค้นหา ก่อนการดำเนินการ

เช่น อะแดปเตอร์ต่อไปนี้จะแทรกแซงคำขอจำกัดการค้นหา ไปยังแหล่งที่มาที่ผู้ใช้เลือก:

serving/widget/public/with_request_interceptor/app.js
/**
 * Results container adapter that intercepts requests to dynamically
 * change which sources are enabled based on user selection.
 */
function ResultsContainerAdapter() {
  this.selectedSource = null;
}
ResultsContainerAdapter.prototype.interceptSearchRequest = function(request) {
  if (!this.selectedSource || this.selectedSource == 'ALL') {
    // Everything selected, fall back to sources defined in the search
    // application.
    request.dataSourceRestrictions = null;
  } else {
    // Restrict to a single selected source.
    request.dataSourceRestrictions = [
      {
        source: {
          predefinedSource: this.selectedSource
        }
      }
    ];
  }
  return request;
}

หากต้องการลงทะเบียนอะแดปเตอร์เมื่อเริ่มต้นวิดเจ็ต ให้ใช้ setAdapter() เมื่อสร้าง ResultsContainer

serving/widget/public/with_request_interceptor/app.js
var resultsContainerAdapter = new ResultsContainerAdapter();
// Build the result container and bind to DOM elements.
var resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setAdapter(resultsContainerAdapter)
  // ...
  .build();

HTML ต่อไปนี้ใช้เพื่อแสดงช่องสำหรับเลือกกรองตาม แหล่งที่มา:

serving/widget/public/with_request_interceptor/index.html
<div>
  <span>Source</span>
  <select id="sources">
    <option value="ALL">All</option>
    <option value="GOOGLE_GMAIL">Gmail</option>
    <option value="GOOGLE_DRIVE">Drive</option>
    <option value="GOOGLE_SITES">Sites</option>
    <option value="GOOGLE_GROUPS">Groups</option>
    <option value="GOOGLE_CALENDAR">Calendar</option>
    <option value="GOOGLE_KEEP">Keep</option>
  </select>
</div>

โค้ดต่อไปนี้จะรับข้อมูลการเปลี่ยนแปลง ตั้งค่าการเลือก และ ดำเนินการค้นหาอีกครั้งหากจำเป็น

serving/widget/public/with_request_interceptor/app.js
// Handle source selection
document.getElementById('sources').onchange = (e) => {
  resultsContainerAdapter.selectedSource = e.target.value;
  let request = resultsContainer.getCurrentRequest();
  if (request.query) {
    // Re-execute if there's a valid query. The source selection
    // will be applied in the interceptor.
    resultsContainer.resetState();
    resultsContainer.executeRequest(request);
  }
}

นอกจากนี้ คุณสามารถสกัดกั้นการค้นหา คำตอบได้โดยการปรับใช้ interceptSearchResponse ในอะแดปเตอร์

ปักหมุดเวอร์ชัน API

โดยค่าเริ่มต้น วิดเจ็ตจะใช้ API เวอร์ชันเสถียรล่าสุด การล็อกอิน ระบุเวอร์ชันที่เจาะจง ให้ตั้งพารามิเตอร์การกำหนดค่า cloudsearch.config/apiVersion เป็นเวอร์ชันที่ต้องการก่อนที่จะเริ่มต้น Widget

serving/widget/public/basic/app.js
gapi.config.update('cloudsearch.config/apiVersion', 'v1');

เวอร์ชัน API จะมีค่าเริ่มต้นเป็น 1.0 หากไม่ได้ตั้งค่าหรือตั้งเป็นค่าที่ไม่ถูกต้อง

ปักหมุดเวอร์ชันวิดเจ็ต

หากไม่ต้องการให้มีการเปลี่ยนแปลงที่ไม่คาดคิดในอินเทอร์เฟซการค้นหา ให้ตั้งค่า พารามิเตอร์การกำหนดค่า cloudsearch.config/clientVersion รายการตามที่แสดง

gapi.config.update('cloudsearch.config/clientVersion', 1.1);

เวอร์ชันวิดเจ็ตจะมีค่าเริ่มต้นเป็น 1.0 หากไม่ได้ตั้งค่าหรือตั้งเป็นค่าที่ไม่ถูกต้อง

รักษาความปลอดภัยให้อินเทอร์เฟซการค้นหา

ผลการค้นหามีข้อมูลที่ละเอียดอ่อนมาก ทำตามแนวทางปฏิบัติแนะนำ สำหรับการรักษาความปลอดภัยของแอปพลิเคชันเว็บ โดยเฉพาะกับ การหลอกให้คลิก

ดูข้อมูลเพิ่มเติมได้ที่โปรเจ็กต์คู่มือ OWASP

เปิดใช้การแก้ไขข้อบกพร่อง

ใช้ interceptSearchRequest เพื่อเปิดการแก้ไขข้อบกพร่องของวิดเจ็ต Search เช่น

  if (!request.requestOptions) {
  // Make sure requestOptions is populated
  request.requestOptions = {};
  }
  // Enable debugging
  request.requestOptions.debugOptions = {enableDebugging: true}

  return request;