Product Documentation

Migrieren von Webinterface-Features nach StoreFront

Jul 07, 2016

Für viele Webinterface-Anpassungen können in StoreFront analoge Anpassungen mit JavaScript-Optimierungen oder von Citrix veröffentlichten APIs durchgeführt werden.

Die folgende Tabelle enthält eine Übersicht über die Anpassungen und grundlegende Informationen darüber, wie sie programmiert werden.

Ordnerpfade

  • Für Skript-Anpassungen fügen Sie die Beispiele in die Datei script.js in folgendem Ordner ein: 

C:\inetpub\wwwroot\Citrix\StoreNameWeb\custom

  • Für Stil-Anpassungen fügen Sie die Beispiele in die Datei style.css in folgendem Ordner ein:

C:\inetpub\wwwroot\Citrix\StoreNameWeb\custom

  • Für dynamischen Inhalt fügen Sie den dynamischen Kontext in einer Textdatei in folgendem Ordner ein:

C:\inetpub\wwwroot\Citrix\StoreNameWeb\customweb

  • In Bereitstellungen mit mehreren Servern können Sie alle Änderungen über die StoreFront-Verwaltungskonsole oder PowerShell auf die anderen Server replizieren.

Hinweis: In Webinterface können einzelne Benutzer verschiedene Einstellungen anpassen. Das ist derzeit in StoreFront 3.0 nicht möglich. Eine solche Möglichkeit kann zwar durch umfassendere Anpassungen geschaffen werden, dies ist jedoch nicht Gegenstand des vorliegenden Artikels.

 

Webinterface-Funktion

StoreFront-Äquivalent

Anpassung per Verwaltungskonsole

 

  • Layout mit reduziertem Grafikinhalt
  • Layout mit komplettem Grafikinhalt
  • Auswahl durch Benutzer

Nicht verfügbar StoreFront erkennt automatisch den Gerätebildschirm und passt die Benutzeroberfläche entsprechend an.

  • Aktivieren der Suche
  • Deaktivieren der Suche
  • Die Suche ist standardmäßig aktiviert.
  • Deaktivieren: Zum Ausblenden der Suchfelder auf der Desktop-/Web-Benutzeroberfläche fügen Sie der Datei style.css folgenden Stil hinzu:

.search-container {

    display: none;

}

Zum Ausblenden der Suchfelder auf der Telefon-Benutzeroberfläche fügen Sie folgenden Stil hinzu:

#searchBtnPhone {

    display: none;

}

Aktualisierung

Standardmäßig aktiviert (Browseraktualisierung).

Rückkehr zum letzten Ordner

Nicht standardmäßig aktiviert.

Zum Aktivieren der Funktion zum Speichern des aktuellen Ordners und Zurückkehren zu diesem beim Laden fügen Sie der Datei script.js Folgendes hinzu:

CTXS.Extensions.afterDisplayHomeScreen = function ()

{

  // check if view was saved last time

  CTXS.ExtensionAPI.localStorageGetItem("view",

  function (view) {

    if (view) {

         // if view was saved, change to it

         CTXS.ExtensionAPI.changeView(view);

    }

    if (view == "store") {  

        // if view is store, see if folder was saved

        CTXS.ExtensionAPI.localStorageGetItem("folder",

          function(folder) {

            if (folder != "") {

              // if folder was saved, change to it

              CTXS.ExtensionAPI.navigateToFolder(folder);

            }

          }

        );  

    }

    // set up monitoring of folder

    CTXS.Extensions.onFolderChange = function(folder) {

      CTXS.ExtensionAPI.localStorageSetItem("folder",

         folder);

    };

    // set up monitoring of view

    CTXS.Extensions.onViewChange = function(newview) {

      // don’t retain search or appinfo views

      // instead, remember parent view.

      if ((newview != "appinfo") &&

          (newview != "search")) {

            CTXS.ExtensionAPI.localStorageSetItem(

               "view", newview);

      }

    };

  });

};

 

QuickInfos

In Receiver gibt es nur sehr wenige QuickInfos, da es für Geräte mit und ohne Touchscreen vorgesehen ist. Sie können QuickInfo über ein benutzerdefiniertes Skript hinzufügen.

 

  • Symbolansicht
  • Baumstrukturansicht
  • Detailansicht
  • Listenansicht
  • Gruppenansicht
  • Standardansicht festlegen
  • Symbolansicht (reduzierter Grafikinhalt)
  • Listenansicht (reduzierter Grafikinhalt)
    Standardansicht (reduzierter Grafikinhalt)

Receiver hat eine andere Benutzeroberfläche, daher gelten diese Optionen nicht. Sie können Skripts zum Deaktivieren von Receiver-Ansichten und zum Hinzufügen benutzerdefinierter Ansichten verwenden. Sie können dies auch per Konfiguration festlegen.

In der Datei web.config im Website-Verzeichnis sind die verschiedenen Ansichten aktiviert bzw. deaktiviert, zudem ist dort die Standardansicht festgelegt.

Suchen Sie folgenden Abschnitt:

Suchen Sie außerdem folgenden Abschnitt:

enableAppsFolderView="true"

Die Favoritenansicht wird nur angezeigt, wenn die Abonnementfunktion für einen Store aktiviert ist (siehe StoreFront-Verwaltungskonsole).

  • Benutzeroberfläche mit einer Registerkarte
  • Benutzeroberfläche mit mehreren Registerkarten
    • App-Registerkarte
    • Desktop-Registerkarte
    • Inhalt-Registerkarte
    • (Registerkartenreihenfolge)

