Freigeben über


Verwenden von Karten mit Zellwertdatentypen

Sie können Karte modale Fenster in der Excel-Benutzeroberfläche für verschiedene Zellwertdatentypen angeben. Karten können zusätzliche Informationen anzeigen, die über das hinausgehen, was bereits in einer Zelle sichtbar ist, z. B. verwandte Bilder, Produktkategorieinformationen und Datenzuordnungen.

Hinweis

Dieser Artikel enthält informationen, die im Artikel Zu den wichtigsten Konzepten von Excel-Datentypen beschrieben werden. Es wird empfohlen, diesen Artikel zu lesen, bevor Sie sich mit Karten für Zellwerte vertraut machen.

Karten werden für die folgenden Zellwerttypen unterstützt.

Der folgende Screenshot zeigt ein Beispiel für einen offenen Entitätswert Karte, in diesem Fall für das Produkt Chef Anton es Gumbo Mix aus einer Liste von Lebensmittelgeschäftsprodukten.

Ein Entitätswertdatentyp, in dem das fenster Karte angezeigt wird.

Karteneigenschaften

Verwenden Sie properties , um alle benutzerdefinierten Informationen zu Ihren Datentypen anzugeben. Der properties Schlüssel unterstützt geschachtelte Datentypen. Jede geschachtelte Eigenschaft oder jeder Datentyp muss über eine type - und basicValue -Einstellung verfügen.

Wichtig

Die geschachtelten Datentypen properties werden in Kombination mit den Kartenlayoutwerten verwendet, die im nachfolgenden Artikelabschnitt beschrieben werden. Nach dem Definieren eines geschachtelten Datentyps in propertiesmuss er in der layouts -Eigenschaft zugewiesen werden, um auf dem Karte anzuzeigen.

Der folgende Codeausschnitt zeigt den JSON-Code für einen Entitätswert mit mehreren Datentypen, die in propertiesgeschachtelt sind.

Hinweis

Um mit diesem Codeausschnitt in einem vollständigen Beispiel zu experimentieren, öffnen Sie Script Lab in Excel, und wählen Sie Datentypen: Erstellen von Entitätskarten aus Daten in einer Tabelle in unserer Beispielbibliothek aus.

const entity: Excel.EntityCellValue = {
    type: Excel.CellValueType.entity,
    text: productName,
    properties: {
        "Product ID": {
            type: Excel.CellValueType.string,
            basicValue: productID.toString() || ""
        },
        "Product Name": {
            type: Excel.CellValueType.string,
            basicValue: productName || ""
        },
        "Image": {
            type: Excel.CellValueType.webImage,
            address: product.productImage || ""
        },
        "Quantity Per Unit": {
            type: Excel.CellValueType.string,
            basicValue: product.quantityPerUnit || ""
        },
        "Unit Price": {
            type: Excel.CellValueType.double,
            basicValue: product.unitPrice,
            numberFormat: "$* #,##0.00"
        },
        Discontinued: {
            type: Excel.CellValueType.boolean,
            basicValue: product.discontinued || false
        }
    },
    layouts: {
        // Enter layout settings here.
    }
};

Der folgende Screenshot zeigt einen Entitätswert Karte, der den obigen Codeausschnitt verwendet. Der Screenshot zeigt die Informationen "Produkt-ID", "Produktname", "Bild", "Menge pro Einheit" und " Stückpreis " aus dem vorherigen Codeausschnitt.

Ein Entitätswert-Datentyp, in dem das Karte Layoutfenster angezeigt wird. Die Karte zeigt den Produktnamen, die Produkt-ID, die Menge pro Einheit und Die Preisinformationen pro Einheit an.

Kartenlayout

Zellwerte weisen einen Standarddatentyp Karte auf, den der Benutzer anzeigen kann. Geben Sie ein benutzerdefiniertes Karte Layout an, um die Benutzererfahrung beim Anzeigen von Eigenschaften zu verbessern. Die layouts -Eigenschaft definiert die Struktur und darstellung des Karte. Verwenden Sie layouts , um Attribute wie ein Symbol, Karte Titel, bild für eine Karte und die Anzahl der anzuzeigenden Abschnitte anzugeben.

Wichtig

Die geschachtelten layouts Werte werden in Kombination mit den im vorherigen Artikelabschnitt beschriebenen Datentypen der Karteneigenschaften verwendet. Ein geschachtelter Datentyp muss in properties definiert werden, bevor er in layouts zugewiesen werden kann, um auf dem Karte anzuzeigen.

Die layouts -Eigenschaft enthält zwei direkte Untereigenschaften, compact und card. Die card -Eigenschaft gibt die Darstellung eines Karte an, wenn die Karte geöffnet ist. Die compact -Eigenschaft ist optional und definiert das Symbol für einen Wert. Das Symbol wird im Zellwert angezeigt, wenn es angegeben ist. Sie kann auch im Karte angezeigt werden, wenn auf sie als Untereigenschaft verwiesen wird.

