Using Google Maps JavaScript API

To use Google Maps in the solution, we need to reference the Google Maps JavaScript API. First, we need to include the Google JavaScript API in the script header. Then, we need to create a Google Maps object and a Google Maps marker object for each position on the map, as shown in Listing 12-4.

Listing 12-4.  Show a Pin on a Google Map Using Coordinates and Google Maps API (Based on Listing 12-2)

<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
    function showUserPosition(position) {
        lat=position.coords.latitude;
        lon=position.coords.longitude;
        latlon=new google.maps.LatLng(lat, lon)
        mapholder=document.getElementById('mapholder')
        mapholder.style.height='350px';
        mapholder.style.width='500px';

        var myOptions={
            center:latlon,zoom:14,
            mapTypeId:google.maps.MapTypeId.ROADMAP,
            mapTypeControl:false,
            navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
        };
        var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
        var marker=new google.maps.Marker({position:latlon,map:map,title:"Your location!"});
    }

After the page is loaded, the user sees a map like the one in Figure 12-7.

Using Bing Maps AJAX control 7.0 Interactive SDK

To use the Bing Maps service, to add pins to the map, we need to use Bing Maps AJAX control 7.0 Interactive SDK, which requires us to first create a Bing Maps key. Creating a Bing Maps account is quick and easy. Visit www.bingmapsportal.com to set up a Bing Maps key and to learn more about usage limits and options. Once logged in to www.bingmapsportal.com with a Microsoft account, click Create or view keys on the left menu (see Figure 12-8).

We can now create a Bing Maps key for our site, in our example the Specter Group public web site. During the development cycle, we should create a trial key. A trial key is used for evaluation during a 90-day evaluation period and must not exceed 10,000 transactions of any type in any 30-day period. Once the site goes into production, depending on the size of the application, consider a basic key or an enterprise key. For the purpose of demonstration, we create a trial key (see Figure 12-9).

Once the key is created, it is added to the list of keys and applications in the Bing Maps portal. We can then use the Bing Maps service and the Bing Maps AJAX control 7.0 Interactive SDK to create a map and add the user’s locations as pins to the map (see Listing 12-5).

Listing 12-5.  Show a Pushpin on a Bing Map Using Coordinates and Bing Maps Service (Based on Listing 12-3)

<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
<script type="text/javascript"
            src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
</script>
<script>
    var map = null;
    function showUserPosition(position) {
        var lat = position.coords.latitude;
        var long = position.coords.longitude;
        map = new Microsoft.Maps.Map(document.getElementById('myMap'),
            {credentials: 'Your Bing Maps key'});
        map.setView({ zoom: 10, center: new Microsoft.Maps.Location(lat, long) });
        var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), null);
        map.entities.push(pushpin);
        pushpin.setLocation(new Microsoft.Maps.Location(lat, long));
    }
</script>

After the page is loaded, the user sees a map similar to the one in Figure 12-10.

SharePoint Apps Overview

SharePoint 2013 introduces a new app model for creating applications in SharePoint. SharePoint Apps are self-containedpieces of functionalities that extend the capabilities of a SharePoint web site. Much like an app on a mobile device, SharePoint Apps can be discovered by users and administrators from the SharePoint App Store or from their organization’s private App Catalog and can be installed to their SharePoint sites. SharePoint Apps enable users to reuse the same content and functionalities across different sites. A SharePoint App is essentially an application that is registered with SharePoint to run in the scope in which it is installed. We can use SharePoint Apps to package data and functionalities to be reused by different sites while providing the same familiar user experience.

SharePoint Apps can be hosted on separate web servers, they can be hosted in Windows Azure, or they can be hosted within SharePoint. There are three hosting options for SharePoint Apps: SharePoint-hosted, provider-hosted, and autohosted. An app can be both SharePoint-hosted and remotely hosted. Each approach has its benefits.SharePoint-hosted apps only contain SharePoint components that are installed on the local SharePoint farm if on premises or on its own tenancy if on SharePoint online. Both provider-hosted and autohosted apps are meant for applications that include at least one remote component. Provider-hosted apps contain non-SharePoint components that are deployed and hosted on either a separate server on premises or on a cloud account. Autohosted apps are installed to a SharePoint host web with the remote components automatically installed into a Windows Azure web site account.

