Deploy the Smarter Advent Calendar to the SharePoint Store

Historical article: the setup and features below describe the version available at publication. See the current Smarter Engagement Calendar (formerly Smarter Advent Calendar) and current installation guide for today’s product.

With gingerbread already back on supermarket shelves, we figured it’s time to give our Smarter Advent Calendar some attention. 🙂 In this post, we share the enhancements we built so we can list it in the SharePoint Store.

Automatic provisioning of SharePoint lists

After installing the Advent Calendar web part from the SharePoint Store, all required SharePoint lists are created automatically as hidden lists the first time the web part loads. We also add all necessary fields to these lists and include them in the default view. This removes any manual setup for administrators.

// Ensure the list
const adventcalenderContentsListResult = await sp.web.lists.ensure(
  this.adventcalendarContentsList,
  undefined,
  undefined,
  undefined,
  { Hidden: true }
);

// Add fields e.g. "Text"
try {
  await list.fields.getByInternalNameOrTitle("Text").get();
} catch {
  await list.fields.addMultilineText("Text", undefined, true, false, false, true, {
    Description: strings.ContentTextFieldDescription
  });
}

// Add fields to default view
let defaultView = list.defaultView;
let viewFields: any = await defaultView.fields.get();
for (const fieldTitle of fieldTitles) {
  if (!viewFields.Items || viewFields.Items.indexOf(fieldTitle) < 0) {
    await defaultView.fields.add(fieldTitle);
  }
}

In addition, the AdventcalendarContent list receives all 24 items (one for each door) so that admins only need to fill in the content.

// Add all 24 adventcalendar door items
for (let i = 1; i < 25; i++) {
  try {
    await list.items.getById(i).get();
  } catch (error) {
    await list.items.add({ Title: i.toString() });
  }
}

Edit mode

We added a brand-new edit mode for administrators, toggleable from the toolbar. When enabled, admins can click any door to open an edit panel and enter the content for that day—then save it directly.

Use a custom background image

Admins can now configure a custom background image from the settings in the toolbar. Clicking the settings button opens a panel where a background image can be uploaded. Once saved, it’s applied automatically to the Advent Calendar.

Interested in more details about our Smarter Advent Calendar? Feel free to get in touch.