Upcoming Event Listing SharePoint Add-In: Instructions2018-07-19T18:32:31-04:00

 

Upcoming Event Listing SharePoint Add-In: Instructions

This Add-in for SharePoint Online allows a user to add a new Add-in Part which will list upcoming events from a configurable SharePoint calendar. Organizations typically use this to list Company Events on their internal Intranet pages. The Add-in Part can be added to any page on a SharePoint site.

Upcoming Events Listing

Edit the Page

Requirements

To add this Add-In Part on any SharePoint page you must have edit permissions for that site. For all purposes the Add-In Part and the Web Part of the “Simple Contact Form” are the same thing and will give the same effect on any page.

Step 1. Navigate into Edit Mode.

To get started navigate to the page you wish to add the Add-In part. Then click on the page tab on SharePoint ribbon in the top left hand side of your web browser as shown here:

p1

Once you have clicked on the page tab, Click on the edit button inside the ribbon shown.

p2

 

Insert the Add-In Part

p2

 

p3

 

Step 2. Insert the Add-In Part.

Once you have clicked on the page tab, Click on the edit button inside the ribbon shown.

 

Then click on insert tab to insert the Add-In Part as shown.

You should now see the Add-In Part and Web Part buttons. Click on either the Add-In Part or Web Part button. After doing so make sure that the “Upcoming Events Listing” is highlighted, then click where you would like to place the Add-In Part on your web page. You should see a text entry icon appear where you wish to insert your Add-In Part. If you do not see the text entry icon appear you may be clicking inside of another web part. After you have chosen the place for your Add-In Part click on the save button. See below for an example all of these steps if you have chosen the Add-InPart button.

Note: If you clicked on the Web Part button you may need to click on the “Add-In” inside the categories Selection box. Then you should be able to find the “Upcoming Events Listing” Web Part to the right of the categories listings

Upcoming Events Listing Add Steps

Save Your Changes!

After you see the Add-In Part inserted on your page be sure to click on the save button to save the changes you have made to your page

p5

Resizing Your Add-In Part

To resize your Upcoming Events Listing, click on the page tab and then edit button on the SharePoint Ribbon as shown above in Step 1. of the instructions here. Once you are in the edit mode for your page move your mouse over the title of the “Upcoming Events Listing” then click on the very small down arrow on the right hand side of the Add-In Part to bring up a drop down menu as shown.

Upcoming Events Listing Step1

 

Then click on the menu item “Edit Web Part” to bring up the Web Part Properties as shown. Once you have the click the “Edit Web Part Menu you should see a menu as shown in pop up on the right hand side of your web browser

Upcoming Events Listing Step2

Setting the Width & Height

Under the “Height” Section and “Width” Section you should see a Question that states “Should the web part have a fixed height?” or “Should the web part have a fixed width respectively. Click on the “Yes” radio button to change either the height or width of the Add-In Part, then enter in the value you wish to set it to. You may also change the unit of measurements if you wish to do so by clicking on the selection box as shown. Once you are happy with your choices be sure to click on “Apply” then “OK” buttons on the bottom of the menu to save your changes.

Save your changes.

Once you are done be sure to click on the save button in the SharePoint ribbon on the top left hand side of your web browser as shown below.

save1

Upcoming Events Listing Settings

 

Set the Add-In Settings

Upcoming Events Calendar Settings

Select Add-In Settings

1) First you must select the App Properties Settings tab.

2) Enter the Upcoming Events Calendar Name. This should be the name of the Calendar in SharePoint you wish to show upcoming events for. The list must be in the same site as where the add-in is installed.