Darstellung anpassen

Styling mit CSS

Einfache Anpassungen der Darstellung erreichen Sie mithilfe eigener CSS-Regeln. Überschreiben Sie die vordefinierten Regeln mit Ihren eigenen Regeln, indem Sie ein eigenes Stylesheet einbinden oder entsprechende inline-Styles definieren.

Hinweis: Bitte beachten Sie, dass Anpassungen der CSS oder der Templates nur durchgeführt werden sollten, wenn Sie damit Erfahrung haben und Ihnen bewusst ist, dass damit fortlaufende Wartungsaufwände verbunden sein können! OXOMI wird regelmäßig gepatcht, daher ist es nicht ausgeschlossen, dass Sie Ihre Anpassungen von Zeit zu Zeit warten müssen.

Wir informieren Sie per MEMOIO-Broadcast, wenn am System Änderungen vorgenommen wurden. Um die Benachrichtigungen zu abonnieren, klicken Sie hier: OXOMI-Änderungen abonnieren .

Hinweis: Nutzen Sie zum Entwickeln Ihrer Stylings die Entwicklungstools Ihres Browsers.

Beispiel: Vorschaubild-Größe der Katalog-Übersicht

<style type="text/css">
.oxomi-catalog img {
    max-width: 165px;
}

.oxomi-catalog-links .oxomi-catalog-title {
    width: 100px;
}
</style>

Styling des HTML-Viewers mit CSS

Auch die Darstellung des neuen HTML-Viewer für Dokumente lässt sich mit Hilfe von CSS-Regeln anpassen. Legen Sie hierfür ein eigenes Stylesheet auf Ihrem Server ab, welches die Regeln unseres Viewers überschreibt und übergeben Sie anschließend die (absolute) URL zu diesem Stylesheet als Parameter webviewerCSS beim oxomi.init() Aufruf.

Beispiel: Anpassung der HTML-Viewer Darstellung mittels CSS

oxomi.init({
    portal: 'IHRE PORTAL-ID',
    user: 'BENUTZERNAME',
    accessToken: 'AUTHENTIFIZIERUNGS-TOKEN',
    webviewerCSS: 'STYLESHEET-URL'
});

Styling-Klassen ergänzen

Eine weitere Möglichkeit die Darstellung der eingebunden Daten anzupassen, ist es, die Klassen des HTML-Markups durch eigene Klassen zu erweitern.

Beispiel:

// API Aufruf und definierte Klassen-Erweiterungen
oxomi.embedCatalog({ catalog: '9000179',
                     target: '#my-catalog',
                     classMap: {
                         '.oxomi-catalog' : 'span3',
                         '.oxomi-link' : 'pull-right extralarge'
                     }
                   });

Hinweis: Dieses Property kann entweder als Property beim Integrationsaufruf oder als Property während der Initialisierung übergeben werden.

Templates ändern

Für eine strukturelle Anpassung des dargestellten Markup haben Sie die Möglichkeit eigene Templates zu definieren. Die Template-Schnipsel werden mit Mustache-Code mit Daten befüllt. Details zur  Mustache-Template Sprache finden Sie hier.

Hinweis: Beachten Sie, dass Sie alle Template-Variablen aus den vordefinierten Templates beibehalten sollten. Ansonsten werden nicht alle Information dargestellt.

Templates können Sie auf zwei unterschiedliche Arten ändern. Entweder mit dem Property template im jeweiligen Integrationsaufruf oder während der Initialisierung des JavaScript-Codes oxomi.init() mit entsprechenden Template-Properties.

Integrationsaufruf

Beispiel:

// API Aufruf durchführen und HTML-Vorlage definieren
oxomi.embedCatalog({ catalog: '9000179',
                     target: '#my-catalog',
                     template: '<img src="{{mediumUrl}}" />'});

Initialisierung

Benutzen Sie die nachfolgenden Template-Property, um während der Initialisierung Templates festzulegen.

Beispiel:

// OXOMI initialisieren und die HTML-Vorlage überschreiben
oxomi.init({ portal: 'IHRE PORTAL-ID',
             accessToken: 'AUTHENTIFIZIERUNGS-TOKEN',
             catalogsTemplate: '<img src="{{mediumUrl}}" />'});

Details zur  Initialisierung finden Sie hinter dem Link.

Hilfselemente einblenden

Es kann vorkommen, dass Sie neben den Daten auch zusätzliche Elemente, wie zum Beispiel Steuerelemente, einblenden müssen. Ein typisches Beispiel sind Pagination-Elemente, um durch eine größere Anzahl an Elementen seitenweise durchnavigieren zu können.

Beispiel:

// API Aufruf durchführen und .pagination Elemente bei Erfolg einblenden
oxomi.catalogs({ supplierNumber: 'L10190',
                 target: '#my-catalog-list',
                 auxElements: '.pagination'});