The steps here will demonstrate how to embed pages from Dynamics Navision 2015 into SharePoint Online and so enabling SharePoint users to interact with Dynamics NAV without leaving SharePoint. The user will be able to view charts and tables inside SharePoint, where the charts are generated by NAV.
Prerequisites
· SharePoint – in this scenario we will be using SharePoint online
· Dynamics NAV 2015 web client deployed
· Dynamics NAV configured for single sign-on with SharePoint: As we are using SharePoint online in this scenario we will be signing in with O365 authentication.
· Visual studio 2012 with office developer tools for visual studio 2012
There are basically 4 steps involved to achieve this task.
1- Register Dynamics NAV as an APP in SharePoint
2- Create a SharePoint APP in Visual studio
3- Install the APP in SharePoint
4- Add NAV web parts to SharePoint site
Step One – Register Dynamics NAV as an APP in SharePoint
Browse to the following page in SharePoint, replacing “yourcompanyname.sharepoint.com” with your company SharePoint portal home URL.
https//yourcompanyname.sharepoint.com /_layouts/appregnew.aspx
This will take you to the following screen:
– Select ‘An app running on a web server’
– Click on generate to generate a new Client Id
– Click on Generate to generate Client Secret
– Enter a title for the app
– The app domain and the redirect URL both point to where your NAV web client is deployed.
So for example if your web client is deployed at:
https://yourcompanyname.cloudapp.net/DynamicsNav80/WebClient/
You would enter yourcompanyname.cloudapp.net in the App Domain and enter
https://yourcompanyname.cloudapp.net/DynamicsNav80/WebClient/ in the Redirect URL, see below
– Click on Create.
You will be presented with the following screen.
Make a note of the client Id as we will need this when we create the SharePoint app in visual studio.
– Click ok
Step 2: Create SharePoint APP in Visual Studio
Create a new project in visual studio 2012.
Select office/SharePoint templates and select app for SharePoint 2013 and give your project a relevant name, I have called it DynamicsNav2015SharepointApp.
On the next screen the SharePoint site entry is irrelevant, however select Provider-hosted in hosting the app as you will be hosting the app on your SharePoint online portal.
Click next
Here accept default option and click finish.
Your solution will look as below, with two projects.
You now need to configure the solution for your NAV instance.
– Remove DynamicsNav2015SharepointAppWeb project this is not required as you already have your NAV web client deployed
– Click on AppManifest.xml file
– Replace the text between the <Startpage> tag and ?{StandardTokens}
With the URL for you Web Client deployment e.g.
https://yourcompanyname.cloudapp.net/Dynamics80/WeClient/
– Paste in the Client Id that you copied from the app registration process in SharePoint from step 1
Next we need to add an item to the project – select Client Web Part and call it ListPart, Click ADD
As we already have NAV web client deployed, enter the URL for your web client and add list.aspx at the end, as this will be a list part.
Click finish.
You will now have a new List part as below:
We now need to modify this List part and define which page we would like to display and how it should be displayed.
Update the content tag to define the properties for the page to be embedded.
I have set them as:
https://yourcompanyname.cloudapp.net/Dynamics80/WeClient/List.aspx?page=_ThePageId_&pagesize=10&shownavigation=0&showribbon=0&
isembedded=1&showuiparts=0" />
Where the _ThePageID defines the property for the page. You can then add the property, where the default page is 22 (Customers page) and add attributes that control the configuration of the web part as follows:
<Property
Name = "ThePageId"
Type ="int"
DefaultValue="22"
WebCategory="Microsoft Dynamics NAV"
WebDisplayName ="Page number"
RequiresDesignerPermission = "true" /
You ListPart will then look as follows:
Next you need to publish the project to create the app.
Below is the app I have created. I will not upload this to SharePoint.
Step 3 – Install the APP in SharePoint
The next step is to install the app to the SharePoint APP Catalog
To do this go to the SharePoint Admin Centre, App, App catalog, Apps for SharePoint.
Upload or drag the file above to the Library.
Step 4 – Add Web Part to SharePoint Site
Once the app has been uploaded to SharePoint, it is available for users to add as an app to sites.
Add the app to your site.
Once the app has been added you can add the List web part to your site pages
Edit a page and insert web part, select List Part that we have created
The web part will look as follows show the default Customers page
NOTE: if you get the following error: “Cannot render inside a frame”, you need to edit the web.config file in the web client and remove the line that says X-FRAME-OPTIONS
You can modify the list part to make the page look better by changing the width and height and title. Change the title to ‘Customers’ and change the width and height as required. See below
If you select one of the customers by clicking on the customer number, it will open the customer card and you can make changes as required.
By default the web part displayed is the customer page (22). If you want to see other pages instead, this can be done simply by modifying the page number under the Microsoft Dynamics section. See below
To display the Sales Orders, change the page number to 9305, change the heading and apply.
