SharePointCommunity
Die deutschsprachige Community für SharePoint, Office 365 und mit Azure

Anwendungsliste mit hinterlegtem Bild

bewertet von 0 Usern
Dieser Beitrag hat 9 Antworten | 3 Followers

Ohne Rang
Beiträge 18
Annette erstellt: 21 Jun 2018 15:52

Hallo,

ich habe eine Liste von Anwendungen, bei denen ich angelehnt an den Metro-Style einen Hintergrund mit einem Text überlagern will.

Ich habe versucht, eine Metrostyle-Vorlage anzupassen, aber meine xsl-Kenntnisse sind dafür nicht ausreichend. Die Buttons liegen immer nebeneinander, ich möchte sie aber zwingend untereinander haben ohne dem Webpart eine bestimmte Breite vorzugeben.

Gibt es irgendwo eine Vorlage, die ich einbauen und verwenden könnte?

Meine Liste:

So sieht es aus:

So hätte ich es gerne:

Viele Grüße

Annette

Top-10-Beitragsschreiber
Beiträge 18.847

Ich habe keine Ahnung wie das an der Stelle gemacht wird, aber im Prinzip mußt Du nur nach jedem Element ein <br /> einbauen.

Alternativ könntest Du auch zur Anzeige die Suche benutzen. Also ein Suchergebniswebpart auf eine Seite und so konfigurieren, daß nur noch die gewünschten Elemente angezeigt werden. Die Anzeige selbst kann man mit sog. Search Display Templates nach Belieben anpassen und dazu braucht man kein XSL.

Viele Grüße
Andi
af @ evocom de
Blog
Ohne Rang
Beiträge 18

Ein <br> einzubauen habe ich schon versucht.... aber die xsl-Vorlage vom Metro-style ist einfach zu kompliziert als das ich das finde... ist eine in sich geschachtelte Tabelle.

Die Ergebnisse der Liste in einem Suchergebniswebpart anzeigen zu lassen, ist auch kein Problem, aber ich brauche irgendetwas, dass mir den Text ÜBER das "Schaltflächenbild" legt.  Eine Liste mit daneben liegendem "Knopf" bekomme ich problemlos hin, aber das ist nicht gewünscht.

Es sollen auch nicht für jede Anwendung eine fertige "Schaltfläche" hochgeladen werden, sondern eben 3 verschiedenfarbige Vorlagen dahinter gelegt werden können auf denen dann ein Text überlagert wird.

Ich habe folgendes eingebaut:

  • Eine "metro.css"
    .klein{
        height:31px;
        max-height:31px; 
        width:220px; 
        float:left;
        margin:2px 2px 0 0;
        padding:2px;
    }
    .groß{
        height:62px;
        max-height:62px; 
        width:220px; 
        float:left;
        margin:2px 2px 0 0;
        padding:2px;
    }
     
    .box {
         float: left;
         position:relative;
         text-align:center;
         font-weight: bold;    
         top:-25px;
         width: 100%;
         padding: 2px;
         opacity: 0.8;
         box-sizing: border-box;
  • Ergänzung in der ContentQueryMain.xsl
           <xsl:template name="OuterTemplate.CallItemTemplate">
        <xsl:param name="CurPosition" />
        <xsl:param name="LastRow" />
     .....
                 <xsl:when test="@Style='ImageTable'">
                    <xsl:apply-templates select="." mode="itemstyle">
                      <xsl:with-param name="CurPos" select="$CurPosition" />
                      <xsl:with-param name="LastRow" select="$LastRow" />
                    </xsl:apply-templates>
                  </xsl:when>
    ....
  • Ergänzung der ItemStyle.xsl

    <xsl:template name="ImageTable" match="Row[@Style='ImageTable']" mode="itemstyle">
        <xsl:param name="CurPos" />
        <xsl:param name="LastRow" />
        <xsl:variable name="SafeLinkUrl">
          <xsl:call-template name="OuterTemplate.GetSafeLink">
            <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
          </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="SafeImageUrl">
          <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
            <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
          </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="DisplayTitle">
          <xsl:call-template name="OuterTemplate.GetTitle">
            <xsl:with-param name="Title" select="@Title"/>
            <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
          </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="LinkTarget">
          <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
        </xsl:variable>
       
        <div style="display:none">
          <xsl:value-of select="@LinkText" />
        </div>
        <div style="display:none">
          <xsl:value-of select="@TileSize" />
        </div>
        <xsl:if test="$CurPos = 1 ">
          <xsl:text disable-output-escaping="yes">&lt;link href=&quot;https://mydsd.sharepoint.com/sites/spielwiese/Style%20Library/DSD/metro.css&quot; rel=&quot;stylesheet&quot;&gt;</xsl:text>
          <xsl:text disable-output-escaping="yes">&lt;div&gt;&lt;table&gt;</xsl:text>
        </xsl:if>
        <xsl:if test="$CurPos mod 8 = 1">
          <xsl:text disable-output-escaping="yes">&lt;tr&gt;</xsl:text>
        </xsl:if>
       
        <div class="{@TileSize}"> 
          <xsl:if test="string-length($SafeImageUrl) != 0">
            <a href="{$SafeLinkUrl}" target="{$LinkTarget}">
              <img class="image" width="100%" height="100%" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" />
            </a>
          </xsl:if>
          <xsl:if test="string-length(@LinkText) != 0">
            <div class="box">
              <a href="{$SafeLinkUrl}">
                <xsl:value-of select="@LinkText"/>
              </a>
            </div> 
          </xsl:if>
        </div>
        
        <xsl:if test="$CurPos mod 4 = 0">
          <xsl:text disable-output-escaping="yes">&lt;/tr&gt;</xsl:text>
        </xsl:if>
        <xsl:if test="$CurPos = $LastRow ">
          <xsl:text disable-output-escaping="yes">&lt;/table&gt;&lt;/div&gt;</xsl:text>
        </xsl:if>
      </xsl:template>

 

Das ist der "unvermatschte" Metro-Style, den ich versuche anzupassen.....

 

 

Top-10-Beitragsschreiber
Beiträge 18.847

Also Microsoft hat das bestimmt mal gut gemeint, aber diese XSL-Geschichten sind dermaßen durchnormalisiert, da findet sich kein Schwein drin zurecht...

Es gibt dort einige <xsl:if test=$CurPos mod x=y"... Soweit ich das sehe, erzeugen die die Tabellenzeilen. Lasse das <xsl:if und das zugehörige </xsl:if einfach weg. Aber nicht die Zeile(n) dazwischen! Einen Versuch ist es wert...

Ansonsten kann ich Dich nur ermutigen, den Ansatz mit der Suche zu testen. Text und Bild zu überlagern ist ja "nur" HTML und CSS. Das kannst Du in einer kleinen Test-Html-Datei ausprobieren und wenn Du weißt wie es geht ins Display Template einbauen.

Viele Grüße
Andi
af @ evocom de
Blog
Ohne Rang
Beiträge 18

Das habe ich schon versucht.... leider ohne wirklichen Erfolg. Und danke, dass Du mir sagst, dass auch erfahrenere da nicht so komplett durchblicken ;) ich kam mir so total dumm vor....(okay, ich bin nicht erfahren, aber auch nicht total doof)

