Modify Custom CSS to make URL link fields show as buttons

Here's a handy tip which you can use to simplify workflow that you want your users to follow. 

Firstly - if you're familiar with custom actions, you should already know that they are contextual. Meaning, you can have different custom actions run depending on who the user is, or which item you've selected, or even depending on a particular value of a particular field (or combination of them). 

Secondly - you can run a Custom Action by triggering a URL. There's a function you can use called GetCustomActionURL. That means you can create a formula-based URL field - let's call it "Next Step" - which can show different links to different custom actions depending on a Task's TaskType, or Request's State. For example: if a Request is in "Submitted" state, you might want to run a custom action to move it to "In Work" and capture a user's comment and link it to a particular Department Portfolio, but if the Request is "In Work" you may have different custom action you'd want to to run to present a form to capture "Resolution Details" to move it into "Resolved" state. (Issues and Requests are very common examples of items that follow a simple State model).

Thirdly, you can show short links using the Hyperlink() function. When you use the GetCustomActionURL function to get the link to the Custom Action, make sure to use the Formula Helper which will help you. Your end result for the field's formula should look something like this: 

HyperLink(GetCustomActionUrl('Complete Task with Document',$SYSID),'Click Me')

   and you can use CASE or IF statements to determine what links to show in each scenario you have. 

Now you can add the field to grid views, for example, and users can easily work through your various processes without having to be mindful of exactly which custom action they need to to use each time.

Finally - you want to present the link as a button as a call to action for your user so they understand that the Next Step field is actionable and not just an informational link. To do this, you'll need to add the following CSS code to the Global CSS in your organization's Settings> Global Settings page.

Note that changing the Custom CSS will affect all custom URL fields, but not all other hyperlinks in the system, so if you are using URL fields for any other reason, they'll look like buttons now, which might not always be desirable, so use your new-found powers wisely. 

----------  Paste the text below into Custom CSS   ------------------------------------------

.object-link span {text-align:left}

.object-link a, .object-link a:link, .object-link a:visited

{

display:inline-block; margin:0; padding:2px 15px; color:#666; border:1px solid #ccc; border-radius:3px; cursor:pointer; text-decoration:none; text-align:center; font-size:12px;

background: #eee url(../../images/bg-button.png) no-repeat left center;

overflow:visible; /* <- ie7 */

-webkit-transition: all .15s ease-in; -moz-transition: all .15s ease-in; transition: all .15s ease-in;

}

.object-link a:hover

{

border-color:#999;

color:#000;

box-shadow: 0px 1px 2px rgba(0,0,0,.15);

}

.obj-field-cnt:hover .object-link .o-val {padding-right:0px;}