Exemplarische Vorgehensweise: Erstellen eines benutzerdefinierten Feldrendering-Steuerelements für mobile Seiten

  • Artikel

Letzte Änderung: Mittwoch, 2. Februar 2011

Gilt für: SharePoint Foundation 2010

In dieser exemplarischen Vorgehensweise wird gezeigt, wie Sie das Feldrendering auf mobilen Seiten anpassen, indem Sie ein benutzerdefiniertes Feldrendering-Steuerelement zusammen mit einem RenderingTemplate-Objekt implementieren. Das Beispielverfahren beschreibt das Anpassen des Title-Felds eines Elements in einer Announcements-Liste auf den mobilen Seiten Anzeigen, Neu und Bearbeiten für ein Element. Die Anpassung erfolgt für die drei Seiten unterschiedlich:

  • Formular Anzeigen – Es wird ein Link für die Suche hinzugefügt, über den Benutzer das Internet mit Bing nach dem Titel der Ankündigung durchsuchen können.

  • Formular Bearbeiten – Es wird Standardtext hinzugefügt, wenn der Wert der Expires-Spalte kleiner als das aktuelle Datum ist.

  • Formular Neu – Es wird Standardtext hinzugefügt, um den Benutzern ein bestimmtes Format für Werte anzuzeigen.

Eine Übersicht über die Schritte zur Anpassung von Feldern auf mobilen Seiten finden Sie unter Vorgehensweise: Anpassen des Renderns von Feldern auf mobilen Seiten.

Voraussetzungen

Führen Sie mindestens eine der folgenden Aktionen aus:

Empfohlen: Führen Sie die Verfahren in Exemplarische Vorgehensweise: Anpassen von Elementtiteln in mobilen Formularen aus.

So richten Sie das Projekt für ein benutzerdefiniertes Feld ein

  1. Erstellen Sie in Visual Studio ein leeres SharePoint-Projekt. Erstellen Sie eine Farmlösung (keine Lösung mit eingeschränkter Sicherheitsstufe), und nennen Sie sie MobileItemTitleField.

  2. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, und wählen Sie Eigenschaften aus.

  3. Geben Sie auf der Registerkarte Anwendung des Dialogfelds Eigenschaften im Feld Assemblyname den Wert Contoso.SharePoint.MobileControls.ItemTitleField und im Feld Standardnamespace den Wert Contoso.SharePoint.MobileControls ein. Lassen Sie die Einstellung des Zielframeworks auf .NET Framework 3.5 unverändert.

  4. Falls das Feld Projektmappenplattformen im Visual Studio-Menü Standard nicht den Wert Any CPU oder x64 enthält, öffnen Sie die Registerkarte Erstellen, und legen Sie Zielplattform auf Any CPU oder x64 fest. Informationen zu dieser Auswahl finden Sie unter Gewusst wie: Festlegen des richtigen Zielframeworks und der CPU.

  5. Klicken Sie auf der Symbolleiste auf die Schaltfläche zum Speichern aller Dateien.

  6. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, zeigen Sie auf Hinzufügen, und wählen Sie Neues Element aus.

  7. Wählen Sie im Dialogfeld Neues Element hinzufügen in der Struktur Installierte Vorlagen die Option Visual C# und dann Code aus.

  8. Wählen Sie im Feld Vorlagen die Option Klasse aus, und geben Sie ItemTitleField.cs im Feld Name ein. Klicken Sie auf Hinzufügen.

  9. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Knoten Verweise, und klicken Sie auf Verweis hinzufügen. Wählen Sie dann bei gedrückter STRG-TASTE im Dialogfeld Verweis hinzufügen auf der Registerkarte .NET die Optionen System.Web und System.Web.Mobile aus. Klicken Sie auf OK.

  10. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, zeigen Sie auf Hinzufügen, und wählen Sie Zugeordneter SharePoint-Ordner aus.

  11. Verwenden Sie das geöffnete Struktursteuerelement, um den Ordner TEMPLATE\ControlTemplates zuzuordnen, und klicken Sie auf OK.

  12. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den neuen ControlTemplates-Ordner (nicht auf den Projektnamen), zeigen Sie auf Hinzufügen, und wählen Sie Neues Element aus.

  13. Wählen Sie im Dialogfeld Neues Element hinzufügen in der Struktur Installierte Vorlagen die Option SharePoint und dann 2010 aus.

  14. Wählen Sie im Feld Vorlagen ein SharePoint-Benutzersteuerelement aus, und nennen Sie die ASCX-Datei AnnouncementsItemTitleField.ascx. Klicken Sie auf Hinzufügen. Die Datei wird von Visual Studio automatisch dem SharePoint-Lösungsmanifest hinzugefügt, und es wird festgelegt, dass die Datei in %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\ControlTemplates bereitgestellt wird. Außerdem wird die Assembly dem Manifest hinzugefügt, und es wird festgelegt, dass sie im globalen Assemblycache bereitgestellt wird.

    TippTipp

    Fügen Sie das Benutzersteuerelement nicht durch Klicken mit der rechten Maustaste auf Projektname im Projektmappen-Explorer hinzu. Beim Hinzufügen eines Benutzersteuerelements auf diese Art und Weise wird es von Visual Studio in einem Unterordner von TEMPLATE\ControlTemplates abgelegt. Und falls es nicht verschoben wird, wird es von Visual Studio in einem entsprechenden Unterordner von %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\ControlTemplates bereitgestellt. Mobile Renderingvorlagen in Unterordern werden nicht geladen.

  15. Löschen Sie die Dateien AnnouncementsItemTitleField.ascx.cs und AnnouncementsItemTitleField.ascx.designer.cs, die automatisch unter der Datei AnnouncementsItemTitleField.ascx erstellt wurden. Sie werden für dieses Projekt nicht benötigt. Der Standardinhalt von AnnouncementsItemTitleField.ascx bezieht sich auf die soeben gelöschte Datei AnnouncementsItemTitleField.ascx.cs, und vom Compiler wird eine Warnung bezüglich der fehlenden Datei ausgegeben. Ignorieren Sie die Warnung, der Standardinhalt wird in einem Schritt weiter unten in diesem Thema geändert.