Eine vollständige Liste der EntityCompactLayoutIcons verfügbaren Symbole finden Sie in der Enumeration. Der nächste Codeausschnitt zeigt, wie das shoppingBag Symbol angezeigt wird.

Verwenden Sie innerhalb der card -Eigenschaft das CardLayoutStandardProperties -Objekt, um die Komponenten des Karte wie title, subTitleund sectionszu definieren.

Der Entitätswert JSON im nächsten Codeausschnitt zeigt ein card Layout mit geschachtelten title Objekten und mainImage sowie drei sections innerhalb der Karte. Beachten Sie, dass die title Eigenschaft "Product Name" einen entsprechenden Datentyp im vorherigen Artikel zu Karteneigenschaften aufweist . Die mainImage -Eigenschaft verfügt auch über einen entsprechenden "Image" Datentyp im vorherigen Abschnitt. Die sections -Eigenschaft verwendet ein geschachteltes Array und verwendet das CardLayoutSectionStandardProperties -Objekt, um die Darstellung der einzelnen Abschnitte zu definieren.

In jedem Karte Abschnitt können Sie Elemente wie layout, titleund propertiesangeben. Der layout Schlüssel verwendet das CardLayoutListSection -Objekt und akzeptiert den Wert "List". Der properties Schlüssel akzeptiert ein Array von Zeichenfolgen. Beachten Sie, dass die properties Werte, z "Product ID". B. , die entsprechenden Datentypen im vorherigen Abschnitt zum Karteneigenschaftenartikel aufweisen. Abschnitte können auch reduzierbar sein und mit booleschen Werten als reduziert oder nicht reduziert definiert werden, wenn die Entität Karte in der Excel-Benutzeroberfläche geöffnet wird.

Tipp

Der layout Schlüssel verfügt auch über zusätzliche Anzeigeoptionen, die über Karte Abschnitte hinaus "List" verfügbar sind. Verwenden Sie "Table" für Excel.CardLayoutTableSection und "TwoColumn" für Excel.CardLayoutTwoColumnSection. Beachten Sie, dass das "TwoColumn" Layout nur in der Vorschau verfügbar ist.

Hinweis

Um mit diesem Codeausschnitt in einem vollständigen Beispiel zu experimentieren, öffnen Sie Script Lab in Excel, und wählen Sie Datentypen: Erstellen von Entitätskarten aus Daten in einer Tabelle in unserer Beispielbibliothek aus.

const entity: Excel.EntityCellValue = {
    type: Excel.CellValueType.entity,
    text: productName,
    properties: {
        // Enter property settings here.
    },
    layouts: {
        compact: {
            icon: Excel.EntityCompactLayoutIcons.shoppingBag
        },
        card: {
            title: { 
                property: "Product Name" 
            },
            mainImage: { 
                property: "Image" 
            },
            sections: [
                {
                    layout: "List",
                    properties: ["Product ID"]
                },
                {
                    layout: "List",
                    title: "Quantity and price",
                    collapsible: true,
                    collapsed: false, // This section will not be collapsed when the card is opened.
                    properties: ["Quantity Per Unit", "Unit Price"]
                },
                {
                    layout: "List",
                    title: "Additional information",
                    collapsible: true,
                    collapsed: true, // This section will be collapsed when the card is opened.
                    properties: ["Discontinued"]
                }
            ]
        }
    }
};

Der folgende Screenshot zeigt einen Entitätswert Karte, der die obigen Codeausschnitte verwendet. Im Screenshot wird das shoppingBag Symbol neben den Produktnamen in der Kalkulationstabelle angezeigt. In der Entität Karte wird das mainImage Objekt oben angezeigt, gefolgt von dem title Objekt, das den Produktnamen verwendet und auf Gumbo Mix von Chef Anton festgelegt ist. Der Screenshot zeigt sectionsauch . Der Abschnitt Menge und Preis ist reduzierbar und enthält Quantity Per Unit und Unit Price. Das Feld Zusätzliche Informationen ist reduzierbar und wird reduziert, wenn die Karte geöffnet wird.

Ein Entitätswert-Datentyp, in dem das Karte Layoutfenster angezeigt wird. Die Karte zeigt den Karte Titel und die Abschnitte an.

Hinweis

Im vorherigen Screenshot wird das branch Symbol neben Gewürzen im Abschnitt Kategorie angezeigt. Im Beispiel Datentypen: Erstellen von Entitätskarten aus Daten in einer Tabelle erfahren Sie, wie Sie geschachtelte Symbole wie das Abschnittssymbol Kategorie festlegen.

Es gibt ein bekanntes Problem mit geschachtelten Symbolen in Excel für Mac. In dieser Umgebung werden geschachtelte Symbole immer als generic Symbol angezeigt, unabhängig davon, welches Symbol mit der EntityCompactLayoutIcons Enumeration ausgewählt ist.

