In diesem Beitrag wird vorgestellt, wie man eine SharePoint-Hosted App mit Custom Properties erstellt.

Voraussetzungen

Sharepoint 2013 Entwicklungssystem
Visual Studio 2012 mit Entwicklertools 2012

-> Hier wird beschrieben wie man diese Voraussetzungen erfüllt.

imageZunächst habe ich ein neues Projekt in Visual Studio 2012 angelegt.

imageIn dem sich öffnenden Dialog habe ich folgende Einstellungen vorgenommen:

imageBei der Site muss man bedenken, dass es sich um eine Developer Site handeln muss. Wählen Sie dazu folgendes Template beim Erstellen der Site Collection:

imageUm nun für Custom Propeties (und auch die Kachel zur App) zu sorgen, fügen wir dem Projekt ein Client Web Part hinzu. In dem Dialog sind keine Änderungen nötig.

imageUnter dem erstellten Item finden wir im Solution Explorer eine Elements.xml. In dieser werden die Properties so definiert, wie Sie auch später in den AppPart Einstellungen zu finden sind.

Öffnet man die .xml zeigt sich folgender Inhalt :

  1. <?xmlversion=„1.0“encoding=„utf-8“?>
  2. <Elementsxmlns=„http://schemas.microsoft.com/sharepoint/“>
  3. <ClientWebPartName=„CustomPropertiesPOC“Title=„CustomPropertiesPOC Title“Description=„CustomPropertiesPOC Description“DefaultWidth=„300“DefaultHeight=„200“>
  4. <!– Content element identifies the location of the page that will render inside the client web part
  5. Properties are referenced on the query string using the pattern _propertyName_
  6. Example: Src=„~appWebUrl/Pages/ClientWebPart1.aspx?Property1=_property1_“>
  7. <ContentType=„html“Src=„~appWebUrl/Pages/CustomPropertiesPOC.aspx?{StandardTokens}“/>
  8. <!– Define properties in the Properties element.
  9. Remember to put Property Name on the Src attribute of the Content element above. —>
  10. <Properties>
  11. </Properties>
  12. </ClientWebPart>
  13. </Elements>

Interessant für die Custom Properties ist das Tag – man kann es sich fast denken – <Properties>.

Mögliche Datentypen sind String, Integer, Boolean und Enumeration. Neue Eigenschaften werden folgendermaßen hinzugefügt:

  1.     <Properties> 
  2.       <Property 
  3.           Name=„CustomString“ 
  4.           Type=„string“ 
  5.           RequiresDesignerPermission=„true“ 
  6.           DefaultValue=„default“ 
  7.           WebCategory=„MyCustom Category“ 
  8.           WebDisplayName=„A property of type string.“> 
  9.       </Property> 
  10.       <Property 
  11.           Name=„CustomInt“ 
  12.           Type=„int“ 
  13.           RequiresDesignerPermission=„true“ 
  14.           DefaultValue=„10“ 
  15.           WebCategory=„MyCustom Category“ 
  16.           WebDisplayName=„A property of type integer.“> 
  17.       </Property> 
  18.       <Property 
  19.           Name=„CustomBool“ 
  20.           Type=„boolean“ 
  21.           RequiresDesignerPermission=„true“ 
  22.           DefaultValue=„true“ 
  23.           WebCategory=MyCustom Category“ 
  24.           WebDisplayName=„A property of type boolean.“> 
  25.       </Property> 
  26.       <Property 
  27.           Name=„CustomEnum“ 
  28.           Type=„enum“ 
  29.           RequiresDesignerPermission=„true“ 
  30.           DefaultValue=„2nd“ 
  31.           WebCategory=MyCustom Category“
  32.           WebDisplayName=„A property of type enum.“> 
  33.         <EnumItems> 
  34.           <EnumItem WebDisplayName=„First“ Value=„1st“/> 
  35.           <EnumItem WebDisplayName=„Second“ Value=„2nd“/> 
  36.           <EnumItem WebDisplayName=„Third“ Value=„3rd“/> 
  37.         </EnumItems> 
  38.       </Property> 
  39.     </Properties>   

imageNachdem diese Änderungen umgesetzt, das AppPart ausgerollt und auf einer Seite platziert ist, müssten die erstellten Eigenschaften bereits in den AppPart Einstellungen vorhanden sein.

So weit, so gut. Doch wie benutzen wir die von uns erstellten Eigenschaften im Code unseres AppParts ?
Dazu muss man wissen, dass die Eigenschaften über den QueryString an die AppPart Seiten übertragen werden. Momentan werden allerdings nur die Standardwerte übertragen. Um das zu ändern,  wenden wir uns wieder der Elements.xml zu.  Der QueryString wird dort im Tag <Content /> definiert. Diesen passt man wie folgt an:

  1. <ContentType=„html“Src=„~appWebUrl/Pages/CustomPropertiesPOC.aspx?{StandardTokens}&amp;CustomString=_CustomString_&amp;CustomInt=_CustomInt_&amp;CustomBool=_CustomBool_&amp;CustomEnum=_CustomEnum_“/>

imageDanach werden die Eigenschaften im QueryString der Kachel übertragen. Allerdings nicht im QueryString der Hauptseite der App. Um dies zu ändern, muss man den QueryString in der AppManifest.xml anpassen.

Was nun noch fehlt ist eine kleine Demonstration der Benutzung. Dazu kann man bspw. folgendes HTML/JavaScript Snippet in den Body bzw. den PlaceHolderMain  der CustomPropertiesPOC.aspx und der Default.aspx einfügen:

  1. <script type=„text/javascript“>
  2. $(document).ready(function () {
  3. parseProperties(getPropertyArray());
  4. });
  5. function getPropertyArray() {
  6. var params = document.URL.split(„?“)[1].split(„&“);
  7. var propertyArray = new Array();
  8. // Extracts the property values from the query string into Array.
  9. for (var i = 0; i < params.length; i = i + 1) {
  10. var param = params[i].split(„=“);
  11. propertyArray[param[0]] = param[1];
  12. }
  13. return propertyArray;
  14. }
  15. function parseProperties(propertyArray) {
  16. var destinationElem = $(„#CustomPropertyShowCase“);
  17. destinationElem.append(‚<p> CustomString : ‚ + propertyArray[„CustomString“] + ‚</p>‘);
  18. destinationElem.append(‚<p> CustomInt : ‚ + propertyArray[„CustomInt“] + ‚</p>‘);
  19. destinationElem.append(‚<p> CustomBool : ‚ + propertyArray[„CustomBool“] + ‚</p>‘);
  20. destinationElem.append(‚<p> CustomEnum : ‚ + propertyArray[„CustomEnum“] + ‚</p>‘);
  21. }
  22. </script>
  23. <div id=„CustomPropertyShowCase“></div>

Am Ziel angekommen, sollte das Ergebnis der Arbeit folgendermaßen aussehen Smiley

imageimage

1 Comments

  1. Pingback: SharePoint 2013 – Hinzufügen von Custom Properties zu AppParts - SharePoint Blogs in German - Bamboo Nation

Leave a comment

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Time limit is exhausted. Please reload the CAPTCHA.