So erstellen Sie das Renderingsteuerelement

  1. Öffnen Sie die Datei ItemTitleField.cs file.cs des Projekts, falls noch nicht geschehen, und fügen Sie die folgenden using-Anweisungen hinzu.

    using System.Web.UI.MobileControls;
using Microsoft.SharePoint;
using Microsoft.SharePoint.MobileControls;

  2. Fügen Sie der ItemTitleField-Deklaration den public-Zugriffsmodifizierer hinzu, falls er nicht bereits vorhanden ist, und ändern Sie die Deklaration mit der Angabe, dass das Feld von SPMobileBaseTextField erbt.

    public class ItemTitleField : SPMobileBaseTextField
{

}

  3. Fügen Sie die folgende Überschreibung der CreateControlForDisplay()-Methode hinzu.

    protected override MobileControl CreateControlForDisplay()
{
   string title = Convert.ToString(this.ItemFieldValue);
   if (!String.IsNullOrEmpty(title))
   {
      this.LabelControl.BreakAfter = false;
      this.LabelControl.Text = title + " ";

      this.LinkControl.BreakAfter = false;
      this.LinkControl.Text = "Search";
      this.LinkControl.href = "https://www.bing.com/search?q=" + title.Replace(' ', '+');

      Panel panel = new Panel();
      panel.BreakAfter = false;
      panel.Controls.Add(this.LabelControl);
      panel.Controls.Add(this.LinkControl);

      return panel;
   }
   return null;
}

    Beachten Sie, dass von dieser Methode zunächst der aktuelle Wert des Title-Felds des aktuellen Listenelements abgerufen wird. Dieser aktuelle Wert ist in der ItemFieldValue-Eigenschaft gespeichert.

  4. Fügen Sie die folgende Überschreibung der CreateControlForNew-Methode hinzu.

    protected override MobileControl CreateControlForNew()
{
   MobileControl myNewControl = null;
   if (this.Field != null)
   {
      string text = "Group: Project Name";
      if (!this.Page.IsPostBack)
      {
         this.TextBoxControl.Text = text;
      }
      myNewControl = this.TextBoxControl;
   }
   return myNewControl;
}

  5. Fügen Sie die folgende Überschreibung der CreateControlForEdit-Methode hinzu.

    protected override MobileControl CreateControlForEdit()
{
   MobileControl myEditControl = null;
   if (this.Item != null && this.Field != null)
   {
      if (this.NeedEllipsisRendering)
      {
         myEditControl = this.CreateControlForDisplay();
      }
      else
      {
         if (!this.Page.IsPostBack)
         {
            string strEdit = this.Field.GetFieldValueForEdit(this.ItemFieldValue);
            string overDue = "OVERDUE: ";

            SPListItem item = this.ListItem;
            if (item["Expires"] != null)
            {
               System.DateTime date = (DateTime)item["Expires"];
               if (date.CompareTo(System.DateTime.Today) < 0)
               {
                  this.TextBoxControl.Text = overDue + strEdit;
               }
               else
               {
                  this.TextBoxControl.Text = strEdit;
               }
            }
         }
         myEditControl = this.TextBoxControl;
      }
   }
   return myEditControl;
}

So erstellen Sie die Renderingvorlage

  1. Öffnen Sie die Datei AnnouncementsItemTitleField.ascx, und ersetzen Sie den gesamten Direktivenabschnitt durch das folgende Markup.

    <%@ Register TagPrefix="GroupBoardMobile"   Namespace="Microsoft.SharePoint.Applications.GroupBoard.MobileControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#"   %> 
