Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Skip to content
This repository has been archived by the owner on Jan 21, 2021. It is now read-only.


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
page_type products languages extensions
contentType technologies createdDate
8/19/2015 2:56:26 PM

Localize the add-in web, host web, and remote components of a SharePoint Add-in

SharePoint add-in model is considered as a legacy option for extending SharePoint user interface. Please see SharePoint Framework documentation and the SharePoint Framework samples for the future proven option to extend SharePoint Online. Possible backend services should be using Azure Active Directly based registration and related app models.


Use resource (resx) files and JavaScript string files to localize custom add-in parts, web parts, popup dialogs, page chrome, lists, and list columns.

Applies to

  • SharePoint Online and on-premise SharePoint 2013 and later


This sample requires the following:

Description of the code

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 add-in are localized for English and Spanish.

Note: The add-in is designed to use the base language of the SharePoint website -- the language that was selected when the website was created -- to determine which language it should use to render the add-in's componenents. It does not use the default language of set in the user's browser, however, some of the techniques in the sample can be used, with some modification when the browser setting is the criterion.

This sample includes a remote web application that has web pages to handle the book request and book buying experiences in a simulated bookstore. (These remote web pages are never opened full screen. Some are surfaced in add-in parts. Some serve only to pass cross-domain JavaScript through an iFrame.

Custom actions provide the link between the document library and the add-in pages. The cross-domain library provides data access from the remote web application to the document library. The chrome control and SharePoint style sheet provide the classes to consistently style the web application pages. A custom list provides storage for the orders placed by the end user. End users can use the provided add-in part to display the orders history.

The sample demonstrates how to localize the following kinds of add-in components:

  • Add-in title
  • Custom lists
  • Custom actions (menu commands)
  • Add-in part
  • SharePoint pages
  • Remote web application pages
  • SharePoint Chrome control

Components of the sample

The sample contains the following:

  • SharePoint-Add-in-Localization project, which includes the following components:

    • Request a book custom action (menu command)
    • But this book custom action (menu command)
    • My orders add-in part
    • Orders custom list
    • Order status custom list
    • Add-in start page in the add-in web
    • Add-in web resource (resx) files
    • Host web resource (resx) files
    • JavaScript resource (strings) files
  • SharePoint-Add-in-LocalizationWeb project, which includes the following components:

    • BookOrders remote web page and JavaScript file
    • BookPurchase remote web page and JavaScript file
    • BookRequest remote web page and JavaScript file
    • ChromeLoader JavaScript file
    • Common JavaScript file
    • StyleLoader JavaScript file
    • Resource (resx) files
    • JavaScript resource (strings) files

To use the sample

  1. Open Visual Studio as an administrator.

  2. Open the .sln file.

    CARRY OUT THE REMAINING STEPS OF THE PROCEDURE THREE TIMES: The first time for your English developer site. Then for the Spanish developer site, and then for the French developer site. Screenshots show what you should see in English and Spanish. For the French developer site, you should see the "invariant language" strings, which are English in this sample. The instructions below use English for the SharePoint and add-in UI elements. You will find the Spanish equivalents in the same relative locations in the UI.

  3. In Solution Explorer, highlight the SharePoint add-in project and replace the Site URL property with the URL of your SharePoint developer site.

  4. Press F5.

  5. After the add-in installs, the consent page opens. Click Trust It.

  6. The start page opens and looks similar to the follwoing. (The content is a very brief version of these instructions.)

    The add-in start page in English and Spanish

  7. Open the raw HTML view of the page. (In IE, right-click the page and select View Code.)

  8. Find the line <h2 id="instructionsheading">INVARIANT Instructions</h2>.

  9. Notice that the term "INVARIANT" is part of the heading but it only appears on the rendered version of the page on the French website. On the English and Spanish websites, alternate strings are injected into the page by JavaScript.

  10. Close the raw view, and in the browser open another tab and navigate to the host web home page. Then navigate to any document library on the host web, such as Documents.

  11. Open the Library tab on the ribbon and click the Request a Book button. The Request a Book ribbon button in English and Spanish

  12. On the dialog that opens, enter a book title and press Request book. The Request a Book dialog in English and Spanish

  13. The new file appears in the library. The Request a Book dialog in English and Spanish

  14. Open the context menu for the new document and select Buy this book. A book purchase form page opens.

  15. Press the Buy book! link, and the fake Latin text of the book appears on the form. The book purchase form in English and Spanish

  16. Navigate to any other page on the host web, such as its home page.

  17. On the ribbon select Page | Edit | Insert.

  18. On the Insert ribbon select Add-in part. (On older versions of SharePoint, it may say App part.)

  19. Select the Book orders add-in part, and then put the cursor in any Web Part zone on the page and click Add. The add-in part will be added to the page. It may take a full minute for the data to be populated. When it has finished rendering, there is a list of all the books you have ordered. The Book Orders add-in part in English and Spanish

  20. Delete the add-in part from the page. (Removing an add-in, or retracting it in Visual Studio, does not remove add-in parts from pages.)

  21. Reopen the tab with the add-in's start page, and use the link to the Orders list in the last line of the instructions to open the Orders list in another tab. Notice that the price in English site is USD, but it is Euros in the Spanish site. The Orders list in English and Spanish

  22. Just to the right of the list title is a small "i" in a circle. Click this to see the list description. The description of the Orders list in English and Spanish

  23. Reopen the tab with the add-in's start page, and use the link to the Order status list in the last line of the instructions to open the Order status list in another tab. Note again that the description, as well as the title and the status values has been localized. The Order Status list in English and Spanish


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



The add-in part does not display any content. The add-in 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 add-in 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 add-in part content.

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

See this forum discussion: Error when viewing apps that utilize webparts this content cannot be displayed in a frame.

Questions and comments

We'd love to get your feedback on this sample. You can send your questions and suggestions to us in the Issues section of this repository.

## Additional resources

SharePoint Add-ins

Localize SharePoint Add-ins

Copyright (c) Microsoft. All rights reserved.

This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.


Use resource (resx) files and JavaScript string files to localize custom add-in parts, web parts, popup dialogs, page chrome, lists, and list columns.



Code of conduct

Security policy





No packages published