Step 4 - gunjandatta/sp-dashboard-vue GitHub Wiki

Previous Step

SharePoint Assets

Content Editor Reference File (./assets/index.html)

We will be using the SharePoint Content Editor webpart to display the solution. Below is the index.html file that will be referenced.

<!-- The element to render the solution to -->
<div id="sp-dashboard-vue" class="bs"></div>

<!-- Reference the solution script -->
<script src="./sp-dashboard-vue.js"></script>

The id and src properties must match the project name property defined in package.json.

Global Strings (./src/strings.ts)

Any static values will be stored here. This will allow for simpler reuse of the solution.

/**
 * Global Constants
 */
export default {
    AppElementId: "sp-dashboard-vue",
    GlobalVariable: "SPDashboard",
    Lists: {
        Main: "Dashboard"
    },
    ProjectName: "SP Dashboard",
    ProjectDescription: "Created using the gd-sprest-bs-vue library.",
    SolutionUrl: "/sites/dev/siteassets/sp-dashboard-vue/index.html"
}

SharePoint Configuration (./src/cfg.ts)

The Configuration component will be used to install and uninstall the SharePoint assets from the site. A custom method addToPage will be used to apply the content editor webpart to a specified page.

import { Helper, SPTypes } from "gd-sprest-bs";
import Strings from "./strings";

/**
 * SharePoint Assets
 */
export const Configuration = Helper.SPConfig({
    ListCfg: [
        {
            ListInformation: {
                Title: Strings.Lists.Main,
                BaseTemplate: SPTypes.ListTemplateType.GenericList
            },
            CustomFields: [
                {
                    name: "ItemType",
                    title: "Item Type",
                    type: Helper.SPCfgFieldType.Choice,
                    defaultValue: "Type 3",
                    required: true,
                    choices: [
                        "Type 1", "Type 2", "Type 3", "Type 4", "Type 5"
                    ]
                } as Helper.IFieldInfoChoice,
                {
                    name: "Status",
                    title: "Status",
                    type: Helper.SPCfgFieldType.Choice,
                    defaultValue: "Draft",
                    required: true,
                    showInNewForm: false,
                    choices: [
                        "Draft", "Submitted", "Rejected", "Pending Approval",
                        "Approved", "Archived"
                    ]
                } as Helper.IFieldInfoChoice
            ],
            ViewInformation: [
                {
                    ViewName: "All Items",
                    ViewFields: [
                        "LinkTitle", "ItemType", "Status"
                    ]
                }
            ]
        }
    ]
});

// Adds the solution to a classic page
Configuration["addToPage"] = (pageUrl: string) => {
    // Add a content editor webpart to the page
    Helper.addContentEditorWebPart(pageUrl, {
        contentLink: Strings.SolutionUrl,
        description: Strings.ProjectDescription,
        frameType: "None",
        title: Strings.ProjectName
    }).then(
        // Success
        () => {
            // Load
            console.log("[" + Strings.ProjectName + "] Successfully added the solution to the page.", pageUrl);
        },

        // Error
        ex => {
            // Load
            console.log("[" + Strings.ProjectName + "] Error adding the solution to the page.", ex);
        }
    );
}

Next Step

⚠️ **GitHub.com Fallback** ⚠️