<%@ Assembly Name="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" %> 
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="SPMobile" Namespace="Microsoft.SharePoint.MobileControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="WPMobile" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

  2. Fügen Sie eine zusätzliche Registrierung eines Tagpräfixes mit folgendem Code hinzu.

    <%@ Register TagPrefix="Contoso" Namespace="Contoso.SharePoint.MobileControls" Assembly="$SharePoint.Project.AssemblyFullName$" %>

    Das Visual Studio-Token $SharePoint.Project.AssemblyFullName$ wird beim Erstellen des Projekts durch den vierteiligen Assemblyname ersetzt.

  3. Fügen Sie eine Import-Direktive für den Microsoft.SharePoint-Namespace hinzu.

    <%@ Import Namespace="Microsoft.SharePoint" %>

  4. Fügen Sie unterhalb der Direktiven eine RenderingTemplate-Anweisung hinzu, und weisen Sie ihr die ID zu, nach der von der Laufzeit gesucht wird: MobileCustomListField_Announcements_Text_Title.

    <SharePoint:RenderingTemplate RunAt="Server" ID="MobileCustomListField_Announcements_Text_Title" >

</SharePoint:RenderingTemplate>

  5. Definieren Sie innerhalb des RenderingTemplate-Elements ein Template-Element, das das benutzerdefinierte ItemTitleField-Objekt als untergeordnetes Steuerelement hat.

    <Template>
  <Contoso:ItemTitleField RunAt="Server" />
</Template>

    Beachten Sie, dass diese Datei der in Exemplarische Vorgehensweise: Anpassen von Elementtiteln in mobilen Formularen erstellten bis auf folgende Unterschiede gleicht:

    • Es wird eine neue Register-Direktive zur Registrierung des Tagpräfixes "Contoso" hinzugefügt.

    • Es wird eine Zeile zum Importieren des Microsoft.SharePoint-Namespaces hinzugefügt.

    • Die folgende Zeile ist in Exemplarische Vorgehensweise: Anpassen von Elementtiteln in mobilen Formularen vorhanden:

      <mobile:Label Text="Title field in Announcements List" RunAt="Server" />

      Diese Zeile wurde im Beispielcode in diesem Thema durch folgende Zeile ersetzt:

      <Contoso:ItemTitleField RunAt="Server" />

      Dadurch kann von der Renderingvorlage das Feldrendering-Steuerelement aufgerufen werden, das Sie weiter oben in dieser exemplarischen Vorgehensweise erstellt haben.

  6. Wählen Sie im Menü Erstellen die Option Projektmappe bereitstellen aus. Dadurch wird die Assembly automatisch neu erstellt und die ASCX-Datei gespeichert. Die Assembly wird im globalen Assemblycache und die ASCX-Datei in %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATES\ControlTemplates bereitgestellt, und die Webanwendung wird wieder verwendet.

Testen des Renderingsteuerelements

Navigieren Sie mit dem mobilen Gerät oder dem Emulator zu einer Website in der Webanwendung, die eine Announcements-Liste enthält. Navigieren Sie zu der Announcements-Liste. Klicken Sie auf den Link Neues Element. Der Bildschirm sollte etwa wie in Abbildung 1 aussehen:

Abbildung 1. Angabe eines Standardtexts für das "Title"-Feld im Formular "Neu"

Benutzerdefiniertes Formular für neuen Eintrag für mobile Seiten

Erstellen Sie ein neues Element, und weisen Sie ihm als Expires-Wert ein Datum in der Vergangenheit zu. Klicken Sie auf Speichern. Dadurch gelangen Sie wieder zur Listenansicht. Klicken Sie auf das neue Element, um es anzuzeigen. Der Bildschirm sollte etwa wie in Abbildung 2 aussehen. Beachten Sie den Link für die Suche, der am Ende des Titels hinzugefügt wurde.

Abbildung 2. Im Anzeigeformular hinzugefügter Link für die Suche

Benutzerdefiniertes Formular zum Anzeigen eines Eintrags für mobile Seiten

Klicken Sie auf die Verknüpfung zum Bearbeiten. Der Bildschirm sollte etwa wie in Abbildung 3 aussehen. Beachten Sie den Zusatz "OVERDUE", der dem aktuellen Titel hinzugefügt wurde.

Abbildung 3. Bedingtes Rendering von Text im "Title"-Feld des Bearbeitungsformulars

Benutzerdefiniertes Formular zum Ändern eines Eintrags für mobile Seiten

Siehe auch

Aufgaben

Vorgehensweise: Anpassen des Renderns von Feldern auf mobilen Seiten

Konzepte

Layout und Paginierung von mobilen Seiten

System zum Rendern mobiler Seiten