This sample has been moved to SharePoint-Add-in-Localization.


Summary:  This sample simulates a bookstore by using a SharePoint 2013 document library in which every document is a book. End users can request and buy new books by using the provided custom actions. The components of the app are localized for English and Spanish.

This sample includes a remote app that has webpages to handle the book request and book buying experiences in a simulated bookstore. Custom actions provide the link between the document library and the app pages. The cross-domain library provides data access from the remote app to the document library. The chrome control and SharePoint style sheet provide the classes to consistently style the app pages. A custom list provides storage for the orders placed by the end user. End users can use the provided app part to display the orders history.

The app can be installed in a SharePoint website provisioned in English (en-US) or Spanish (es-ES). The following app components are localized:

  • App title

  • Custom lists

  • SharePoint page

  • Custom actions

  • App part

  • Web application pages

  • Chrome control

Figure 1 shows the bookstore custom actions in English and Spanish.

Figure 1. Bookstore custom actions in English and Spanish

Prerequisites

This sample requires the following:

  • Microsoft Visual Studio 2013

  • Office Developer Tools for Visual Studio 2013 March, 2014, version or later.

  • A SharePoint 2013 development environment configured for apps

Key components of the sample

The sample contains the following:

  • BookstoreApp project, which contains the following components:

    • Request a book custom action

    • But this book custom action

    • My orders app part

    • Orders custom list

    • Order status custom list

    • Home SharePoint page

    • App web resource files

    • Host web resource files

    • JavaScript resource files

     

  • BookstoreWeb project, which contains the following components:

    • BookOrders app page and JavaScript file

    • BookPurchase app page and JavaScript file

    • BookRequest app page and JavaScript file

    • ChromeLoader JavaScript file

    • Common JavaScript file

    • StyleLoader JavaScript file

    • Resource files

    • JavaScript resource files

Configure the sample

Update the SiteUrl property of the solution with the URL of your SharePoint website. This should be an American English (en-US) site collection.

Run and test the sample

You can test the sample by deploying it to an English SharePoint website, to a Spanish SharePoint website and to a French SharePoint website.

  1. Press F5 to build and deploy the app.

  2. In the Grant permissions to the App page, click Trust It.

  3. Follow the instructions on the SharePoint page.

    Request a book by using the Ribbon custom action. Buy a book by using the ECB custom action.

    Figure 2 shows the bookstore app start page.

    Figure 2. Bookstore app start page

  4. Create a Spanish (es-ES) site collection using the Developer Site template.

  5. Change the SiteUrl property of the solution to the Spanish site collection.

  6. Repeat the test for the Spanish site collection.

  7. Create a French (fr-FR) site collection using the Developer Site template.

  8. Change the SiteUrl property of the solution to the French site collection.

  9. Repeat the test for the French site collection. Since the sample does not support French, you should get UI elements in the invariant language, which is English in this sample.

Troubleshooting

The following table lists common configuration and environment errors that prevent the sample from running or deploying properly, and how to solve them.

Problem

Solution

The app part does not display any content. The app part displays the following error: Navigation to the webpage was canceled.

The browser blocked the content page. The solution might be different depending on the browser you are using:

  • Internet Explorer 9 and 10 display the following message at the bottom of the page: Only secure content is displayed. Click Show all content to display the app part content.

  • Internet Explorer 8 shows a dialog box with the following message: Do you want to view only the webpage content that was delivered securely?. Click No to display the app part content.

Error "This content cannot be displayed in a frame." when the user selects the ECB custom action.

See this forum discussion: http://social.msdn.microsoft.com/Forums/sharepoint/en-US/fa6abb31-7251-4744-ab14-634cde38a42d/error-when-viewing-apps-that-utilize-webparts-this-content-cannot-be-displayed-in-a-frame?forum=appsforsharepoint

Change log

Version

Date

First version

July 16, 2012

Revised

April 2013

2nd Revision

May 2014

Related content