Créer une interface de recherche avec le widget Recherche

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Vous devez ajouter un rappel onload dans la balise du script. La fonction est appelée une fois que le chargeur est prêt. Lorsque le chargeur est prêt, poursuivez le chargement du widget en appelant gapi.load() pour charger le client API, Google Sign-In et Cloud Search.

/**
* 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)
}

La fonction initializeApp() est appelée une fois tous les modules chargés.

Initialiser le widget

Commencez par initialiser la bibliothèque cliente en appelant gapi.client.init() ou gapi.auth2.init() avec l'ID de client généré et le champ d'application https://www.googleapis.com/auth/cloud_search.query. Ensuite, utilisez les classes gapi.cloudsearch.widget.resultscontainer.Builder et gapi.cloudsearch.widget.searchbox.Builder pour configurer le widget et le lier à vos éléments HTML.

L'exemple suivant montre comment initialiser le widget:

/**
 * 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'
    });
  });
}

L'exemple ci-dessus fait référence à deux variables de configuration définies comme suit:

/**
* Client ID from OAuth credentials.
*/
var clientId = "...apps.googleusercontent.com";

/**
* Full resource name of the search application, such as
* "searchapplications/".
*/
var searchApplicationName = "searchapplications/...";

Personnaliser l'expérience de connexion

Par défaut, le widget invite les utilisateurs à se connecter et à autoriser l'application dès qu'ils commencent à saisir une requête. Avec Google Sign-In for Websites, vous pouvez leur offrir une expérience de connexion plus personnalisée.

Autoriser les utilisateurs directement

Utilisez Se connecter avec Google pour surveiller l'état de connexion de l'utilisateur, et pour le connecter ou le déconnecter lorsque cela est nécessaire. Par exemple, l'exemple suivant observe l'état isSignedIn pour surveiller les modifications de connexion et utilise la méthode GoogleAuth.signIn() pour lancer la connexion à partir d'un clic sur un bouton:

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

Pour en savoir plus, consultez Se connecter avec Google.

Connecter les utilisateurs automatiquement

Pour une expérience de connexion encore plus simple, il est possible de pré-autoriser l'application au nom des utilisateurs de votre organisation. Cette technique s'avère également utile lorsque vous protégez l'application avec Cloud Identity-Aware Proxy.

Pour en savoir plus, consultez l'article Utiliser Google Sign-In avec des applications informatiques.

Personnaliser l'interface

Vous pouvez modifier l'apparence de l'interface de recherche en combinant diverses techniques:

• Remplacer les styles avec du code CSS
• Décorer les éléments avec un adaptateur
• Créer des éléments personnalisés avec un adaptateur

Remplacer les styles avec du code CSS

Le widget de recherche est fourni avec un code CSS propre, qui sert à définir le style des éléments de suggestion et de résultat ainsi que les commandes de pagination. mais vous pouvez modifier l'apparence de ces éléments si besoin.

Le widget Recherche applique automatiquement sa feuille de style par défaut une fois que les feuilles de style de l'application ont été chargées, ce qui augmente le niveau de priorité des règles. Pour que vos styles prévalent sur ceux définis par défaut, renforcez la spécificité des règles par défaut à l'aide de sélecteurs d'ancêtre.

Par exemple, la règle suivante n'a aucun effet si elle est chargée dans une balise link ou style statique dans le document.

.cloudsearch_suggestion_container {
  font-size: 14px;
}

Qualifiez plutôt la règle avec l'ID ou la classe du conteneur d'ancêtre déclaré dans la page.

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

Pour obtenir la liste des classes compatibles et un exemple de code HTML généré par le widget, consultez l'article Classes CSS autorisées.

Décorer les éléments avec un adaptateur

Pour décorer un élément avant le rendu, créez et enregistrez un adaptateur qui implémente l'une des méthodes de décoration telles que decorateSuggestionElement ou decorateSearchResultElement..

Les adaptateurs suivants ajoutent une classe personnalisée aux éléments de suggestion et de résultat.

/**
 * 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');
}

Pour enregistrer l'adaptateur lors de l'initialisation du widget, utilisez la méthode setAdapter() de la classe Builder correspondante:

// 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();

Les décorations peuvent modifier les attributs de l'élément conteneur ainsi que les éléments enfants. Elles sont susceptibles d'entraîner l'ajout ou la suppression d'éléments enfants. Par conséquent, lorsque vous modifiez la structure des éléments, créez directement les éléments voulus plutôt que d'utiliser des décorations.

Créer des éléments personnalisés avec un adaptateur

Pour créer un élément personnalisé pour une suggestion, un conteneur de facettes ou un résultat de recherche, créez et enregistrez un adaptateur qui implémente createSuggestionElement, createFacetResultElement ou createSearchResultElement, respectivement.

Les adaptateurs suivants permettent de créer des éléments personnalisés de suggestion et de résultat de recherche à l'aide des balises HTML