Aktualisiere Version auf 1.2.0, füge Unterstützung für einen konfigurierbaren WebPart-Titel hinzu und verbessere die Darstellung im Accordion-WebPart

README.md

@@ -1,6 +1,6 @@
 # Accordion
 
-Accordion 1.1.2 ist ein listenbasiertes SPFx-WebPart für SharePoint Server Subscription Edition. Es orientiert
+Accordion 1.2.0 ist ein listenbasiertes SPFx-WebPart für SharePoint Server Subscription Edition. Es orientiert
 sich funktional am PnP-Beispiel `react-accordion-dynamic-section`, verwendet aber die mit SharePoint SE
 kompatible SPFx-1.4.1-/React-15-Toolchain.
 
@@ -8,6 +8,7 @@ kompatible SPFx-1.4.1-/React-15-Toolchain.
 
 - Auswahl einer nicht ausgeblendeten Liste aus dem aktuellen Web
 - dynamische Auswahl von Überschrift-, Inhalt-, Kategorie- und Sortierspalte
+- konfigurierbarer WebPart-Titel
 - optionales Gruppieren nach Kategorien
 - Filter auf eine konkrete, aktuell in der Liste verwendete Kategorie
 - ein- und mehrwertige Managed-Metadata-Spalten als Kategorien
@@ -40,7 +41,7 @@ nächsten Laden beziehungsweise Rendern der Seite automatisch.
 
 | Eigenschaft | Wert |
 |---|---|
-| Version | 1.1.2 |
+| Version | 1.2.0 |
 | SharePoint Framework | 1.4.1 |
 | React | 15.6.2 |
 | Node.js | 8.17.0 |

config/package-solution.json

@@ -4,7 +4,7 @@
     "name": "accordion-web-part",
     "title": "accordion-web-part",
     "id": "27a6fd90-42a1-4e39-8862-08ed0e7803bc",