Eigenschaftenmetadaten

Entitätseigenschaften verfügen über ein optionales propertyMetadata Feld, das das CellValuePropertyMetadata -Objekt verwendet und die Eigenschaften attribution, excludeFromund sublabelbietet. Der folgende Codeausschnitt zeigt, wie sie der "Unit Price" -Eigenschaft aus dem vorherigen Codeausschnitt hinzufügensublabel. In diesem Fall identifiziert die Untergeordnete Bezeichnung den Währungstyp.

Hinweis

Das propertyMetadata Feld ist nur für Datentypen verfügbar, die in Entitätseigenschaften geschachtelt sind.

// This code snippet is an excerpt from the `properties` field of the 
// preceding `EntityCellValue` snippet. "Unit Price" is a property of 
// an entity value.
    "Unit Price": {
        type: Excel.CellValueType.double,
        basicValue: product.unitPrice,
        numberFormat: "$* #,##0.00",
        propertyMetadata: {
          sublabel: "USD"
        }
    },

Zuschreibung

Fügen Sie die Zuordnung für Informationen hinzu, die von Drittanbietern stammen, um die Quelle und alle Lizenzinformationen anzugeben. Verwenden Sie Excel.CellValueAttributionAttributes , um die Zuordnung zu einem Zellwert hinzuzufügen. Das folgende Codebeispiel zeigt, wie Sie eine Zuordnung für die Verwendung von Informationen über den Planeten Mars aus Wikipedia hinzufügen.

async function createPlanet() {
    await Excel.run(async (context) => {
        const sheet = context.workbook.worksheets.getActiveWorksheet();
        const range = sheet.getRange("A1");
        const attributionObject: Excel.CellValueAttributionAttributes = {
            licenseAddress: "https://en.wikipedia.org/wiki/Wikipedia:Wikipedia_is_free_content",
            licenseText: "Free usage information",
            sourceAddress: "https://en.wikipedia.org/wiki/Mars",
            sourceText: "Wikipedia"
        };

        range.valuesAsJson = [
            [
                {
                    type: Excel.CellValueType.double,
                    basicType: Excel.RangeValueType.double,
                    basicValue: 6779, // kilometers (radius)
                    properties: {
                        Name: {
                            type: Excel.CellValueType.string,
                            basicType: Excel.RangeValueType.string,
                            basicValue: "Mars",
                            propertyMetadata: {
                                sublabel: "Planetary Body",
                                attribution: [attributionObject]
                            }
                        }
                    }
                }
            ]
        ];
        await context.sync();
    });
}

Die folgende Abbildung zeigt, wie die Zuordnung im Datentyp angezeigt wird, der für den Benutzer Karte.

Datentyp Karte mit Zuordnung für Wikipedia.

Anbieterinformationen

Sie können Informationen zu Ihrem Add-In oder Dienst hinzufügen, die die Quelle für die Informationen im Datentyp Karte. Verwenden Sie Excel.CellValueProviderAttributes , um Ihre Anbieterinformationen hinzuzufügen. Im folgenden Codebeispiel wird gezeigt, wie Anbieterinformationen für die generische Contoso-Suche als Quelle der Suchdaten für den Zellwert hinzugefügt werden.

async function createSearchEntry() {
    await Excel.run(async (context) => {
        const sheet = context.workbook.worksheets.getActiveWorksheet();
        const range = sheet.getRange("A1");

        range.valuesAsJson = [
            [
                {
                    type: Excel.CellValueType.string,
                    basicType: Excel.RangeValueType.string,
                    basicValue: "cell function - Microsoft support",
                    properties: {
                        "Search Keywords": {
                            type: Excel.CellValueType.string,
                            basicType: Excel.RangeValueType.string,
                            basicValue: "Cell Values"
                        }
                    },
                    provider: {
                        description: "Contoso generic search",
                        // Image credit: Ignacio javier igjav, Public domain, via Wikimedia Commons
                        logoSourceAddress: "https://upload.wikimedia.org/wikipedia/commons/f/f9/Lupa.png",
                        logoTargetAddress: "https://contoso.com"
                    }
                }
            ]
        ];

        await context.sync();
    });
}

Die folgende Abbildung zeigt, wie die Anbieterinformationen als Logo im Datentyp Karte für den Benutzer angezeigt werden.

Datentyp Karte mit dem Suchlogo für die generische Contoso-Suche.

Nächste Schritte

Testen Sie das Beispiel zum Erstellen und Untersuchen von Datentypen in Excel in unserem OfficeDev/Office-Add-in-samples-Repository . Dieses Beispiel führt Sie durch das Erstellen und anschließendes Querladen eines Add-Ins, das Datentypen in einer Arbeitsmappe erstellt und bearbeitet.

Weitere Informationen