Anwendungsliste mit hinterlegtem Bild

Andi Fandrich Als Antwort am 22 Juni 2018 08:35

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.

Annette Als Antwort am 22 Juni 2018 09:36

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.....

Andi Fandrich Als Antwort am 22 Juni 2018 10:02

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.

Annette Als Antwort am 22 Juni 2018 10:20

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?

Andi Fandrich Als Antwort am 22 Juni 2018 11:47

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.

NJP8888 Als Antwort am 22 Juni 2018 15:56

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 

Annette Als Antwort am 25 Juni 2018 07:37

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

Derby Als Antwort am 25 Juni 2018 17:22

Ist die Kachelliste dafür keine Option?

Annette Als Antwort am 26 Juni 2018 07:48

[quote user="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.