-    "version": "1.1.2.0",
+    "version": "1.2.0.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "accordion-web-part",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "private": true,
   "main": "lib/index.js",
   "engines": {

src/webparts/accordion/AccordionWebPart.manifest.json

@@ -16,6 +16,7 @@
     },
     "officeFabricIconFontName": "BulletedList2",
     "properties": {
+      "title": "Accordion",
       "listId": "",
       "titleField": "Title",
       "contentField": "",

src/webparts/accordion/AccordionWebPart.ts

@@ -6,6 +6,7 @@ import {
   IPropertyPaneConfiguration,
   IPropertyPaneDropdownOption,
   PropertyPaneDropdown,
+  PropertyPaneTextField,
   PropertyPaneToggle
 } from '@microsoft/sp-webpart-base';
 import * as strings from 'AccordionWebPartStrings';
@@ -21,6 +22,7 @@ import {
 import styles from './components/Accordion.module.scss';
 
 export interface IAccordionWebPartProps {
+  title: string;
   listId: string;
   titleField: string;
   contentField: string;
@@ -73,6 +75,7 @@ export default class AccordionWebPart extends BaseClientSideWebPart<IAccordionWe
       if (!items.length) { this.renderStatus(strings.EmptyMessage, false); return; }
       const element: React.ReactElement<IAccordionProps> = React.createElement(Accordion, {
         items: items,
+        title: this.properties.title || strings.DefaultTitle,
         allowMultiple: this.properties.allowMultiple === true,
         initialState: this.normalizeInitialState(this.properties.initialState),
         showCategories: this.properties.showCategories !== false && !!this.properties.categoryField,
@@ -151,6 +154,7 @@ export default class AccordionWebPart extends BaseClientSideWebPart<IAccordionWe
         groups: [{
           groupName: strings.DataGroupName,
           groupFields: [
+            PropertyPaneTextField('title', { label: strings.WebPartTitleFieldLabel }),
             PropertyPaneDropdown('listId', {
               label: strings.ListFieldLabel,
               options: listOptions,

src/webparts/accordion/components/Accordion.module.scss

@@ -5,6 +5,7 @@
   font-size: 14px;
   color: "[theme: neutralPrimary, default: #323130]";
 }
+.webPartHeading { font-size: 24px; font-weight: 300; line-height: 32px; margin: 0 0 14px; }
 
 .category { margin: 0 0 20px; }
 .categoryTitle {

src/webparts/accordion/components/Accordion.tsx

@@ -22,7 +22,8 @@ export default class Accordion extends React.Component<IAccordionProps, IAccordi
 
   public render(): React.ReactElement<any> { // tslint:disable-line:no-any
     const groups: Array<{ name: string; items: IAccordionItem[] }> = this.groupItems();
-    return <div className={styles.accordion}>
+    return <section className={styles.accordion} aria-label={this.props.title}>
+      {this.props.title && <h2 className={styles.webPartHeading}>{this.props.title}</h2>}
       {groups.map((group, groupIndex) =>
         <section className={styles.category} key={'group-' + groupIndex}>
           {this.props.showCategories && group.name
@@ -31,7 +32,7 @@ export default class Accordion extends React.Component<IAccordionProps, IAccordi
           <div>{group.items.map((item: IAccordionItem) => this.renderItem(item, groupIndex))}</div>
         </section>
       )}
-    </div>;
+    </section>;
   }
 
   private renderItem(item: IAccordionItem, groupIndex: number): React.ReactElement<any> { // tslint:disable-line:no-any

src/webparts/accordion/components/IAccordionProps.ts

@@ -2,6 +2,7 @@ import { IAccordionItem, AccordionInitialState } from '../AccordionTypes';
 
 export interface IAccordionProps {
   items: IAccordionItem[];
+  title: string;
   allowMultiple: boolean;
   initialState: AccordionInitialState;
   showCategories: boolean;
@@ -9,4 +10,3 @@ export interface IAccordionProps {
   collapseLabel: string;
   defaultCategory: string;
 }
-

src/webparts/accordion/loc/de-de.js

@@ -3,6 +3,7 @@ define([], function() {
     "PropertyPaneDescription": "Wählen Sie die Liste und Spalten für das Akkordeon aus.",
     "DataGroupName": "Datenquelle",
     "BehaviorGroupName": "Verhalten",
+    "WebPartTitleFieldLabel": "WebPart-Titel",
     "ListFieldLabel": "Liste",
     "TitleFieldLabel": "Spalte für Überschrift",
     "ContentFieldLabel": "Spalte für Inhalt",
@@ -25,6 +26,7 @@ define([], function() {
     "LoadErrorMessage": "Die Akkordeon-Einträge konnten nicht geladen werden.",
     "ExpandLabel": "Aufklappen",
     "CollapseLabel": "Zuklappen",
-    "DefaultCategory": "Weitere"
+    "DefaultCategory": "Weitere",
+    "DefaultTitle": "Akkordeon"
   };
 });

src/webparts/accordion/loc/en-us.js

@@ -3,6 +3,7 @@ define([], function() {
     "PropertyPaneDescription": "Select the list and columns used by the accordion.",
     "DataGroupName": "Data source",
     "BehaviorGroupName": "Behavior",
+    "WebPartTitleFieldLabel": "Web part title",
     "ListFieldLabel": "List",
     "TitleFieldLabel": "Heading column",
     "ContentFieldLabel": "Content column",
@@ -25,6 +26,7 @@ define([], function() {
     "LoadErrorMessage": "The accordion entries could not be loaded.",
     "ExpandLabel": "Expand",
     "CollapseLabel": "Collapse",
-    "DefaultCategory": "Other"
+    "DefaultCategory": "Other",
+    "DefaultTitle": "Accordion"
   };
 });

src/webparts/accordion/loc/myStrings.d.ts

@@ -2,6 +2,7 @@ declare interface IAccordionWebPartStrings {
   PropertyPaneDescription: string;
   DataGroupName: string;
   BehaviorGroupName: string;
+  WebPartTitleFieldLabel: string;
   ListFieldLabel: string;
   TitleFieldLabel: string;
   ContentFieldLabel: string;
@@ -25,6 +26,7 @@ declare interface IAccordionWebPartStrings {
   ExpandLabel: string;
   CollapseLabel: string;
   DefaultCategory: string;
+  DefaultTitle: string;
 }
 
 declare module 'AccordionWebPartStrings' {

tests/validate-project.js

@@ -18,8 +18,8 @@ var component = read('src/webparts/accordion/components/Accordion.tsx');
 var sanitizer = read('src/webparts/accordion/AccordionHtmlSanitizer.ts');
 var styles = read('src/webparts/accordion/components/Accordion.module.scss');
 
-assert(packageJson.version === '1.1.2', 'Package version must be 1.1.2.');
+assert(packageJson.version === '1.2.0', 'Package version must be 1.2.0.');
-assert(solution.version === '1.1.2.0', 'Solution version must be 1.1.2.0.');
+assert(solution.version === '1.2.0.0', 'Solution version must be 1.2.0.0.');
 assert(solution.includeClientSideAssets === true, 'Client-side assets must be included.');
 assert(solution.skipFeatureDeployment === true, 'Solution must support central deployment.');
 assert(packageJson.name === 'accordion-web-part' && solution.name === 'accordion-web-part' &&
@@ -29,6 +29,9 @@ assert(json('config/package-solution.json').paths.zippedPackage === 'solution/ac
 assert(manifest.componentType === 'WebPart', 'Component must be a web part.');
 assert(!!config.bundles['accordion-web-part'], 'Accordion bundle is missing.');
 assert(webPart.indexOf("PropertyPaneDropdown('listId'") >= 0, 'Dynamic list selection is missing.');
+assert(webPart.indexOf("PropertyPaneTextField('title'") >= 0 &&
+  component.indexOf('styles.webPartHeading') >= 0,
+  'Configurable web part title is missing.');
 assert(webPart.indexOf("PropertyPaneDropdown('contentField'") >= 0, 'Dynamic content field selection is missing.');
 assert(webPart.indexOf("PropertyPaneDropdown('categoryField'") >= 0, 'Category field selection is missing.');
 assert(webPart.indexOf("PropertyPaneDropdown('selectedCategory'") >= 0, 'Category value filter is missing.');