SharePoint Visual Web Part open links in the same window

The Visio Web Part in SharePoint is a great way to display your visio diagrams direstly in SharePoint.

It can also be used for other things, like displaying an interactive diagram with embedded links. This solution gives the user an ability to work with a diagram directly in Visio (no SharePoint knowledge required) and than simply upload the diagram to SharePoint, which displays it to some page for others to see.

This scenario is exactly what I was working on when I encounter a problem with the Visio Web Part.

The problem is that the Visio Web Part displays a clicked link in a context menu and always opens the link in a new window. This was not the behavior that the client wanted. Links should be opened in the same window and with now dropdows.

The solution turned out to be configuring the web part and some custom javascript.

Step 1: Configuring the Visio Web Part

Taken a simple Visio Diagram with test links

Test Visio Links

Test Visio Links

If you click on one of the links insted of directly transferring you to that link you will get a dropdown

Test Visio Links clicked

Test Visio Links clicked

Unfortunately the only fix for this behaviour is to disable of hyperlinks for the entire diagram.

This is possible in the Visio Web Part settings

Disable Hyperlink

Disable Hyperlink

Great, now we don’t have the context menu problem, but we can’t open any links. That is a bit crappy, I wil give you that. To fix this we need some javascript help.

Step 2: Custom javascript

Fortunatly for us we can implement opening links by ourselfes with javascript.

Include the below script in the page with your diagram with Script Editor Web Part for example and you are ready to go.

Find the Id of a Ribbon button in SharePoint

When you are trying to customize the SharePoint Ribbon you might want to hide a few of the buttons. There are a few ways to do that, including obviously css manipulation. The recommended way is to deploy a custom action element with the following details.

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction
    Id="RemoveRibbonButton"
    Location="CommandUI.Ribbon">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition
          Location="Ribbon.XXX.YYY.ZZZ" />
      </CommandUIDefinitions>
    </CommandUIExtension>
  </CustomAction>
</Elements>

The text XXX.YYY.ZZZ symbolizes the name of the button on the ribbon. Most of the buttons have standard names, and can be guest, like the button for creating a new folder in a documents library – “Ribbon.Documents.New.NewFolder”. There are some buttons though, that are a bit different.

A good example is the button for editing with Infopath – “Ribbon.List.CustomizeList.Controls.btnCustomizeList2”. When looking for button names like this you may end up looking up the CMDUI.XML that is located in the SharePoint hive folder on the path: TEMPLATE\GLOBAL\XML. You can find a lot of the button names there, but unfortunately not all.

The solution to this problem is to look up the button id on the page. The id that we are looking for will be used there for the id of the link tag.

You could look up the button id in a few different ways, but probably the easiest would be to an elements inspector tool. Most modern browsers have this kind of tool automatically available in their developer tool suites.

With the inspector tool you can simply point to an element on the page, and see its properties. In the example below I am looking up the Infopath button.

Looking up the ribbon button id

Looking up the ribbon button id

Configurating an external data type in SharePoint 2013 Part 2

This is part two of the series on configuring an external data type in SharePoint 2013. The first part is here.

At this point you should have already finished configuring the external data type, and created a list based on that external data type.

When you are trying to access the list you get an “Access Denied by Business Data Connectivity” error. This is caused by your configuration of your Business Data Connectivity Service. To change that you have to:

1. Go to “Manage service applications” in central administration

2. Click on the “Business Data Connectivity Service”

3. Select your external content type and click “Set object permissions”

4. Give full permissions to All Users(windows)

5. Now you should be able to see your list

Configurating an external data type in SharePoint 2013 Part 1

This is a step by step configuration of an external data type in SharePoint Designer 2013. The first part explains step by step how to create an external data type. The second part shows how to configure the connection for fetching the data from an SQL Server database that is on another server.

So without further ado let’s get to the step by step description:

1. Open SharePoint Designer

2. Go to “External Content Types” and click the “External Content Type” button

3. You will get a window with the new external content type configuration

4. Change the name of the external content type by clicking on it

5. Go to sources configuration

6. Click “Add Connection”

7. For the source type choose SQL Server

8. Specify the database connection properties

9. Now you are ready to connect to the SQL database. Create a table in your database if you haven’t already.

10. Your source connection should now be visible in SharePoint Designer.

11. Now you need to generate the possible operations on the ProjectsTest table. Make a right click on the table an choose “Create All Operations”

12. On the “Operation Properties” screen click next

13. Check if the parameters are configured properly, and if you have no Errors in the “Errors and Warnings” screen.

14. On the “Filter Parameters” screen click next

15. You can now see the defined “External Content Type Operations”

16. Now we can create a new list based on the external content type that we’ve just created. Go to “List and Libraries” and on the ribbon click on “External List”.

17. Pick our external content type and click “OK”
18. Choose a name for out external list and click “OK”

19. If the SQL Server database is on the same server you should see the list.

If the SQL database is on another server, than you will see an “Access Denied by Business Data Connectivity” error. Handling this problem is covered in the next part of this tutorial.