Interactive Buttons?

stephenbooth_uk · August 10th, 2011, 11:33 AM

We're currently in the process of moving from WSS 3.0 (aka Sharepoint 2007) to Sharepoint 2010. Most of our WSS 3.0 sites have dashboards or similar pages built in Sharepoint Designer 2007 (SPD 2007). We use a lot of Interactive Buttons (graphical buttons with hyperlinks attached, much better looking than the plain grey HTML/ASP style buttons and we can manually build the URL) in these dashboards, in SPD 2007 these can be inserted from the Insert menu. The dialog lets you select the style of button, text that appears on the button, size, hyperlink URL and other attributes then when you click OK it creates the button image (including a 'pressed' image) and inserts the code.

Now we're moving to Sharepoint 2010 and SPD 2010 I'm not able to find how to insert these. I've tried just poking around, searchignthe help system and looking through the book this forum is attached to (mostly the index and then flicking through to see if I could see a screen shot of a page with one of these buttons). No joy. Are they still available? We use a lot of them so I hope they haven't been dropped.

I know I could build the buttons manually in a graphics package and insert them, but that would add literally days to the time taken to build one page.

Stephen

stephenbooth_uk · August 11th, 2011, 09:08 AM

Found the solution to inserting Interactive buttons. Insert Interactive Button is there, just not on any ribbon by default.

To get it on a ribbon where it's usable:

Select the ribbon you want to add it to (I'd suggest the Insert ribbon).
Right click on an empty area of the ribbon
Select "Customize this Ribbon", this opens the SharePoint Designer Options dialogue on the Customize ribbon item.
In the right hand side make sure the correct ribbon is selected in the list.
You cannot add items to existing groups (for Interactive Buttons the Controls group would be logical) so click on the New Group button just below the box listing the ribbons.
Right click on the newly created group and select Rename.
Enter the name name you want for the group and, if you want, select a graphic to associate with it.
Make sure that the new group is selected and on the left column choose 'All Commands' from the Choose Commands From drop down.
Scroll thought he list of comands in the list box below the drop down. Select the commands you want (they're in alphabetical order, Interactive Button is about half way down)and click the Add>> button for each one.
Click the OK button.
You should now have a group on the ribbon including the commands you selected.

Given some of the options that are there I think Microsoft need to reassess their priorities for what makes it to the ribbon by default and what doesnât.

Stephen

DLGross · August 12th, 2011, 08:05 AM

Thanks for sharing your suggestion. I have followed you instructions and the Interactive Button is now on the ribbon but it is grayed out. Any idea what i need to do to get it active? i have clicked in several different spots on my page, but it stays inactive.

Upon further investigation, i have discovered that the Insert Interactive Button ribbon item is active on a new plain aspx page, but it won't activate on the home.aspx page for my site or on a new Web Part page. Any idea what might be causing this behavior?

TIA
Dean

stephenbooth_uk · August 12th, 2011, 08:49 AM

When a button is greyed out it usually means that it can't be used in the current location on the page. Can you insert a table or form on to the page? If so try it and see if you can insert an interactive button within it.

Stephen

DLGross · August 12th, 2011, 09:20 AM

I can add a table and many other controls, i just can't figure out what is keeping the interactive button from activating, it is strange.

stephenbooth_uk · August 12th, 2011, 12:04 PM

I've just tested it our myself and it appears that you have to be editing in Advanced Mode to insert an Interactive Button (which does make sense).

If you are then try this:
Create a new aspx page in Sharepoint Deisgner and open it in Advanced Mode then select Split view (if you don't have this as the default). In the code pane I'd expect to see something like:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<meta name="Microsoft Theme" content="Wheat 1011, default">
</head>

<body>

<form id="form1" runat="server">
</form>

</body>

</html>

In the Code pane click at the end of the line that reads

Code:

<form id="form1" runat="server">

, this ensures that you are within the form. Your insert 'Interactive Button' button on the ribbon should now be active.

If this doesn't work then I suspect there's something wierd with your installation of SPD, I'm using Out-Of-The-Box SPD downloaded a couple of months ago, if it does then the isse may be with the page you are trying to edit or you are not editing in Advanced Mode. I've just tested it our myself and it appears that you have to be editing in Advanced Mode to insert an Interactive Button (which does make sense).

Hope this helps.

Stephen

DLGross · August 12th, 2011, 12:30 PM

Thanks that did the trick, but now when the page loads, the graphics don't display, when i saved the page i selected the site collection images library, i see the image files in that library, but when i look at the image in spd, the path got removed. Any idea why that would have happened or how to prevent it?