Dann werde ich mich wohl mal versuchen mit der anderen Lösung anzufreunden...

Hast du da irgendwo einen Link zu weitergehenden Infos?

Top-10-Beitragsschreiber
Beiträge 18.847

Also ich konnte XSL mal richtig gut und habe früher auch viel Mühe in die XSL-Files von SharePoint investiert, aber so richtig durchgestiegen bin ich nie. Das ist alles wie gesagt viel zu sehr normalisiert.

Inzwischen hat man aber auch in SharePoint einige andere Möglichkeiten, nämlich die von HTML/CSS und JavaScript. Mir fällt noch ein, daß man auch die Listenansicht selbst anpassen könnte. Stichwort dafür ist JSLink client side rendering.

Den einen Link zum Anpassen der Suchergebnisse hab ich auch nicht. Es gibt da wirklich viel im Netz und es hängt auch viel vom Suchenden ab. Vorkenntnisse und Präferenzen wie z.B. lieber Buch oder lieber Video. Wenn Du nach sharepoint custom search display template suchst, müßtest Du aber schnell was brauchbares finden.

Viele Grüße
Andi
af @ evocom de
Blog
Ohne Rang
Beiträge 8

Hallo Annette,

vielleicht sehe es einfach zu einfach oder ich habe es nicht verstanden.

Warum nimmst du nicht 5 übergeordnete Links (rein konfigurativ) und stellst dann 5 WebParts auf einer Seite untereinander (WP konfigurieren ohne Überschrift, Symbole usw). Jede dieser "Kachel" kann Text und ein Hintergrundbild tragen.

Klingt einfach, ist einfach und stellt genau das dar was Du möchtest, ohne programmatisches gefrickel.

Gruß

Jürgen 

Ohne Rang
Beiträge 18

Hi Jürgen,

nein, leider hilft mir das nicht... Die Links ändern sich sowohl in der Anzahl als auch in der Konfiguration und die Kollegen, die diese Anwendungen betreuen, sollen das ganz einfach in einer Liste ändern können. In dem Bild habe ich nur ein "neutrales Beispiel" eingebaut, es sind insgesamt fast 50 Links für verschiedene Usergruppen und verschiedene Anwendungsbereiche.

Wenn es "statisch" wäre, würde ich die "Buttons" direkt in einem Bildbearbeitungsprogramm erstellen und als Bild in die Liste einfügen.

Gruß

Annette

Top-25-Beitragsschreiber
Beiträge 427

Ist die Kachelliste dafür keine Option?

Ohne Rang
Beiträge 18

Derby:
Ist die Kachelliste dafür keine Option?

Leider nein, denn ich brauche zum einen "flache Buttons", nicht quadratische, außerdem müssen die grundsätzlich einspaltig stehen OHNE das ich einem Webpart eine Breite vorgebe und die Überlagerung des Textes mit dem grauen Feld passt auch nicht auf meine Vorgaben. 

Seite 1 von 1 (10 Elemente) | RSS