For the purposes of this chapter, we create a SharePoint-hosted app because all of the components are local SharePoint components. SharePoint-hosted apps are installed on a SharePoint site (referred to as the host web), and their resources are hosted on an isolated subsite of the host SharePoint site (referred to as the app web). This type of app is the best approach when we want to reuse common SharePoint artifacts, such as lists and web parts.

Configuring an Isolated App Domain in SharePoint

In our development environment, we need to start by making sure we have configured an isolated app domain in the SharePoint 2013 dev farm to create and deploy SharePoint-hosted apps. The app domain should be a URL namespace we reserve as a namespace for all Specter Group SharePoint Apps. We can configure an app domain for SharePoint in Central Administration or through PowerShell.

For demonstration purposes, we use PowerShell to configure an app domain for SharePoint. For Specter Group, we need to create an isolated app domain apps.spectergroup.com using SharePoint Management Shell as an administrator using the PowerShell command in Listing 12-8.

Listing 12-8.  PowerShell to Configure App Domain for SharePoint

Set-SPAppDomain "apps.spectergroup.com"

In addition to creating the app domain, we also need to create a tenant name app using the PowerShell command in Listing 12-9.

Listing 12-9.  PowerShell to Set app Tenant Name for SharePoint

Set-SPAppSiteSubscriptionName -Name "app"

Once this domain has been reserved, every time a SharePoint-hosted app is provisioned, the app will get a new URL that looks similar to http://app-898d05664cd685.apps.spectergroup.com.

Creating a New Active Directory Account for App Deployment

For developing and deploying SharePoint Apps, in SharePoint 2013, the system account is no longer supported to deploy or purchase any app from the market. It is now prohibited due to security reasons. We need to create a new Active Directory account for App deployment and log on to the development environment with the new account.

Create a new Active Directory account in the Specter group domain. Ensure that the account is a local admin as well as a farm admin in the SharePoint farm. Before creating and deploying any new apps, log on to the SharePoint development machine with the new account.

Installing Visual Studio 2012 and SharePoint Development Tools

Finally, in our development environment, we also need to install Visual Studio 2012 and SharePoint development tools for Visual Studio 2012. To read more about how to set up a SharePoint development environment, please refer to the section “On-Premises Development Environment” in the Appendix.

Setting Bing Maps Key Using JavaScript Client Object Model

Earlier, we were able to set the Bing Maps key at the farm level using PowerShell. What if we do not have administrative access to the SharePoint servers to run PowerShell? What if we only want to set the Bing Maps key at the web level? We can do so by setting the Bing Maps key programmatically using either the SharePoint .NET client object model or the SharePoint JavaScript client object model. Because we are building a SharePoint-hosted app, we will need to use client-side API, such as the SharePoint JavaScript client object model to set the Bing Maps key.

1. Open the App.js file to add the JavaScript in Listing 12-12 for setting the Bing Maps key.

   Listing 12-12.  Set the Bing Map Key Using the JavaScript Object Model

   function sharePointReady() {
           context = new SP.ClientContext.get_current();
           web = context.get_web();
           var props = web.get_allProperties();
           props.set_item("BING_MAPS_KEY", "ApqzNRu0mn1Li2ngnD2x-
                   ZCwalMB0m1IavSP5tcINeZRQ7feN1uppjEt-GpSPLiN");
           web.update();
           context.executeQueryAsync(onSetmapkeySuccess, onSetmapkeyFail);
   }
   function onSetmapkeySuccess() {
           alert("set map success");
   }
   function onSetmapkeyFail() {
           alert("set map failed");
   }
     

2. Recall that in Listing 12-11, the inline JavaScript code in the Default.aspx page triggers the sharePointReady() function to run after the SharePoint JavaScript’s sp.js loads to ensure the SharePoint clientcontext object is loaded.
3. In App.js, the sharePointReady() function first gets the current SharePoint context, then uses the JavaScript object model to update the SharePoint web Bing Maps key property with a valid Bing Maps key if it doesn’t have one already.
4. ExecuteQueryAsync takes in two parameters in the form of callback functions. Each callback will let us know if the execution completed successfully or failed.

After we rebuild and redeploy the app, we should see the alert success message shown in Figure 12-33 after loading the new app.

Creating a Custom List Instance with a Geolocation Column

Once we have enabled Bing Maps and SharePoint integration using the JavaScript object model, we need to create a custom list instance within the App. Note that this custom list instance is not created for the host web; rather it will be part of the App web. The list instance will be available to users when they are in the App.

1. In Visual Studio, below the app project, right-click the Content folder.
2. Select Add New Item from the shortcut menu.
3. At the Add New Item prompt, select List (see Figure 12-34).

   

   Figure 12-34. Add a custom list to the App from Visual Studio

4. Provide a name for the List: LocationList.
5. Click Add.
6. When prompted to choose list settings, select Default (Blank) from the customizable list drop-down (see Figure 12-35).

   

   Figure 12-35. Create a customizable list

7. Click Finish.
8. After the list instance is created within the App, it will display the Columns view for us to add new columns to the custom list.
9. Click on a new row and select the Location column of type Geolocation from the drop-down list (see Figure 12-36). We see this geolocation column in this development environment because we have previously added a geolocation-type column in this community site via PowerShell.

   

   Figure 12-36. Add a geolocation column to the custom list

10. Expand the Content folder and find the Schemas.xml file for the LocationList.
11. Open Schemas.xml in the XML editor. Note the following column was added to the schema of the custom list. The specific GUIDs will be different in your environment.

    <Field Type="Geolocation" DisplayName="Location" ID="{be075499-998a-4924-a69a-8fe11bcc612d}" SourceID="{b9497bff-6e4c-4f72-89dd-80be589aebd0}" StaticName="Location1" Name="Location1" />

12. For users to interact with the new custom list instance in the App web, we can add a button on the Default.aspx page to allow users to navigate to the custom list (see Listing 12-13).

Listing 12-13.  HTML Code Added to App’s Default.aspx page to Display Link to the Custom List Instance

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
    <div>
        <input type="button" id="button" value="Location List" onclick="location.href = '../Lists/LocationList'"/>
        <br /><br />
        <!-- ... rest of PlaceHolderMain ... -->
    </div>
</asp:Content>

After we deploy the app to the community site, the user can click the Location List button shown in Figure 12-37 to view the list.

Then the user will see the custom list exactly like the out-of-the-box list we created earlier in the host web. The user can add a new item by clicking New item (see Figure 12-38) and then manually entering the latitude and longitude values or using the current location as detected by the browser.

Using the JavaScript Client Object Model to Add a List Item

Now to allow users to enter an address or automatically detect location, we need to allow them to do so on the Default.aspx page without having to go to the actual SharePoint list (LocationList) to add a new item. Before we look at how to add HTML controls to the Default.aspx page to trigger the JavaScript function createListItem(), let’s implement the JavaScript code for adding a new item to the list.

Open the App.js file in the Visual Studio project and add the JavaScript function in Listing 12-14 to the file. This function programmatically adds a new item to the LocationList custom list instance.

Listing 12-14.  Using JavaScript CSOM to Add a List Item

//create an item in a list
function createListItem() {
    var oList = web.get_lists().getByTitle('LocationList'),

    var itemCreateInfo = new SP.ListItemCreationInformation();
    this.oListItem = oList.addItem(itemCreateInfo);
    oListItem.set_item('Title', title);

    alert('Adding new location: (lat: ' + locationLat + ' long: ' + locationLong + ')'),
    oListItem.set_item('Location1', 'POINT (' + locationLong + ' ' + locationLat + ')'),
    oListItem.update();

    context.load(oListItem);
    context.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded),
        Function.createDelegate(this, this.onQueryFailed)
    );
}

function onQuerySucceeded() {
    alert('Item created!'),// + oListItem.get_id());
    window.location.reload();
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() +
        '
' + args.get_stackTrace());
}

1. With the current SharePoint context, we can get the web object of the app web.
2. Get the LocationList by doing a title lookup from the list collection.
3. Create a new ListItemCreationInformation object to add a new item to the list.
4. Once the item has been added, we need to set the list item’s fields one by one.
   • a.  First set the Title column value.
   • b.  Set the Location column value by constructing the value of the geolocation field with the actual latitude and longitude values in the “POINT (long, lat)” format.
5. After the columns are set, we need to update the new list item to save the values.

Using HTML5 Geolocation API to Autodetect Location

Before we enable the App to trigger the JavaScript function we created in the previous section to programmatically add a new list item to the list, we need to add a few controls on the Default.aspx page to get information from the user.

1. Open the Default.aspx page in the Visual Studio project.
2. Add a text field familytext for the Title (Family) column.
3. Add a button autodetectbutton for autodetecting the user’s location by calling the getcurrentaddress() function, which uses the HTML5 API to get the geolocation from the browser (see Listing 12-15).

   Listing 12-15.  Default.aspx HTML to Allow Browser to Autodetect User’s Location

   <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
       <div>
           *Family: <input id="familytext" type="text" style="width:400px"
                           value="Type family name here..." />
           <br /><br />
           <input type="button" id ="autodetectbutton" value="Use current location"
           onclick="getcurrentaddress();"/>
            <br /><br />
           <!-- ... rest of PlaceHolderMain ... -->
       </div>
   </asp:Content>

   In addition to getting information from the users, we also need to show users the actual list after the new items are created. Note that we are adding an XsltListViewWebPart control, which is the common web part for displaying any list in SharePoint.

4. On the Default.aspx page, we need to add the XsltListViewWebPart control shown in Listing 12-16 to the page below the autodetectbutton button.

   Listing 12-16.  Add an XsltListViewWebPart Control to the Default.aspx Page to Show the Geolocation List

   <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="full" Title="loc:full" >
       <WebPartPages:XsltListViewWebPart ID="XsltListViewWebPart2" runat="server"
           ListUrl="Lists/LocationList" IsIncluded="True"
           NoDefaultStyle="TRUE" Title="locationlist"
           PageType="PAGE_NORMALVIEW" Default="True" ViewContentTypeId="0x">
       </WebPartPages:XsltListViewWebPart>
   </WebPartPages:WebPartZone>

At this point, the Default.aspx page should contain the controls shown in Figure 12-39.

Next, we need to add JavaScript functions for autodetecting the user’s location.

1. Open the App.js file and add the JavaScript in Listing 12-17 for detecting geolocation.

   Listing 12-17.  JavaScript Function to Autodetect User’s Location Using HTML5 Geolocation API

   function getcurrentaddress() {
       if (navigator.geolocation) {
           navigator.geolocation.getCurrentPosition(showPosition, showError);
       }
       else {
           alert("Geolocation is not supported by this browser.");
       }
   }
   function showPosition(position) {
       locationLat = position.coords.latitude;
       locationLong = position.coords.longitude;
       alert('Current lat: ' + locationLat + ' long: ' + locationLong);
       createListItem();
   }
   function showError(error) {
       switch (error.code) {
           case error.PERMISSION_DENIED:
               alert("User denied the request for Geolocation.");
               break;
           case error.POSITION_UNAVAILABLE:
               alert("Location information is unavailable.");
               break;
           case error.TIMEOUT:
               alert("The request to get user location timed out.");
               break;
           case error.UNKNOWN_ERROR:
               alert("An unknown error occurred.");
               break;
       }
   }

2. The showPosition callback function resolves the latitude and longitude values and calls the createListItem() function in Listing 12-18 to create a new list item using the latitude and longitude values.

   Listing 12-18.  JavaScript Function to Create a New List Item Using the familytext Value as the Title of the New Item and the Latitude and Longitude Values as the Location

   function createListItem() {
       var family = $('#familytext').val(); //get value for the Title column
       var oList = web.get_lists().getByTitle('LocationList'),
   
       var itemCreateInfo = new SP.ListItemCreationInformation();
       this.oListItem = oList.addItem(itemCreateInfo);
       oListItem.set_item('Title', family);    //set Title column to the familytext field value
   
       alert('Adding new location: (lat: ' + locationLat + ' long: ' + locationLong + ')'),
       //construct value for the geolocation column using the latitude and longitude
       //values we got from showPosition()
       oListItem.set_item('Location1', 'POINT (' + locationLong + ' ' + locationLat + ')'),
       oListItem.update();
   
       context.load(oListItem);
       context.executeQueryAsync(
           Function.createDelegate(this, this.onQuerySucceeded),
           Function.createDelegate(this, this.onQueryFailed)
       );
   }
   function onQuerySucceeded() {
       alert('Item created!'),// + oListItem.get_id());
       window.location.reload(); //reload the page to show new items
   }
   function onQueryFailed(sender, args) {
       alert('Request failed. ' + args.get_message() + '
   ' + args.get_stackTrace());
   }

3. The showError callback function displays error messages to users when autodetection fails.
4. With the geolocation values resolved in the showPosition() function and a valid value for the Title (family) column, we can now map the columns with these values to create a new list item in the createListItem() function (see Listing 12-18).
5. Once the item has been added, we notify the user the item has been created and reload the page to allow the XsltListViewWebPart to show the latest items in the list.

After we redeploy the app, the user can now create a new item. The user enters a value for the Family text field. Then the user clicks the Use current location button. The user is prompted to allow the site to track physical location. If the user clicks Allow, an alert window shows the latitude and longitude values, as shown in Figure 12-40.

The user then gets an alert confirming the item has been created. The page then refreshes to show the web part of the list with the newly created item (see Figure 12-41).

Resolving Geolocation from an Address

Autodetection of the location might not always be what the user is looking to do. Based on our requirements, community users would also like to enter the address of their properties regardless of where they are physically. We can support this by programmatically resolving geolocation information from a physical address entered by the user.

1. Open the Default.aspx page.
2. Under the header of the page, within the PlaceHolderAdditionalPageHead content placeholder, add a reference to the Bing Maps JavaScript as shown in Listing 12-19.

   Listing 12-19.  Add a Reference to the Bing Maps JavaScript API to the Default.aspx Page

   <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
       <!-- Add reference to bing map -->
       <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
       <!-- ... rest of Content Placeholder Content ... -->
   </asp:Content>

3. Below the autodetectbutton, add a text field addresstext for users to enter an address (see Listing 12-20).

   Listing 12-20.  New Controls to Add to the Default.aspx Page for Resolving Location From an Address

   Type Address: <input id="addresstext" type="text" style="width:400px"
                             value="Type address here..." onclick ="clearaddressdefault();" />
   <input type="button" id ="getaddressbutton" value="Get address" onclick="getaddress();"/><br />
   
   <div id='mapDiv' style="position:relative; width:0px; height:0px;"></div>

4. Add a button getaddressbutton for users to trigger the getaddress() function, which uses Bing Maps JavaScript API to resolve latitude and longitude values from an address (see Listing 12-20).
5. Add a div mapDiv to be used by Bing Maps JavaScript. We can hide it in our solution because we do not need the Bing Maps API to show a separate map control (see Listing 12-20).
6. In the App.js file, at the top of the file, add a variable for the Bing Maps map object:

   var map;

7. At the end of the SharePointReady() function, add the code in Listing 12-21 to initiate the map object using the Bing Maps key.

   Listing 12-21.  JavaScript Code to Initiate the Bing Maps Map Object

   map = new Microsoft.Maps.Map(
              document.getElementById("mapDiv"),
              { credentials: "Your Bing Maps key",
              mapTypeId: Microsoft.Maps.MapTypeId.road });

8. Add the getaddress() function in Listing 12-22 to the App.js file to get the address from the addresstext text field.

   Listing 12-22.  JavaScript Functions to Request Bing Maps Service to Resolve Locations From an Address

   function getaddress() {
       var address = $('#addresstext').val();
       ClickGeocode();
   }
   
   function ClickGeocode(credentials) {
       map.getCredentials(MakeGeocodeRequest);
   }
   
   function MakeGeocodeRequest(credentials) {
       var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations?query=" +
           encodeURI(document.getElementById('addresstext').value) +
           "&output=json&jsonp=GeocodeCallback&key=" + credentials;
       CallRestService(geocodeRequest);
   }
   
   function GeocodeCallback(result) {
       alert("Found location: " + result.resourceSets[0].resources[0].name);
   
       if (result &&
           result.resourceSets &&
           result.resourceSets.length > 0 &&
           result.resourceSets[0].resources &&
           result.resourceSets[0].resources.length > 0) {
   
           //get lat and lon
           var lat = result.resourceSets[0].resources[0].point.coordinates[0];
           var long = result.resourceSets[0].resources[0].point.coordinates[1];
           locationLat = lat;
           locationLong = long;
           createListItem();
       }
   }

9. Add the ClickGeocode() and the MakeGeocodeRequest function in Listing 12-22 to the App.js file. These functions make a request to the Bing Maps service to get an address resolved providing the Bing Maps key credential and the address entered by the user. Note, in the request, it also tells the service the name of the callback function: GeocodeCallback.
10. Add the GeocodeCallback function in Listing 12-22 to the App.js file. This function is called when the service returns the geolocation result in JSON. We use the result object to get the name of the returned location and the latitude and longitude coordinates. Then we call the createListItem() function in Listing 12-18 to create a new item based on the new coordinates.

After we redeploy the app, the user can enter an address in the address field and click the Get address button, as shown in Figure 12-42, to have the geolocation coordinates resolved all from the Default.aspx page.

After the user clicks the Get address button, if the location is found, the user sees an alert like the one in Figure 12-43.

After clicking OK, the user sees an alert confirming the item has been added to the list and the page refreshes with the latest item on the list, as shown in Figure 12-44.

Creating an App Part to Display Geolocation App Content in Host Web

As mentioned earlier in this chapter, SharePoint-hosted apps are installed on a SharePoint site (referred to as the host web), and their resources and content are hosted on an isolated subsite of the host SharePoint site (referred to as the app web). So far we have been performing all of our user actions in the app web instead of the host web (community site). Based on our requirements, we need to expose all the functionalities we have created to the host web (community’s home page). We can do so by creating an app part. With app parts, we can display the content in our app right in the host web using an IFrame.

1. Starting from Visual Studio, right-click the Content folder below the app project, and click Add New Item.
2. At the Add New Item prompt, select Office/SharePoint and click Client Web Part (Host Web) (see Figure 12-45).

   

   Figure 12-45. Add a client web part component to the App to surface content from the app web

3. Name the web part SPGeolocationListWebPart.
4. After the new client web part is added to the project, the Element.xml file (see Listing 12-23) for the web part will automatically open for editing. Within this file, we can edit the Title, Description, Default width, and Default height values. Make sure the name property of the web part is the same as the name of the web part file we just added to the project.

   Listing 12-23.  Client Web Part Contains an Element.xml File That Allows Configuration of Title, Description, Width, and Height

   <ClientWebPart Name="SPGeolocationListWebPart"
                             Title="SPGeolocationListWebPart"
                             Description="This is the SPGeolocationListWebPart."
                             DefaultWidth="500"
                             DefaultHeight="600">

5. Within the same Element.xml file, we also need to ensure the following section (see Listing 12-24) is set to the app’s Default.aspx page as the web part will render this page by default.

   Listing 12-24.  Use Element.xml File to Configure Page to Render Within the Client Web Part

   <Content Type="html" Src="∼appWebUrl/Pages/Default.aspx" />

6. For the client web part to surface content from the app, we need to add the AllowFraming tag in the Default.aspx page to allow it to render in an IFrame. Open the Default.aspx page and add the AllowFraming tag in Listing 12-25.

   Listing 12-25.  Add AllowFraming Tag to the Default.aspx Page to Ensure This Page Can Be Displayed in an IFrame

   <WebPartPages:AllowFraming ID="AllowFraming1" runat="server" />

7. After we redeploy the app, edit the community’s home page.
8. Click the Insert tab on the ribbon, and then select App Part.
9. From the list of App Parts, select the new Client web part we just deployed (see Figure 12-46) and add it to the page.

After the web part is added, users can perform all the functions they were doing in the app web in the host community site (see Figure 12-47).