function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Nishant Shrivastava 30Nishant Shrivastava 30 

i want to open commandbutton in new tab. please guide me

<apex:page sidebar="false" controller="Search_Account_Controller" showHeader="false" docType="html-5.0">
  <html xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">  
    <head>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js" />
    <apex:styleSheet value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css" />
        
    <apex:slds />
         <style>
             .ui-corner-all{
             z-index: 1;
            top: 34px;
            left: 0px;
            display: block;
            width: 403px;
             background-color: lightgray;
             }
             .displayNone { 
        display:none; 
    }
    .displayBlock {
        display:block;
    }
    .ui-autocomplete-loading { 
        background: white url(/img/loading32.gif) right center no-repeat;
        background-size:15px 15px; 
    }
    .placeHolder {
        font-style: italic;
    }
         </style> 
    </head>
    <body>    
      <apex:form > 
          <apex:actionFunction name="updateLineItem"  action="{!getLineItemDetails}"  rerender="serviceDetails" >
              <apex:param name="OppId" value="" />
          </apex:actionFunction>
           <apex:actionFunction name="getAccDetails"  action="{!getAccountDetails}"  rerender="accountDetails,opportunityDetails,serviceDetails,accountCheckId" oncomplete="checkAccount()">
              <apex:param name="accId" value="" />
          </apex:actionFunction>
                <div class="slds" id="pageBody">
                     <div class="slds-form-element__control" >
                         <apex:inputText style="margin-left: 20px;height: 34px;width: 30%;background-color: grey;color:white" id="accSearchBox" value="{!searchTerm}" styleClass="placeHolder" >
                             </apex:inputText>
                         <apex:inputHidden id="searchAccId" value="{!searchedRecordId}" >
                          
                         </apex:inputHidden>
                     </div>
                     
                     <apex:outputPanel id="accountDetails">
                         <form >
                             <fieldset style="width: 35%;border: 2px solid black;margin-left:20px;">
                                <legend style="margin-left: 34px;" >Account Details</legend>
                               
                               <div style="margin-left: 12px;padding:5px"> 
                                <div class="slds-text-body--regular" title="Planning Id"><b>Account Id</b></div>
                                 <div class="slds-form-element__control">
                                    <apex:inputText Styleclass="slds-input" style="width: 90%;background-color:white" value="{!accObj.Id}" disabled="true">
                                    </apex:inputText>
                                </div>
                              </div> 
                               
                              <div style="margin-left: 12px;padding:5px">     
                                <label class="slds-text-body--regular" title="Account Name"><b>Account Name</b></label>
                                <div class="slds-form-element__control">
                                    <apex:inputText Styleclass="slds-input" style="width: 90%;background-color:white" value="{!accObj.Name}" disabled="true">
                                    </apex:inputText>
                                </div>
                            </div>
                            
                            <div style="margin-left: 12px;padding:5px">    
                                <label class="slds-text-body--regular" title="Account Type"><b>Account Type</b></label>
                                <div class="slds-form-element__control" >
                                    <apex:inputText Styleclass="slds-input" style="width: 90%;background-color:white" value="{!accObj.Account_Type__c}" disabled="true">
                                    </apex:inputText>
                                </div>
                            </div>    
                            </fieldset> 
                         </form>
                      </apex:outputPanel>
                      
                      <apex:outputPanel id="opportunityDetails">
                          <form >
                             <fieldset style="border: 2px solid black;width: 59.5%;margin-top: -205px;margin-left: 950px;">
                               <legend style="margin-left: 24px;" >Opportunities</legend>
                               <table>
                                <tr><th>Opp. Nr.</th><th>Opportunity Name</th> <th>Opportunity Case</th><th>Stage</th><th>Creation Date</th><th>Close Date</th></tr>
                                <apex:repeat value="{!oppList}" var="oppObj" >
                                <tr><th>{!oppObj.OppNumber__c}</th><th id="{!oppObj.Id}" onclick="updateLineItem(this.id)"><a href="#">{!oppObj.Name}</a></th> <th>{!oppObj.FC_Opportunity_Status__c}</th><th>{!oppObj.StageName}</th>
                                
                                <th>
                                    <apex:outputText value="{0,date,dd'.'MM'.'yyyy}" >  
                                      <apex:param value="{!oppObj.CreatedDate}"/>  
                                    </apex:outputText>  
                                </th>
                                <th>
                                    <apex:outputText value="{0,date,dd'.'MM'.'yyyy}" >  
                                      <apex:param value="{!oppObj.CloseDate}"/>  
                                    </apex:outputText>  
                                </th>
                                </tr>
                                </apex:repeat>
                               </table>
                             </fieldset>
                             
                         </form>
                      </apex:outputPanel>
                    <div style="margin-top: 167px;">  
                      <apex:outputPanel id="serviceDetails">
                          <form style="width: 93%;    margin-top: 210px;">
                             <fieldset style="border: 2px solid black;    margin-left: 20px;">
                               <legend style="margin-left: 24px;" >Services</legend>
                               
                               <table>
                                <tr><th>Service Id</th><th>Service Name</th> <th>Product Id</th><th>Product Name</th><th>Publisher</th></tr>
                                <apex:repeat value="{!serviceList}" var="serObj" >
                                <tr><th>{!serObj.Id}</th><th >{!serObj.Name}</th> <th>{!serObj.Product__c}</th><th>{!serObj.Product__r.Name}</th><th>{!serObj.Publisher__c}</th><th>
                                    <button id="ButtonId" class="slds-button slds-float--right slds-button--icon-border slds-not-selected" Style="background-color:grey;height: 34px;width:100%;color: white; border-radius: 21px;"  name="Text" type="button" onclick="window.location.href='https://{!serObj.externallink__c}' , '_blank'"> publisher </button>
                                </th> </tr>
                                </apex:repeat>
                               </table>
                             </fieldset>
                         </form>
                      </apex:outputPanel>
                    </div>
                </div>
        </apex:form>
        
        <script>
            function updateVal(Id){
               
                updateLineItem(Id);
            }
        </script>
        <apex:outputPanel id="accountCheckId">
            
            <script>
               function checkAccount(){
                   if('{!recTypeCheck}'=='false'){
                       alert('Selected Account is not Customer Account');
                       }
                   }
            </script>
        </apex:outputPanel>
        <script type="text/javascript">
        var PLACEHOLDER = 'Search for Account(Type Customer)'; 
        var movieObjects;
        var queryTerm;
        
        $('[id$=accSearchBox]').autocomplete({
            minLength: 2,
            source: function(request, response) {
                        queryTerm = request.term;
                        Search_Account_Controller.searchAccount(request.term, function(result, event){
                            if(event.type == 'exception') {
                                  alert(event.message);
                            } else {
                                 movieObjects = result;
                                 response(movieObjects);
                            }
                        });
                   },
            focus: function( event, ui ) {
                    $('[id$=accSearchBox]').val( ui.item.Name );
                    return false;
                    },
            select: function( event, ui ) {
                        $('[id$=accSearchBox]').val( ui.item.Name );
                        $('[id$=searchAccId]').val( ui.item.Id );
                        getAccDetails($('[id$=searchAccId]').val());
                        return false;
                    },
         })
         .data( "autocomplete" )._renderItem = function( ul, item ) {
            var entry = "<a>" + item.Name;
           
            entry = entry + "</a>";
            entry = entry.replace(queryTerm, "<b>" + queryTerm + "</b>");
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( entry )
                .appendTo( ul );
        };
            
        // Add or remove placeholder values
        $('[id$=accSearchBox]').val(PLACEHOLDER);
        $('[id$=accSearchBox]').style="color:white";
        $('[id$=accSearchBox]').on("focus",  function(event){
            $tgt = $(event.target);
            if($tgt.val() === PLACEHOLDER ){
                $tgt.val('');
                $tgt.removeClass('placeHolder');
            }
        });
        $('[id$=accSearchBox]').on( "blur",  function(event){
            $tgt = $(event.target);
            if($tgt.val() === '' ){
                $tgt.val(PLACEHOLDER);
                $tgt.addClass('placeHolder');
            }
        });
    </script>
    </body>
   </html>
Deepali KulshresthaDeepali Kulshrestha
Hi Nishant,
In order to open the command button in a new tab, you should use <apex:commandLink/> as it will provide you all the necessary functionalities and may also assist you in solving your query. For more information on using <apex:commandLink/> please go through the following link :
https://developer.salesforce.com/docs/atlas.en-us.220.0.pages.meta/pages/pages_compref_commandLink.htm
Please refer to the following code as it may be helpful in solving your query: 
Visualforce page:

<apex:page controller="Sample">
<apex:form >
    <apex:pageblock >
        <apex:commandlink action="{!switch}" target="_blank">
            <apex:commandButton value="Switch"/>
        </apex:commandLink>
    </apex:pageblock>
</apex:form>
</apex:page>

Apex Controller:

public class Sample {  
   
    public Sample() {
    }
   
    public pageReference switch() {
        PageReference pageRef = new PageReference('http://www.google.com');
        pageRef.setRedirect(true);
        return pageRef;
    }           
}

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha.