Homepage - Katharina Biedermanns Blog

23.11.2011

Eigene Formatvorlagen mit SharePoint 2010

Wie man eigene Formatvorlagen in SharePoint 2010 zur Verfügung stellt lest ihr hier:

Bild

1. Eigenen Prefix in allen RichHtml – Feldern der gewünschten Pagelayouts hinterlegen.

Beispiel:

<PublishingWebControls:RichHtmlField PrefixStyleSheet="my-rte" FieldName="Text" runat="server"></PublishingWebControls:RichHtmlField>

2. Styles in der CSS-Datei hinterlegen.

Beispiel:

.my-rteStyle-Ueberschrift2 { -ms-name:"Ueberschrift 2 einfach"; }

.my-rteStyle-Ueberschrift2 { color: #4370B2; font: 16px/22px Helvetica,Arial,Verdana,sans-serif; }

.my-rteStyle-Ueberschrift2A { -ms-name:"Ueberschrift 2 Akkordeon"; }

.my-rteStyle-Ueberschrift2A { background: #F0F4F9; color: #4370B2; font: 16px/19px Helvetica,Arial,Verdana,sans-serif; padding: 10px; }

.my-rteStyle-Ueberschrift3 { -ms-name:"Ueberschrift 3"; }

.my-rteStyle-Ueberschrift3 { color: #000; font: 13px/18px Helvetica,Arial,Verdana,sans-serif; font-weight: bold; }

Bild

Bitte beachten: Der Prefix muss klein geschrieben werden.

Bereitgestellt um 15:52 von Katharina Biedermann | Kategorie: Design | Permalink | Diesen Beitrag per E-Mail senden | Kommentare (0)

27.10.2011

SharePoint Designer 2010 Bug umgehen

Im SharePoint Designer 2010 gibt es einen Bug bei der Erstellung von Seitenlayouts.

Sobald man ein Webcontrol in ein <h> Tag bettet, wird beim Speichern automatisch das sich schließende Tag wieder entfernt oder ein NonBrakingSpace hinzugefügt. Das führt natürlich nicht zu den gewünschten Effekten.

Beispiel:
<asp:Content ContentPlaceHolderId="PlaceHolder" runat="server">

<h1>

<SharePointWebControls:TextField runat="server" FieldName="Title" />

</h1> ß wird automatisch beim Speichern entfernt
</asp:Content>

Um dies zu vermeiden muss das WebControl einfach mit einem Endtag versehen werden.

Beispiel:

<asp:Content ContentPlaceHolderId="PlaceHolder" runat="server">

<h1>

<SharePointWebControls:TextField runat="server" FieldName="Title"></SharePointWebControls:Textfield> ß Endtag hinzufügen

</h1>
</asp:Content>

Hier entsteht dann der nächste Fehler. Der Designer rendert automatisch nach dem Schließen der Datei ein   nach dem Öffnen des <h> Tags. Wenn man also die geänderte Datei speichert, schließt und wieder öffnet, sieht sie folgendermaßen aus:

Beispiel:
<asp:Content ContentPlaceHolderId="PlaceHolder" runat="server">

<h1>  ß automatisch hinzugefügt

<SharePointWebControls:TextField runat="server" FieldName="Title"></SharePointWebControls:Textfield>

</h1>
</asp:Content>

Dieses Problem lässt sich lösen wenn man das WebControl zusätzlich in ein <span> Tag betten. Die Zeile sollte am Ende also wie folgt aussehen:

Beispiel:

<asp:Content ContentPlaceHolderId="PlaceHolder" runat="server">

<h1>

<span> ß eingebettet

<SharePointWebControls:TextField runat="server" FieldName="Title"></SharePointWebControls:Textfield>

</span> ß eingebettet

</h1>
</asp:Content>

Bereitgestellt um 12:37 von Katharina Biedermann | Kategorie: Design | Permalink | Diesen Beitrag per E-Mail senden | Kommentare (0)

22.04.2010

How To – Wie erstellt man ein Theme in SharePoint 2010

In SharePoint 2007 konnten Themes selbst erstellt und angepasst werden indem man sie einfach mit dem SharePoint-Designer editierte. Allerdings hat sich die Engine von 2010 im Vergleich grundlegend geändert.
Themes können nicht mehr ganz so einfach mit vielen Bildern und Logos an eine CI angepasst - dafür aber umso einfacher gestaltet werden wenn es sich einzig und allein um Farb- und Schriftanpassungen handelt.

Hier gibt es einen kurzen Überblick und den ein oder anderen Tipp zur Erstellung eines Themes bzw. Anpassung an ein CI.

Erstellen und hochladen eines Themes mit angepassten Farben und Schriften

Im ersten Schritt sollte das gewünschte Theme erstellt werden. Dies kann über Microsoft PowerPoint erfolgen – meiner Meinung nach aber viel einfacher über den Microsoft Theme Builder. Der Theme Builder kann hier heruntergeladen werden http://connect.microsoft.com/themebuilder. Das Programm wird geöffnet, oben links ein "Theme Name" vergeben und die gewünschten Farben und Schriften eingestellt. Anschließend wird das Theme als thmx. Datei abgespeichert.
Über die Sharepoint Site kann das Theme nun hochgeladen werden --> Site Actions --> Site Settings --> Theme Gallery --> "Add New"
Das Theme kann jetzt aktiviert werden --> Site Actions --> Site Settings --> Site Theme

Erstellen eines Themes nach CI Vorgaben

In SharePoint 2010 wird bei jeder Aktivierung eines Themes eine Kopie eines Unterordners im SharePoint-Designer erstellt. Diese Ordner enthalten Unmengen an CSS- und Bilddateien und werden im Verzeichnis _catalogs/Themes/Themed hinterlegt. Grundsätzlich können sie auch angepasst werden, nur leider gibt es keinen Weg diese gebündelten Ordner über die Oberfläche als auswählbares Theme darzustellen.

Um also ein Theme nach CI Vorgaben zu erstellen kann wie folgt vorgegangen werden (das Standard-Theme sollte dabei als Grundlage genommen werden).

Erstellen einer eigenen CSS-Datei und eines Image-Verzeichnis im Ordner "Style Library".
Registrierung der CSS-Datei in der Maserpage.
Anpassen/Überschreiben des Designs ausschließlich in der selbst erstellten CSS-Datei.
Deployen der CSS-Datei, des Image-Ordners und der Registrierung in der Masterpage über ein Feature.

Die Masterpage sollte bis auf die Angabe der CSS-Datei möglichst nicht angepasst werden, da sie in den unterschiedlichen Ausführungen (Teamsite, Meeting Workspace etc.) immer anders aufgebaut ist und so sehr viel Arbeitsaufwand entstehen würde.

Bereitgestellt um 22:22 von Katharina Biedermann | Kategorie: Design | Permalink | Diesen Beitrag per E-Mail senden | Kommentare (0)

31.08.2009

Einen benutzerdefinierten Webpart für Inhaltsabfragen (CQWP) erstellen

Im nachfolgenden Blog-Artikel beschreibe ich wie ein Webpart für Inhaltsabfragen (Content Query Webpart) benutzerdefiniert angepasst werden kann.

Das Beispiel zeigt die neusten Nachrichten auf der Startseite einer SiteCollection an. Es sollen das Erscheinungsdatum und der Titel der fünf neusten Nachrichten angezeigt werden, zusätzlich soll der Titel auf die angekündigte "Nachrichtenseite" verlinken.

Wir gehen von folgender Struktur aus:

Im ersten Schritt bewegen wir uns auf die Starseite der SubWebsite Nachrichten um später anzuzeigenden Inhalt für den WebPart zu erzeugen.

Über Websiteaktionen à Seite erstellen wird nun eine neue Seite (Nachricht) mit dem gewünschten Seitenlayout erstellt.

Sinnvollerweise sollte eine "Nachrichtenseite" immer ein Datum, einen Titel und einen Text enthalten.

In diesem Fall habe ich den Websiteinhaltstyp Homepage um die Spalten Nachrichtendatum und Seitentitel erweitert und in meinem Pagelayout hinterlegt.

Wenn die neue Seite erstellt und mit Beispieltext gefüllt wurde können wir diese wie gewohnt veröffentlichen.

Im nächsten Schritt bewegen wir uns nun auf die Startseite der SiteCollection. Über Websiteaktionen à Seite bearbeiten wird nun der ein Webpart für Inhaltsabfragen einer WebPartZone hinzugefügt.
Über bearbeiten à Freigegebenes WebPart bearbeiten nehmen wir nun schon ein paar Voreinstellungen vor:

Abfrage
- wähle den Punkt: "Elemente aus folgender Liste anzeigen" und wähle "Durchsuchen"
- navigiere zu folgender Bibliothek

- Listentyp wähle "Bibliothek für Seiten"

Präsentation
- wähle bei "Elemente sortieren nach" die Spalte Nachrichtendatum und "Elemente in absteigender Reihenfolge anzeigen"
- wähle bei "Eintragsgrenze" 5

Darstellung
- ersetzte den "Titel" WebPart für Inhaltsabfragen gegen Neue Nachrichten
- wähle bei "Chrmotyp" nur Titel

Alles mit OK bestätigen.

Über bearbeiten à Exportieren wird der WebPart nun mit den Voreinstellungen exportiert und zum Bearbeiten geöffnet.
Die Zeile <property name="CommonViewFields" type="string" /> erweitere ich meine später anzuzeigenden Websitespalten.

Für das Beispiel sind nun folgende Spalten von Bedeutung:

Nachrichtendatum (NewsDate) vom Typ "Datum und Uhrzeit"
Seitentitel (PageTitle) vom Typ "Eine Textzeile"

Die Zeile sollte nun so aussehen:
<property name="CommonViewFields" type="string">PageTitle,Text;NewsDate,Date;</property>

Anschließend kann die Änderung gespeichert und der Webpart in den Webpartkatalog der SiteCollection hochgeladen werden.

Jetzt bewegen wir uns zum ersten Mal in den SharePoint Designer (SPD).
Hier öffnen wir die Datei ItemStyle.xsl – diese befindet sich im Ordner Style Library/XSL Style Sheets –

Über diese Datei legen wir eine bestimmte Darstellungsform fest, diese wird später im WebPart ausgewählt.
In der Datei befinden sich verschiedene sogenannte "Templates" und hier werden wir auch unseres hinzufügen:

<xsl:template name="Nachrichten" match="Row[@Style='Nachrichten']" mode="itemstyle"> (Der Name beschreibt die Bezeichnung der Darstellungsform)
<div id="linkitem" class="ItemActually">
    <table class="PageTitle" cellpadding="0" cellspacing="0">
      <tr>
        <td>
          <div class="Date">
            <xsl:value-of select="ddwrt:FormatDate(string(@NewsDate) ,1031 ,1)"/> (Mit "select" wird die jeweils gewünschte Websitespalte ausgelesen, in diesem Fall "NewsDate". Weiterhin wird die Darstellung des Datums festgelegt.)
         </div>
         <span class="PageTitle" style="display:inline">
           <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
             <a href="/{@FileRef}">
           <xsl:value-of select="@PageTitle" /> (Wie vorangegangen wird auch hier eine Websitespalte ausgelesen: "PageTitle", zusätzlich wird noch der Link zum jeweiligen Listeneintrag gesetzt.)
             </a>
          </span>
        </td>
      </tr>
    </table>
    <div style="clear:both;"></div>
</div>
</xsl:template>

Ganz oben im <xsl:stylesheet> fügen wir noch folgenden Präfix hinzu:
xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"

Nach diesen Einstellungen kann das Dokument gespeichert und wieder eingecheckt werden.

Anschließend gehen wir zurück auf die Startseite der SiteCollection, dort wo wir auch die Nachrichten anzeigen wollen und entfernen den zuvor eingefügten WebPart wieder.
Dann fügen wir den von uns hochgeladenen WebPart aus dem Webpartkatalog hinzu und wählen bearbeiten à Freigegebenes WebPart bearbeiten.

Unter "Format für Elemente" muss noch "Nachrichten" ausgewählt werden und schon werden alle Nachrichten angezeigt.

Alle weiteren Design-Anpassungen können nun nach Wunsch erfolgen.

Bereitgestellt um 12:44 von Katharina Biedermann | Kategorie: Design | Permalink | Diesen Beitrag per E-Mail senden | Kommentare (0)

18.08.2009

Erstellung einer eigenen Masterpage und eines eigenen CSS

Diese Grundlage sollte in einem guten SharePoint Blog nicht fehlen und verhilft doch immer wieder vielen Neulingen zu schnellen Erfolgen beim Umgang mit dem SharePoint
Designer und dem Wunsch nach einer individuell gestalteten Oberfläche.

Als erstes wird die SiteCollection im SharePoint Designer geöffnet.

In dem Ordner _catalogs / masterpage (Masterseitenkatalog) befinden sich die aktuell verwendeten bzw. zur Auswahl stehenden Masterseiten und die dazugehörigen Seitenlayouts.
Die Masterseiten sind jeweils durch die Endung .master und die Seitenlayouts durch die Endung .aspx gekennzeichnet.

Die Masterseiten bestimmen das Grundgerüst einer Seite, die Seitenlayouts wiederum den Aufbau des Inhalts.

Grundsätzlich ist zu sagen dass gerade in den Anfangsphasen eines Designers darauf geachtet werden sollte dass die vorhandenen Masterpages und Seitenlayouts erst einmal nicht
überschrieben werden. Wenn überhaupt würde man zum Experimentieren eine Kopie einer Datei machen und diese dann anpassen, besser noch eine neue Datei anlegen.

Auf jeden Fall aber ist zu empfehlen sich die Masterpage der Website genau anzuschauen, um ein Gefühl für die Funktion der einzelnen Placeholder und den Aufbau zu bekommen.
Vor allem aber um sich mit der Wichtigkeit einzelner Controls vertraut zu machen.

Nun aber weiter:

Es wird eine neue Masterpage angelegt. Über Datei / Neu den Typ Master Page wählen und mit OK bestätigen. In die Codeansicht wechseln.
Dann den vorgegebenen Inhalt durch den Code für eine Minimal Masterpage, zu finden unter http://msdn.microsoft.com/en-us/library/aa660698.aspx, ersetzen.
Die neue Masterpage über Speicher unter im Ordner _catalogs / masterpage (Masterseitenkatalog) unter dem gewünschten Namen speichern.

Die neue Masterpage besteht nun erst einmal nur aus dem benötigten Grundgerüst. Die enthaltenen Placeholder müssen in der Masterpage dringend vorhanden sein und dürfen
nach Bedarf über visible="true" oder "false" angezeigt oder versteckt, jedoch nicht entfernt werden, da die verschiedenen Placeholder in unterschiedlichen Ansichten von SharePoint
verwendet werden.

Um die neue Masterpage nun anzeigen zu können muss diese über die SharePoint Oberfläche unter Websiteaktionen / Websiteeinstellungen / Alle Websiteeinstellungen ändern im
Abschnitt Aussehen und Verhalten / Masterseite ausgewählt und bestätigt werden. Die Masterseite der Website wird also die gerade neu erstellte Masterpage. Die Systemmasterseite
kann weiterhin als default.master stehen bleiben. Diese richtet sich am Website-Theme aus oder aber die Systemmasterseite bekommt je nach Design-Konzept ebenfalls das gleiche
Design wie die Website. Im letzteren Fall würde man für die Systemmasterseite eine andere Masterpage wählen.

Es erfolgt wieder ein Wechsel zurück in den SharePoint Designer. Nun geht es darum die Struktur der Webseite zu schaffen und alle Placeholder und Controls so zu positionieren dass
sie in das gewünschte Design passen. Den kompletten HTML-Möglichkeiten sind nun also erst einmal keine Grenzen gesetzt.

Die Anpassung des Designs durch CSS erfolgt über folgende Schritte:

Zuerst erzeugt man die neue/n CSS-Datei/en. Über Datei / Neu wird der Dateityp CSS gewählt und mit OK bestätigt.
Die neue Datei über Speicher unter im Ordner Style Library unter dem gewünschten Namen speichern.

Nun wird diese nur noch in der Masterpage registriert und schon kann das Anpassen der Seite per CSS erfolgen.

Bereitgestellt um 16:32 von Katharina Biedermann | Kategorie: Design | Permalink | Diesen Beitrag per E-Mail senden | Kommentare (0)

29.05.2009

Tab-Ansicht von Bibliotheken und Listen mit einem Klick!

Ich habe einen sehr nützlichen Webpart entdeckt welcher mir die Möglichkeit gibt meine angezeigten Listen & Bibliotheken in einer Seite als Tabs anzuzeigen.
Speziell bei starken Einschränkungen einer Webseite in der Höhe ist dies eine sinnvolle Lösung.

Normale Ansicht (Auflistung einer Test-Liste, eines Kalenders und meiner Dokumente)

Easy Tabs - Ansicht

Und so geht's:

Unter http://www.pathtosharepoint.com/pages/easyTabs.aspx den Easy Tabs - Webpart downloaden und in der eigenen SiteCollection unter "Websiteeinstellungen" / Galerien à "Webparts" hochladen.

Dann die gewünschte Webpartzone mit Bibliotheken und Listen füllen und am Ende den Webpart Easy Tabs ebenfalls der gleichen Webpartzone hinzufügen.

Der Easy Tabs Webpart ist ein angepasster Inhalts-Editor-Webpart. Beim wählen des Webparts werden die aktuell in der Webpartzone anzeigten Webparts identifiziert und als Tabs dargestellt.
Die Namen der Tabs richten sich nach dem Titel des jeweiligen Webparts. Das Layout kommt aus dem eingestellten Theme der Seite.
Der Webpart kann auf jeder SharePoint 2007 Seite genutzt werden und benötigt keinen Server Zugriff.

Nachteile: Hab keine gefunden!

Quelle: http://pathtosharepoint.wordpress.com/

Bereitgestellt um 15:28 von Katharina Biedermann | Kategorie: Design | Permalink | Diesen Beitrag per E-Mail senden | Kommentare (0)

11.05.2009

Benutzerdefiniertes Theme für SharePoint MOSS 2007 und WSS 3.0

Um einfach und auch schnell ein neues Design in meine SharePoint-Umgebung zu bringen empfielt es sich ein SharePoint Theme zu erstellen.

Grundsätzlich besteht ein Theme aus folgenden Dateien:

- theme.inf

- theme.css

- Bilder

Die theme.inf beinhaltet den Titel des Themes.

Die theme.css beinhaltet die Styles, also das Design z. Bsp. Farben, Größen und Bilder.

Nachfolgend eine kurze, einfache Anleitung wie ich ein fertiges SharePoint Theme in meine Umgebung importieren kann:

(wie nennen das zu importierende Theme "ITACS")

1. Als erstes kopiert man ein schon vorhandenes Theme unter dem Pfad "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES" und benennt den Hauptordner in den gewählten Theme-Namen um. In diesem Fall "ITACS".

2. Im nächsten Schritt werden innerhalb des "ITACS" Ordners alle in den Styles nicht genutzten Bilder gelöscht bzw. durch neue nun genutzte Bilder ergänzt.

3. Die vorhandene .inf Datei wird umbenannt in ITACS.inf, wobei darauf geachtet werden muss dass der Dateiname durchgehend groß zu schreiben ist.

4. Die Datei ITACS.inf mit Notepad öffnen.

5. Den title unter [info] in ITACS umbenennen.

6. Alle Wörter unter [titles] durch ITACS ersetzen.

7. Die Datei SPTHEMES.XML unter "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033" bzw. \1031 mit Notepad öffnen. Die hier folgenden Änderungen zeigen später den Namen und die Vorschau des Themes zur Auswahl unter Websiteeinstellungen --> Wesitedesign an.

8. Unterhalb des <SPTHEMES> Tag ein neues Template hinzufügen:
<Templates>
<TemplateID>ITACS</TemplateID>
<DisplayName>ITACS</DisplayName>
<Description>ITACS Theme</Description>
<Thumbnail>images/ITACS.gif</Thumbnail>
<Preview>images/ITACS.gif</Preview>
</Templates>

9. Um die Vorschau richtig anzeigen zu lassen muss unter "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES" die Datei ITACS.gif abgelegt werden. Die Datei kann einen beliebigen Namen haben und jederzeit umbenannt werden, wobei zu beachten ist dass die jeweiligen Änderungen auch in der Datei SPTHEMES.XML anzupassen sind.

10. Es ist empfehlenswert ein iisreset durchzuführen damit der Server die Änderungen erkennt.

Bereitgestellt um 10:15 von Katharina Biedermann | Kategorie: SharePoint Theme | Permalink | Diesen Beitrag per E-Mail senden | Kommentare (0)

Designanpassung SharePoint - Suche

Das Ziel des folgenden Beitrags ist die Anpassung des Designs der Standard-Suche.

Wenn man die Suche in der Standard -Theme-Ansicht betrachtet, sieht sie folgendermaßen aus:

Die Code-Ansicht hierzu:

<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox"/> </asp:ContentPlaceHolder>

Die Suche soll nun auf folgende Ansicht angepasst werden:

Hierfür muss der Code im oberen Bereich durch folgenden ersetzt werden:

<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
<SPSWC:SearchBoxEx id="SearchBox"
TextBeforeTextBox="<%$Resources:cms,masterpages_searchbox_label%>" (Zeigt den anzuzeigenden Text vor dem Suchfeld an, in diesem Fall "Suche" aus den Ressourcen)
TextBoxWidth="150" (Setzt die fixe Breite der Textbox)
DropDownMode = "HideScopeDD" (Setzt den Modus der DropDown-Anzeige: HideScopeDD=DropDown-Scopes werden nicht angezeigt, ShowDD=DropDown-Scopes werden angezeigt)
GoImageUrl="<% $SPUrl:~sitecollection/Style Library/Images/ doubleArrow.gif %>" (Setzt den Link zum gewünschten Bild des Such-Buttons)
SuppressWebPartChrome="true" (Setzt den Chrome-Typ, erbt vom WebPart. true=Chrome-Typ wird nicht angezeigt)
runat="server"
__WebPartId="{971AE3B6-1673-44BA-A996-197B9C4496F6}"/>
</asp:ContentPlaceHolder>