Use Tab Color Dynamically on VF page from JS.

Hi guys,

I am writing this post because recently i used it and feel must share it,

Here I am creating a VF with some colored arrow on page (Created by using CSS) and color of arrows automatically changes according to the color and style of the Custom-Tab,

This requirement is mainly needed when you are creating a detail VF page

Now magic is to use arrow color same as the Tab color of your object.

I achieved this using Javascript and CSS,

Here is the VF page code:-

	<apex:page standardController="Custom_Object__c" sidebar="false" showHeader="false" id="ThePage">
	<style>
	.txt{
	font-size: large;
	}
	.txtSelected{
	color: white;
	}
	.txt:hover{
	background-color: #EDF4F5;
	cursor: pointer;
	}
	.arrow-right {
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid;
	}
	</style>
	<script type="text/javascript">
	// Method for dynamic pick color from Tab style.
	window.onload = function(){
	// Get Color of the Tab.
	// "secondaryPalette" is the Standard CSS,
	// i am taking the color code form Standart CSS.
	var elementByCssName = document.getElementsByClassName("secondaryPalette")[1];
	var colorValue = window.getComputedStyle(elementByCssName, null).getPropertyValue("border-color");
	// Hide PageBlock.
	// the page block i am using only for color code or you can avoid it.
	var PageBk = document.getElementById("ThePage:blk");
	PageBk.style.display = "none";
	// now, set arror and highlight color.
	var arrorsElts = document.getElementsByClassName("arrow-right");
	for(var i = 0; i < arrorsElts.length; i++){
	arrorsElts[i].style.color = colorValue;
	}
	var selectedElt = document.getElementsByClassName("txtSelected");
	for(var i = 0; i < selectedElt.length; i++){
	selectedElt[i].style.background = colorValue;
	}
	}
	</script>
	<div>
	<table style="margin: 0 auto;">
	<tr>
	<td>
	<div class="txt">
	Created
	</div>
	</td>
	<td>
	<div class ="arrow-right"></div>
	</td>
	<td>
	<div class="txt">
	Sent to Vendor
	</div>
	</td>
	<td>
	<div class ="arrow-right"></div>
	</td>
	<td>
	<div class="txt">
	Partially Received
	</div>
	</td>
	<td>
	<div class ="arrow-right"></div>
	</td>
	<td>
	<div class="txt">
	Received
	</div>
	</td>
	<td>
	<div class ="arrow-right"></div>
	</td>
	<td>
	<div class="txt txtSelected">
	Cancelled
	</div>
	</td>
	</tr>
	</table>
	</div>
	<apex:pageBlock id="blk">
	</apex:pageBlock>
	</apex:page>

view raw DynamicTab hosted with ❤ by GitHub

Screen Shots:

Now, i just changed Tab Style and color by following these steps:-

Setup -> Create -> Tabs -> Custom_Object__c

Here is the new Tab style and color:-

arrows and highlighted section color changes automatically.


Hope it will help u guys, Happy Coding....:)

Genrate Bar Codes from UPC or SKU by REST API.

Hi friends,

By this post I’ll show how to save Bar Code in Salesforce by using UPC code,

I call web service of third party which gives the image of Barcode (by using REST Api’s) and that image is Saved in the Notes and Attachment of Product.

Here the Sample code for same:-

	<apex:page controller="saveBarCodeController" id="PAGE" sidebar="false">
	<script>
	function checkLength(){
	var upc = document.getElementById("PAGE:FORM:BLK:PBSEC:PBSITEM:UPC").value;
	if(upc.length != 12){
	alert("Entered Code must be of 12 Digits.");
	return false;
	}else{
	return true;
	}
	}
	</script>
	<apex:form id="FORM">
	<apex:pageBlock id="BLK" title="Bar Code Generator">
	<apex:pagemessages></apex:pagemessages>
	<apex:pageBlockSection id="PBSEC">
	<apex:pageBlockSectionItem id="PBSITEM">
	<apex:outputLabel value="Please Enters 12 digits UPC or SKU code."/>
	<apex:inputText value="{!UPC}" required="true" id="UPC"/>
	</apex:pageBlockSectionItem>
	<apex:pageBlockSectionItem>
	<apex:outputLabel value="Select Product"/>
	<apex:selectList value="{!selectedProduct}" size="1" >
	<apex:selectOptions value="{!prodValue}"/>
	</apex:selectList>
	</apex:pageBlockSectionItem >
	<apex:image url="http://www.searchupc.com/drawupc.aspx?q={!UPC}" rendered="{!IF(UPC != null,true,false)}" style="margin-left: 450px;"/>
	</apex:pageBlockSection>
	<apex:pageBlockButtons location="bottom">
	<apex:commandButton value="Show Bar Code" action="{!showBarCode}" onclick="return checkLength()"/>
	<apex:commandButton value="Save Bar Code" action="{!saveBarCode}" onclick="return checkLength()"/>
	</apex:pageBlockButtons>
	</apex:pageBlock>
	</apex:form>
	</apex:page>

view raw SaveBarCode hosted with ❤ by GitHub

	public class saveBarCodeController{
	public String UPC{get;set;}
	public List<Product2> prodList{get;set;}
	public List<SelectOption> prodValue {get;set;}
	public String selectedProduct{get;set;}
	public saveBarCodeController(){
	prodList = new List<Product2>();
	prodValue = new List<SelectOption>();
	prodValue.add(new selectOption('', '- Select Product -'));
	for (Product2 Prod: [SELECT Id, Name FROM Product2]) {
	prodValue.add(new selectOption(Prod.id,Prod.name));
	}
	}
	public void showBarCode(){
	}
	public void saveBarCode(){
	if(selectedProduct == null){
	ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR,'Please Select Product.'));
	return;
	}
	else{
	Http h = new Http();
	HttpRequest req = new HttpRequest();
	// URL of the 3rd party web service.
	string firstImageURL = 'http://www.searchupc.com/drawupc.aspx?q=' + UPC;
	//Replace any spaces with %20
	firstImageURL = firstImageURL.replace(' ', '%20');
	req.setEndpoint(firstImageURL);
	req.setMethod('GET');
	req.setHeader('Content-Type', 'image/jpeg');
	req.setCompressed(true);
	req.setTimeout(60000);
	HttpResponse res = null;
	res = h.send(req);
	//These next three lines can show you the actual response for dealing with error situations
	string responseValue = '';
	responseValue = res.getBody();
	system.debug('Response Body for File: ' + responseValue);
	//This is the line that does the magic.
	//We can get the blob of our file.
	//This getBodyAsBlob method was added in the Spring 2012 release and version 24 of the API.
	blob image = res.getBodyAsBlob();
	// Now save image to Notes and Attachment of Product.
	Attachment n = new Attachment();
	n.ParentId = selectedProduct;
	n.Name = 'BarCode.jpg';
	n.Body = image;
	n.contentType = 'image/jpeg';
	insert n;
	}
	}

view raw saveBarCodeController hosted with ❤ by GitHub

Screen Shots:-