Dynamic Menu Using JDock

-

Show Sleek and Dynamic Menu on the Visualforce Page.

jqdock is a jQuery plugin inspired by Mac .jqdock is a jQuery plugin inspired by Mac Dock Menu.

jqDock

 











Visualforce Page

<apex:page sidebar="false" showHeader="false" controller="JqueryController">
 <head>
   <style>
bPageHeader{
      display:none;
  }
  .heading{
      background-color:#ccc;
      text-align:center;
  }
  .data table,td,th {
      border:1px solid #000;
  }
  </style>
 <apex:includeScript value="{!$Resource.jquery}"/>
 <apex:includeScript value="{!$Resource.jqDock}"/>

 
<style type='text/css'> 
/*position and hide the menu initially - leave room for menu items to expand...*/
#page {padding-top:150px; padding-bottom:20px; width:100%;}
#menu {position:absolute; top:0; left:0; width:100%; display:none;}
/*dock styling...*/
/*...centre the dock...*/
#menu div.jqDockWrap {margin:0 auto;}
/*...set the cursor...*/
#menu div.jqDock {cursor:pointer;}
/*label styling...*/
div.jqDockLabel {font-weight:bold; font-style:italic; white-space:nowrap; color:Black
</style>
 
<script type='text/javascript'> 
jQuery(document).ready(function($){
  // set up the options to be used for jqDock...
  var dockOptions =
    { align: 'top' // horizontal menu, with expansion DOWN from a fixed TOP edge
    , labels: true  // add labels (defaults to 'bc')
    };
  // ...and apply...
  $('#menu').jqDock(dockOptions);
});
 
function setFrame(sr){
    fire(sr);
        
 
}
</script>
</head>
<apex:form >
 <body>
<div id='page'>
<div id="menu">
<apex:image value="{!$Resource.Clock}" onclick="setFrame('candidate')" title="Candidates" />
<apex:image value="{!$Resource.Connect}" onclick="setFrame('positions')" title="Connect"/>
<apex:image value="{!$Resource.Music}" onclick="setFrame('contact')" title="Music"/>
<apex:image value="{!$Resource.Pictures}" onclick="setFrame('account')"  title="Accounts"/>
<apex:image value="{!$Resource.Search}" onclick="setFrame('case')" title="Cases"/>
<apex:image value="{!$Resource.System}" onclick="setFrame('solution')" title="System"/>
<apex:image value="{!$Resource.Trash}" onclick="setFrame('applications')" title="Trash"/>
</div>
</div>
</body>
<apex:actionStatus startText="Retreving..." id="myStatus" startstyle="color:red;font-weight:bold;"/>
    
    <apex:outputPanel id="showstate">
    <center>
 
    <apex:dataTable id="pbtable" value="{!acc}" var="accvar" styleClass="tableClass" rowClasses="odd,even"  rendered="{!showtable}">
        <apex:facet name="header">Accounts</apex:facet>
           <apex:column styleClass="heading">
           <apex:facet name="header">Id</apex:facet>
           <apex:outputText value="{!accvar.Id}"/>
           </apex:column>

        <apex:column styleClass="heading">
           <apex:facet name="header">Name</apex:facet>
           <apex:outputText value="{!accvar.Name}"/>
           </apex:column>
           
           <apex:column styleClass="heading">
           <apex:facet name="header">Phone</apex:facet>
           <apex:outputText value="{!accvar.phone}"/>
           </apex:column>
           
           <apex:column styleClass="heading">
           <apex:facet name="header">Fax</apex:facet>
           <apex:outputText value="{!accvar.Fax}"/>
           </apex:column>
  </apex:dataTable>
    </center>
    </apex:outputPanel>
</apex:form> 
 <apex:form >
   <apex:actionFunction action="{!fire}" name="fire" rerender="showstate" status="myStatus"/>
 </apex:form>

</apex:page>


Controller


public class JqueryController
{
    public String tablename { get; set; }

    public Boolean showtable { get; set; }

        
     public Account[] acc {get;set;}
     
     public PageReference fire() 
     {
        showtable = true;
        acc = [select id,name,phone,fax from account limit 12];
        return null;
        
     }
     
     String uname;

    public String getUsername() {
        return uname;
    }
            
    public PageReference sayHello() {
        uname = UserInfo.getName();
        return null;
    }

}


Comments

Post a Comment

Popular posts from this blog

Introduction to Salesforce Agent Script: Build Predictable AI Agents

-
Image
Please visit here for more details - https://ayaninsights.com/guestblogs/introduction-to-agent-script/ In my latest blog, I introduce Salesforce Agent Script and explain how it helps teams build AI agents that are more predictable, controlled, and aligned with business processes. Large language models are flexible, but relying only on natural-language instructions can sometimes produce inconsistent results. Agent Script addresses this challenge by combining the conversational capabilities of an LLM with structured business logic. The blog explains how developers can use conditions, variables, actions, topics, and transitions to control how an Agentforce agent behaves. Agent Script supports familiar logic such as if/else conditions, value comparisons, sequential actions, and checks for missing data. I also cover its core structure, including system settings, configuration, global variables, languages, connections, and topic blocks. The start_agent topic acts as the entry point for each...
Read more

Anti-Patterns in Salesforce Agentforce: What to Avoid When Building AI Agents

-
Image
Salesforce Agentforce is powerful because it allows teams to build AI agents that can understand user intent, retrieve grounded information, execute actions, and support business workflows across Salesforce. But like any powerful platform, the quality of the implementation matters. A good Agentforce implementation does not start with “How many things can the agent do?" It starts with “What problem should the agent solve reliably?” That is where anti-patterns come in. Anti-patterns are common implementation habits that look useful at first but eventually create confusion, poor user experience, inconsistent answers, or hard-to-maintain agents. Below are some of the most common Agentforce anti-patterns and how to avoid them. 1. Trying to Build One Agent That Does Everything One of the biggest mistakes is designing a single agent to handle every business process, every department, and every possible customer question. At first, this feels efficient. One agent, many use cases. Bu...
Read more

MCP vs. Traditional APIs: Choosing the Right Integration Approach

-
Image
Enterprise integration has traditionally been built around APIs. Applications send structured requests, services process them, and predictable responses are returned. This model has supported everything from payment processing and customer portals to mobile applications and large-scale system integrations. The rise of AI agents introduces a different integration challenge. An AI agent does not always follow a fixed sequence designed in advance. It may need to determine which system to use, discover the operations available to it, gather relevant context, and select the appropriate action based on a user’s request. This is where the Model Context Protocol, or MCP, becomes relevant. MCP and traditional APIs are related, but they solve different problems. APIs expose system capabilities. MCP provides a standardized way for AI applications to discover and use those capabilities as tools and contextual resources. Understanding this distinction is important when designing enterprise AI solut...
Read more