Star War Probability Progress Bar for Opportunity :)

Screen Shot 2016-07-11 at 7.49.21 PM.png

Star Wars: The SalesForce Awakens

I am here with some fun in salesforce. 🙂 You may have seen Star War movie. It is my favorite movie. In this post i will integrate Salesforce with Star Wars.( i am Kidding 🙂 ) In this article i am creating Star War’s Sword as a progress bar.

starwars-logo

Steps to create:
1. Save this image in Static Resource in salesforce. Name it as Sword.

Screen Shot 2016-07-11 at 7.24.33 PM.png

2. Go to Setup -> Develop -> Visualforce Pages
3. Create a New page here and name it StarWarProbability
4. Copy paste below code in this page and save it.

<apex:page standardController="opportunity" showHeader="false" sidebar="false" standardStylesheets="false">
<style>
    .starWar{
        border-radius: 0px 2px 2px 0px;
        display: block;
        width: 0%;
        background-color: #fff;
        height: 8px;
        width: {!opportunity.Probability}%;
        font-size:8px;
        text-align: center;
    }

    .vader{
        box-shadow:0px 0px 10px 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275;
    }
    .yoda{
        box-shadow:0px 0px 10px 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A;
    }
    .obi{
        box-shadow:0px 0px 10px 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8;
    }
    .windu{
        box-shadow:0px 0px 10px 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4;
    }
</style>
<div>
<table style="border-spacing: 0px;width:100%;">
<tr>
<td style="width: 114px;">
                <img src="{! $Resource.Sword }"/></td>
<td>
                <span class="vader starWar" title="{!opportunity.Probability}%">{!opportunity.Probability}%</span></td>
</tr>
</table>
</div>
</apex:page>

I have added four types of Swords in css. You just need to change in line 33. Like replace vader with yoda.

5. Now Go to Setup -> Customize -> Opportunities -> Page Layouts –> Here click on layout for show sword on detail page of opportunity record.
6. Go here for Visualforce Pages. Add Blank Section on the top and add drag your page in this section.
7. Set Section Properties ( Layout = 1-Column )
Set Visualforce Page Properties ( Height (in pixels) : 50px )

8. Save setting and open any opportunity record.

Now do changes in probality and get your StarWar Sword. 🙂

Happy Salesforce 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s