Die Benutzeroberfläche von Receiver ist standardmäßig in Registerkarten unterteilt, wobei sich Apps und Inhalt auf einer Registerkarte und Desktops auf der anderen befinden. Es gibt außerdem eine optionale Registerkarte Favoriten.

  • Kopfzeilenlogo
  • Textfarbe
  • Kopfzeilen-Hintergrundfarbe
  • Kopfzeilen-Hintergrundbild

Äquivalente für Farben und Logos bei Verwendung der StoreFront-Verwaltungskonsole. Klicken Sie in der StoreFront-Verwaltungskonsole im Bereich "Aktionen" auf "Websitedarstellung anpassen" und führen Sie Ihre Anpassungen auf dem angezeigten Bildschirm durch.

Mit einer Stil-Anpassung können Sie als Kopfzeile ein Hintergrundbild festlegen. Beispiel:

.theme-header-bgcolor {

    background-image: url('spirals.png');

}

  • Begrüßungsmeldung vor Anmeldung
    (vor Gebietsschema)
    • Title
    • Text
    • Hyperlink
    • Schaltflächenbezeichnung

Standardmäßig gibt es keinen eigenen Voranmeldungsbildschirm.

Mit diesem Beispielskript wird ein Meldungsfenster zum Durchklicken hinzugefügt:

var doneClickThrough = false;

// Before web login

CTXS.Extensions.beforeLogon = function (callback) {

    doneClickThrough = true;

    CTXS.ExtensionAPI.showMessage({

        messageTitle: "Welcome!",

        messageText: "Only for WWCo Employees",

        okButtonText: "Accept",

        okAction: callback

    });

};

// Before main screen (for native clients)

CTXS.Extensions.beforeDisplayHomeScreen

  = function (callback) {

    if (!doneClickThrough) {

        CTXS.ExtensionAPI.showMessage({

            messageTitle: "Welcome!",

            messageText: "Only for WWCo Employees",

            okButtonText: "Accept",

            okAction: callback

        });

    } else {

        callback();

    }

};

 

  • Titel des Anmeldebildschirms
  • Meldung des Anmeldebildschirms
  • Systemmeldung des Anmeldebildschirms

Es gibt vier Bereiche für Anpassungen auf dem Anmeldebildschirm bzw. den Anmeldebildschirmen. Bereich oben und unten im Bildschirm (Kopf- und Fußzeile) und Bereich oben und unten im Anmeldefeld selbst.

.customAuthHeader,

.customAuthFooter

.customAuthTop,

.customAuthBottom {

    text-align: center;

    color: white;

    font-size: 16px;

}

Beispielskript (statische Inhalte)

$('.customAuthHeader').html("Welcome to ACME");

Beispielskript (dynamische Inhalte)

function setDynamicContent(txtFile, element) {

CTXS.ExtensionAPI.proxyRequest({

url: "customweb/"+txtFile,

success: function(txt) {$(element).html(txt);}});

}

setDynamicContent("Message.txt", ".customAuthTop");

Hinweis: Fügen Sie weder explizit im Skript noch im Verzeichnis custom dynamische Inhalte ein, da Änderungen hier ein erneutes Laden der Benutzeroberfläche auf allen Clients erzwingen. Fügen Sie dynamische Inhalte im Verzeichnis customweb ein.

 

  • Begrüßungsmeldung des Anwendungsbildschirms
  • Systemmeldung des Anwendungsbildschirms

Siehe Beispiele für CustomAuth-Begrüßungsbildschirm oben.

Sie Beispiele für dynamische Inhalte oben. Verwenden Sie #customTop anstelle von #customAuthTop, um Inhalt auf dem Homebildschirm zu platzieren.

 

Fußzeilentext (alle Bildschirme)

Beispielskript:

#customBottom {

      text-align: center;

    color: white;

    font-size: 16px;

}

Beispiel für statische Inhalte unter Verwendung eines Skripts:

$('#customBottom).html("Welcome to ACME");

 

Features ohne direkte Entsprechung

 

 

  • Anmeldeseite ohne Kopfzeile
  • Anmeldeseite mit Kopfzeile
    (Einschließlich Meldungen)

Es gibt keine direkte Entsprechung in StoreFront. Sie können jedoch benutzerdefinierte Kopfzeilen erstellen.  Siehe "Titel des Anmeldebildschirms" oben.

 

Benutzereinstellungen

Standardmäßig gibt es keine Benutzereinstellungen.  Sie können Menüs und Schaltflächen über JavaScript hinzufügen.

Workspace Control                       

Äquivalente Funktionalität für Administratoreinstellungen. Die Erweiterungs-APIs bieten viel zusätzliche Flexibilität.

Weitere Informationen finden Sie unter http://www.citrix.com/go/citrix-developer/storefront-receiver-developer-community/receiver-customization-api.html.

Tiefgreifende Anpassung (Code)

 

 

Hooks für die ICA-Dateigenerierung und andere Anpassungen für das Aufrufrouting

Äquivalente oder bessere APIs.

http://www.citrix.com/go/citrix-developer/storefront-receiver-developer-community/store-customization-sdk.html

 

Authentifizierungsanpassungen

Äquivalente oder bessere APIs.

 

http://www.citrix.com/go/citrix-developer/storefront-receiver-developer-community/store-authentication-sdks.html

 

JSP-/ASP-Quellzugriff

Es gibt keine äquivalenten APIs in StoreFront, da die Benutzeroberfläche nicht auf die gleiche Weise gerendert wird.  Es gibt zahlreiche JavaScript-APIs für die Anpassung der Benutzeroberfläche.