Hi,

I am having problems using the jquery autocomplete ui feature in a Visualforce custom component. I have a working prototype of the autocomplete which is in a VF page, but when I moved it into a custom component I get a message like this:

Uncaught TypeError: j$(...).autocomplete is not a function

I believe this error means that the jquery UI library has not been included, but in my case it has been. 

Any ideas why this might be? Here is the component code excerpt:

<apex:component controller="AttendeesController">
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" />
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js" />
    <apex:styleSheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/smoothness/jquery-ui.css" />

    <style>
        .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>
    
    <apex:attribute name="attrMeetingId"
                        assignTo="{!meetingId}"
                        description="The ID of the meeting (not required when meeting is new)"
                        type="Id"
                        required="false"/>

    <apex:attribute name="attrMeetingMode"
                        assignTo="{!meetingMode}"
                        description="The mode when using this component: New, View or Edit"
                        type="String"
                        required="true"/>
 
     <apex:attribute name="attrAttendees"
                        assignTo="{!attendees}"
                        description="Attendees returned to the calling page"
                        type="Attendee__c[]"
                        required="false"/>
                                           
	<apex:pageBlock mode="detail" title="{!attendeeTitle}">
        <apex:pageBlockSection id="searchSection" columns="1" >
           	<apex:outputPanel >
              	<apex:inputText id="attendeeTextBoxId" value="{!searchTerm}" styleClass="placeHolder"/>
               	<apex:inputHidden id="searchAttendeeId" value="{!selectedAttendee}" />
           	</apex:outputPanel>
        </apex:pageBlockSection>	
	</apex:pageBlock>

    <script type="text/javascript">
    	var j$ = jQuery.noConflict();

		j$(document).ready(function() {
    
	        var PLACEHOLDER = 'New Attendee Name'; 
	        var attendeeObjects;
	        var queryTerm;
	        
	        j$('[id$=attendeeTextBoxId]').autocomplete({
	            minLength: 2,
	            source: function(request, response) {
	                        queryTerm = request.term;
	                        Minutz.AutoCompleteController.searchAttendee(request.term, function(result, event){
	                            if(event.type == 'exception') {
	                                alert(event.message);
	                            } else {
	                                attendeeObjects = result;
	                                response(attendeeObjects);
	                            }
	                        });
	                   },
	            focus: function( event, ui ) {
	                    j$('[id$=attendeeTextBoxId]').val( ui.item.Name );
	                    return false;
	                    },
	            select: function( event, ui ) {
	                        j$('[id$=attendeeTextBoxId]').val( ui.item.Name );
	                        j$('[id$=searchAttendeeId]').val( ui.item.Id );
	                        return false;
	                    },
	         })
	         .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
	            var entry = "<a>" + item.Name;
	            
	            entry = entry + "</a>";
	            entry = entry.replace(new RegExp(queryTerm,'gi'), "<b>" + queryTerm.toUpperCase() + "</b>");
	            return j$( "<li></li>" )
	                .data( "item.autocomplete", item )
	                .append( entry )
	                .appendTo( ul );
	        };
	            
	        // Add or remove placeholder values
	        j$('[id$=attendeeTextBoxId]').val(PLACEHOLDER);
	        j$('[id$=attendeeTextBoxId]').on("focus",  function(event){
	            j$tgt = j$(event.target);
	            if(j$tgt.val() === PLACEHOLDER ){
	                j$tgt.val('');
	                j$tgt.removeClass('placeHolder');
	            }
	        });		// END focus
	        
	        j$('[id$=attendeeTextBoxId]').on( "blur",  function(event){
	            j$tgt = j$(event.target);
	            if(j$tgt.val() === '' ){
	                j$tgt.val(PLACEHOLDER);
	                j$tgt.addClass('placeHolder');
	            }
	        });		// END blur
        
        });			// END Document Ready
        
    </script>
            
</apex:component>

Thanks in advance

Hi,

I have a VisualForce component that presents a SelectList of TimeZones using a jQuery dialog. I have used an "onChange" event on the SelectList with action support that attempts to return the selected value using action support.

All seems to work ok, but the selected time zone does not appear to be set; at least it comes through as a null on the setter. 

I have tried all kinds of things but cannot get this to work properly - - I have used this technique successfully elsewhere, though not in a component.

Here are the relevant code excerpts:

The component
 

<apex:component controller="TimeZonePickerController">

    <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jquery-ui-1.12.1.custom/external/jquery/jquery.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jquery-ui-1.12.1.custom/jquery-ui.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jQuery, 'jquery-ui-1.12.1.custom/jquery-ui.css')}"/>
    

	<script>
    	// Create a new alias for jQuery (j$)
		var j$ = jQuery.noConflict();
	    
	    // When document loaded show the dialog
        j$(document).ready(function(){        
            j$("#dialog").dialog(
            {
                title:"Select a Time Zone",
                autoOpen: false,							
                width:510,
                height:70,
                modal:true,
                closeable:false,
                resizable:false,
                draggable:true
            });
            
            j$("#dialog").dialog('open');					
        }); 


        function closeTheDialog() {
            j$('#dialog').dialog('close');
        }


        function tzChanged(chosenTz) {    

	        // Perform the action - call to Apex
            doAction();
                                    
            // Close the dialog
            closeTheDialog();

        }            

	</script>

	<apex:attribute name="attrTimePickerData"
	    				assignTo="{!theData}"
	    				description=""
	                    type="TimePickerData"/>

                    
	<div id="dialog"> 
		<apex:outputPanel >	
			 
			<apex:selectList id="TimeZone" value="{!selectedTimeZoneStr}" size="1" onchange="tzChanged(this);">
				<apex:selectOptions value="{!TimeZones}"/>
			</apex:selectList>
 			
			<apex:actionFunction name="doAction" action="{!selectTz}"/>
								
		</apex:outputPanel>
	</div>
			
</apex:component>

The component controller:

public with sharing class TimeZonePickerController {

	public TimePickerData theData;
	public List<SelectOption> TimeZones {get; set;} 
	public String selectedTimeZoneStr; 
	private boolean timeZonesFetched = false;			

	public TimeZonePickerController() {
	}

	public TimePickerData getTheData() {
		return theData;		
	}

	public void setTheData(TimePickerData argTheData) {
		theData = argTheData;
		
		// Establish time picker settings for the given type 
		// (Using setter because it is the first time the class TimePickerData is populated)
		buildTimeZoneList();
		
		// Default timezone to user's if not already set
		if (string.isNotBlank(theData.selectedTimeZoneStr)) {
			selectedTimeZoneStr = theData.selectedTimeZoneStr;							
		} else {
			selectedTimeZoneStr = UserInfo.getTimeZone().getID();
		}			
	}	
	
	public String getSelectedTimeZoneStr() {
		return selectedTimeZoneStr;
	}

	public void setSelectedTimeZoneStr(String argSelectedTimeZoneStr) {
	
system.debug('---------- TZ PICKER COMPONENT - setSelectedTimeZoneStr: Start - Value: ' + argSelectedTimeZoneStr);
	
		selectedTimeZoneStr = argSelectedTimeZoneStr;
	
system.debug('---------- TZ PICKER COMPONENT - setSelectedTimeZoneStr - Value: ' + argSelectedTimeZoneStr);
			
		// Set the TimeZone as string and Timezone for return to calling page
		theData.selectedTimeZoneStr = selectedTimeZoneStr;									
//		theData.selectedTimeZone = TimeZone.getTimeZone(theData.selectedTimeZoneStr);									

system.debug('---------- TZ PICKER COMPONENT - setSelectedTimeZoneStr: End');
	}	

    public PageReference selectTz()
    {
		// Close the dialog - does this work?
		theData.displayTzPicker = false;

system.debug('---------- TZ PICKER COMPONENT - selectTz - Str value: ' + selectedTimeZoneStr);
system.debug('---------- TZ PICKER COMPONENT - selectTz - The Data value: ' + theData.selectedTimeZoneStr);
    
        return null;
    
    }

    public void buildTimeZoneList() {
    	
    	// Already fetched?
    	if (timeZonesFetched) {
    		return;
    	}

		// Build timezones
		TimeZones = new List<SelectOption>();
		Schema.DescribeFieldResult fieldResult = User.TimeZoneSidKey.getDescribe();			// Descibes the field in an object  (User in this case)
		List<Schema.PicklistEntry> PkListEntry = fieldResult.getPicklistValues();			// Returns the picklist options
		for( Schema.PicklistEntry  pkEnt : PkListEntry) {
			TimeZones.add(new SelectOption(pkEnt.getValue(), pkEnt.getLabel()));
		}       

		timeZonesFetched = true;


    }
	
}

NB: The component was working perfectly until I turned into a jQuery modal dialog!


 

I have a problem that is probably simple for anyone who knows jQuery (not me obviously):

I have created a TimePicker component that works really well on it's own, but I need to use the component multiple times on the same VF page, but with slightly different outcomes. The jQuery selector in my component refers to anything with the gven (selectedTime) which means that the last component on the page overwrites any previous component details

Here is my component

<apex:component controller="TimePickerController">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<apex:stylesheet value="{!URLFOR($Resource.TimePicker, 'jquery.timepicker.css')}"/>
	<script type="text/javascript" src="{!URLFOR($Resource.TimePicker, 'jquery.timepicker.js')}"></script>
	<script type="text/javascript" src="{!URLFOR($Resource.TimePicker, 'lib/bootstrap-datepicker.js')}"></script>
	<apex:stylesheet value="{!URLFOR($Resource.TimePicker, 'lib/bootstrap-datepicker.css')}"/>

    <script>
        function setFocusOnLoad() {}

	    j$= jQuery.noConflict();
		    j$(function(){
		    	j$("[id$='selectedTime']").timepicker({ 						
		    		"timeFormat": "{!timeFormat}",
    		   		"minTime": "{!minTime}",
    		   		"maxTime": "{!maxTime}",
    		   		"step": "{!step}",
    	   		});
    		});		
    </script>

	<apex:attribute name="attrTimePickerData"
	    				assignTo="{!theData}"
	    				description=""
	                    type="TimePickerData"/>

	<apex:outputPanel >		 
		<apex:inputText value="{!theData.selectedTimeStr}" id="selectedTime" style="width:75px; "/>
	</apex:outputPanel>
			
</apex:component>

Here are the component calls in my VF page, each with a different ID

<apex:outputPanel >
	<c:TimePicker id="MeetingStartTime" attrTimePickerData="{!timePickerDataTime}"/>
</apex:outputPanel>

<apex:outputPanel >
	<c:TimePicker id="MeetingDuration" attrTimePickerData="{!timePickerDataDuration}"/>
</apex:outputPanel>

Obviously the jQuery selector is just changing all instances of "selectedTime". How do I change the selector to include the id of the component? Or is there a better way of achieving this?

Thanks in advance

​

I want to create a component to set a field value in a pageblock section, any ideas how to do this? My inclination is something like this:
 

<apex:pageBlockSectionItem>
     <apex:outputLabel value="My Field Labell" />
     <apex:outputPanel>
          <c:MyComponent>
     </apex:outputPanel>
</apex:pageBlockSectionItem>

But I am not sure how I would use attributes like required="false" that you would usually use on an InputFIeld. Do I put this in the component?

Thanks

We are overhauling the branding on our application and want to make sure that we time the new Trialforce branding with the point our new app version is associated with the sign-up form. I have updated the Trialforce branding, but do not want to publish it yet in case it is applied to trial signups with the old branding - - we are 2 weeks away from the new app version being available in Trialforce.

So, the questions is, when I hit the publish button on the Trialforce branding, when is the new branding applied? Is it:
a. Immediately? OR
b. When I create the next trial template? OR
c. Some other point?

Thanks in advance

 

I have had multiple problems trying to implement a modal dialog. I almost have it working but have spent hours trying to fix simple problems:

• Buttons not firing action in component controller
• Help tooltips - Display behind the modal window
• Date Picker - displays behind the modal window
• Action support with rerender - does not appear to work
• Building page details on second/third display stuck with first display

Components seem a very clean way of implementing modal dialogs, but I think I will revert to including pages in my page, which I am told is far inferior to using components.

Any help on the above problems greatly appreciated.

Thanks
 

Hi,

Is there a way to "reset" a Visualforce component so that next time it is displayed it starts from the beginning and calls all getters are rerun?

I may have this wrong , but my component just keeps redisplaying without rebuilding the details.

Thanks

Hi,

I have a component which I want to conditionally display (as a modal dialog). It is all working fine, but the second, thrid call etc do NOT reset the attributes, the component seems stuck with the attributes from the first call.

Here is the component:

<apex:page Controller="DemoModalController" >
    <apex:pageMessages />
	<apex:form id="theForm">
		<h1>Demo Modal</h1>
		<apex:pageBlock id="thePageBlock2" >	
			<apex:inputField value="{!meetingItem.Meeting__c}" required="false"/>
		</apex:pageBlock>
		
		<apex:outputPanel id="itemPanel"> 		
			<apex:commandButton value="Open Dialog"
       		     	action="{!openCreateMeetingItem}" 
           		 	title="Open the modal dialog"
           		 	rerender="itemPanel"/>
	   
	   		<apex:outputPanel id="CreateMeetingItem" " >	            		 	
				<c:CreateMeetingItem rendered="{!displayModal.displayCreateMeetingItem}"
					displayModalObj="{!displayModal}" meetId="{!meetingID}" attendeeList="{!attendees}" itemVoterList="{!itemVoters}"/>
			</apex:outputPanel>		
		</apex:outputPanel>
	</apex:form>
</apex:page>

Is there a way to force the component to refresh?

Thanks in advance
 

Hi,

I have read lots of different posts, and tried lots of different varieties but whatever I do I cannot get commandbuttons to fire an apex method in my component.

Here is the main page:

<apex:page Controller="DemoModalController" sidebar="false" tabstyle="My_Meetings__tab" >
    <apex:pageMessages />
	<apex:form id="theForm">
		<h1>Demo Modal</h1>
		<p>Now is the time for all good men to come to arms</p>
		<apex:pageBlock id="theDialog" >
			<apex:commandButton value="Open Dialog"
		        		     	action="{!openDialog}" 
		            		 	title="Open the modal dialog"
		            		 	rerender="theDialog"/>

			<apex:outputPanel id="theDialog" rendered="{!demoDialogObj.displayDialog}" >
				<c:DemoDialog showDialogObj="{!demoDialogObj}" />
			</apex:outputPanel>
		</apex:pageBlock>
	</apex:form>
</apex:page>

And the main controller

public with sharing class DemoModalController {

	public demoModalDisplay demoDialogObj {get; set;}

    public DemoModalController()
    {
    	demoDialogObj = new demoModalDisplay();
    	demoDialogObj.displayDialog = false;
    }
	
    public PageReference openDialog()
    {            		
    	demoDialogObj.displayDialog = true;
	    return null;      
    }
}

The component page

<apex:component controller="DemoDialogController"
				allowDML="true">

    <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jquery-ui-1.12.1.custom/external/jquery/jquery.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jquery-ui-1.12.1.custom/jquery-ui.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jQuery, 'jquery-ui-1.12.1.custom/jquery-ui.css')}"/>

    <apex:attribute name="showDialogObj"
    				assignTo="{!demoDialogObj}"
    				description="Should the dialog be shown?"
                    type="DemoModalDIsplay"
                    required="true"/>
  
    <div id="dialog">
    
        <apex:pageMessages />

		<p>This dialog box has been created using a jQuery visualforce component!</p>

		<apex:pageBlock id="pageBlock">
		
			<apex:outputPanel id="counter" >
				<apex:actionRegion >
					<apex:outputText value="Click Me {!count}" />
					<apex:actionSupport event="onClick" action="{!incrementCounter}" rerender="counter" status="counterStatus"/>
				</apex:actionRegion>
        	</apex:outputPanel>
        	<apex:actionStatus id="counterStatus" startText=" (Incrementing...)" stopText=" (done)" />
			
			<br />	
			<br />	
			<apex:outputPanel id="actionF">
				<input type="button" value="Click for Action Function" onclick="doME();" />
				<apex:actionFunction name="doME" action="{!doNothing}" rerender="actionF" />
			</apex:outputPanel>
			
			<br />	
			<br />	
			<apex:commandButton value="Do Nothing"
			       		     	action="{!doNothing}" 
			           		 	title="Do nothing" 
			           		 	rerender="theForm"/>
			<br />
			<br />	
			<apex:commandLink value="Do Nothing"
			       		     	action="{!doNothing}" 
			           		 	title="Do nothing"
			           		 	reRender="me" />	 	
			<br /> 	
			<br />	
			<apex:commandButton value="Close Dialog"
			       		     	action="{!closeDialog}" 
			       		     	onClick="closeTheDialog()"
			           		 	title="Close the modal dialog" />
		</apex:pageBlock>	 		
    </div>	    

    <script type="text/javascript">       
     	// Create a new alias for jQuery (j$)
		var j$ = jQuery.noConflict();
	    
	    // When document loaded show the dialog
        j$(document).ready(function(){        
            j$("#dialog").dialog(
            {
                title:"<Dialog Title here>",
                autoOpen: false,							
                width:700,
                height:700,
                modal:true,
                closeable:false,
                resizable:false,
                draggable:true
            });
            
            j$("#dialog").dialog('open');	
        }); 
 
        function closeTheDialog()
        {
            j$('#dialog').dialog('close');
        }          
    </script>
</apex:component>

I have read that action regions can be used to solve the problem, but I cannot get them to work.

I have not been struggling with this for several weeks! Any help greatly appreciated.

Thanks
 

Hi,

I am trying to use a component as a modal dialog in an existing VF page with JQuery. I am having problems conditionally displaying the dialog and closing it properly again. I have used "rendered" with a boolean to determine whether to display the component, but am having problems when the modal is closed because the boolean is still set to true when the window is closed

Here is the page containing the component:

<apex:page Controller="DemoModalController">
	<apex:form >
		<h1>Demo Modal</h1>
		<p>Now is the time for all good men to come to arms</p>
		
		<apex:pageBlock id="theDialog" >
			<apex:commandButton value="Open Dialog"
		        		     	action="{!openDialog}" 
		            		 	title="Open the modal dialog"
		            		 	rerender="theDialog"/>
		    <br />
			<apex:commandButton value="Show displayDialog Value"
			       		     	action="{!showDisplayDialog}" 
			           		 	title="Show the value of displayDialog"/>

			<apex:outputPanel id="theDialog" rendered="{!displayDialog}" >
				<c:DemoDialog showDialog="{!displayDialog}" />
			</apex:outputPanel>
		</apex:pageBlock>

	</apex:form>

</apex:page>

And the controller

public with sharing class DemoModalController {

	public boolean displayDialog {get; set;}
	
    public DemoModalController()
    {
    	displayDialog = false;
    }
	
    public PageReference openDialog()
    {            		
		displayDialog = true;
	    return null;      
    }

    public PageReference showDisplayDialog()
    {
	    return null;      
    }	
}

And here is the component

<apex:component controller="DemoDialogController">

	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" />
	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js" />
	<apex:styleSheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/smoothness/jquery-ui.css" />

    <apex:attribute name="showDialog"
    				assignTo="{!displayDialog}"
    				description="Should the dialog be shown?"
                    type="boolean"
                    required="true"/>
                     
    <div id="dialog">
    
        <apex:pageMessages />

		<p>This dialog box has been created using a jQuery visualforce component!</p>
        
		<apex:commandButton value="No Nothing"
		       		     	action="{!doNothing}" 
		           		 	title="Do nothing"/>
		           		 	
		<apex:commandButton value="Close Dialog"
		       		     	action="{!closeDialog}" 
		       		     	onClick="closeTheDialog()"
		           		 	title="Close the modal dialog"/>

    </div>
	    
    <script type="text/javascript">
     
	var $j = jQuery.noConflict();
	    
        $j(document).ready(function(){
            $j("#dialog").dialog(
            {
                title: '<Dialog Title here>',
                width: 700,
                height: 700,
                modal:true,
                closeable:false,
                resizable:false,
                draggable:true
            });
        }); 
 
        function closeTheDialog()
        {
            $j('#dialog').dialog('close');
        }
            
    </script>

</apex:component>

And the component controller

public with sharing class DemoDialogController {

	public boolean displayDialog;
	
	public boolean getDisplayDialog() {
		return displayDialog;
	}
	
	public void setDisplayDialog(boolean argDisplayDialog) {
		displayDialog = argDisplayDialog;            	
	}	


    public PageReference doNothing()
    {
    	displayDialog = false;
	    return null;  
    }
	    
    public PageReference closeDialog()
    {
    	displayDialog = false;
	    return null;      
    } 
    
}

I think I have 2 ways of trying to solve this problem:

1. FInd another way to conditionally display the modal windor

OR

2. Update the boolean value in the component so that it is recognised by the controller

Any help greatly appreciated.


 

Am having problems positioning a pageBlockTable within a page. I have used the "align" property, but it is being ignored.

Here is a code excerpt:
 

<apex:pageBlock mode="maindetail">

		<apex:pageBlockTable value="{!voters}" var="voter" id="voterTable" align="center">
 
			<apex:column >
				<apex:facet name="header">
					<apex:outputText value="{!$ObjectType.Meeting_Item_Vote__c.fields.Voter_Name__c.label}" />
				</apex:facet>
				<apex:outputField value="{!voter.Attendee__c}" />
			</apex:column>

			<apex:column >
				<apex:facet name="header">
					<apex:outputText value="{!$ObjectType.Meeting_Item_Vote__c.fields.Voter_Name__c.label}" />
				</apex:facet>
				<apex:outputField value="{!voter.Voter_Name__c}" />
			</apex:column>
		
			<apex:column >
				<apex:facet name="header">
					<apex:outputText value="{!$ObjectType.Meeting_Item_Vote__c.fields.Proposed__c.label}" />
				</apex:facet>
				<apex:inputField value="{!voter.Proposed__c}" />
			</apex:column>	
		
			<apex:column >
				<apex:facet name="header">
					<apex:outputText value="{!$ObjectType.Meeting_Item_Vote__c.fields.Seconded__c.label}" />
				</apex:facet>
				<apex:inputField value="{!voter.Seconded__c}" />
			</apex:column>	
		
			<apex:column >
				<apex:facet name="header">
					<apex:outputText value="{!$ObjectType.Meeting_Item_Vote__c.fields.Vote_For__c.label}" />
				</apex:facet>
				<apex:inputField value="{!voter.Vote_For__c}" />
			</apex:column>	
		
			<apex:column >
				<apex:facet name="header">
					<apex:outputText value="{!$ObjectType.Meeting_Item_Vote__c.fields.Vote_Against__c.label}" />
				</apex:facet>
				<apex:inputField value="{!voter.Vote_Against__c}" />
			</apex:column>
		
			<apex:column >
				<apex:facet name="header">
					<apex:outputText value="{!$ObjectType.Meeting_Item_Vote__c.fields.Vote_Abstained__c.label}" />
				</apex:facet>
				<apex:inputField value="{!voter.Vote_Abstained__c}" />
			</apex:column>	
		
			<apex:column >
				<apex:facet name="header">
					<apex:outputText value="{!$ObjectType.Meeting_Item_Vote__c.fields.Vote_Absent__c.label}" />
				</apex:facet>
				<apex:inputField value="{!voter.Vote_Absent__c}" />
			</apex:column>
		
			<apex:column >
				<apex:facet name="header">
					<apex:outputText value="{!$ObjectType.Meeting_Item_Vote__c.fields.Proxy__c.label}" />
				</apex:facet>
				<apex:selectList value="{!voter.Proxy__c}" 
					multiselect="false" 
					size="1" 
					title="Select a proxy"
					rendered="{!voter.Vote_Absent__c}">
					<apex:selectOptions value="{!proxyList}"/>
				</apex:selectList>
			</apex:column>

		</apex:pageBlockTable>

	</apex:pageBlock>

Any ideas?

Ps: This pageBlockTable is within a VF component

Hi,

I am trying to pass parameters to a VF component, and build UI details when the controller is initialised. In my research I see that you cannot access component attributes in the constructor, and I have tried lots of ways to get around this. Currently trying to make actionSupport work but it is not firing.

I don't really care what method I use as long as it works

Here is my component

<apex:component controller="NamedVotesController">

    <!-- Attribute Definitions -->
    <apex:attribute name="meetId"
    				assignTo="{!meetingId}"
    				description="This is the meeting item ID"
                    type="Id" 
                    required="true"/>
    <apex:attribute name="meetItemId"
    				assignTo="{!meetingItemId}"
    				description="This is the meeting item ID"
                    type="Id" 
                    required="true"/> 

    <!-- Component Definition -->

	<apex:actionFunction name="buildDetails" action="{!buildVoterDetails}"/>    
   
	<apex:dataTable value="{!voters}" var="voter" id="voterTable"
		styleClass="tableClass">
		
		<apex:column >
			<apex:facet name="header">
				<apex:outputText value="{!$ObjectType.Meeting_Item_Vote__c.fields.Voter_Name__c.label}" />
			</apex:facet>
			<apex:outputField value="{!voter.Attendee__c}" />
		</apex:column>

		<apex:column >
			<apex:facet name="header">
				<apex:outputText value="{!$ObjectType.Meeting_Item_Vote__c.fields.Voter_Name__c.label}" />
			</apex:facet>
			<apex:outputField value="{!voter.Voter_Name__c}" />
		</apex:column>
		
		<apex:column >
			<apex:facet name="header">
				<apex:outputText value="{!$ObjectType.Meeting_Item_Vote__c.fields.Proposed__c.label}" />
			</apex:facet>
			<apex:inputField value="{!voter.Proposed__c}" />
		</apex:column>	
			
	</apex:dataTable>


</apex:component>

And here is the controller

public with sharing class NamedVotesController {

	// IDs - passed into controller using Attribute in NamedVotes component
	public ID meetingId;
	public ID meetingItemId {get; set;}

	private id meetId;

     public NamedVotesController()
    {
          DO SOMETHING
   	
    }


    public pageRreference buildVoterDetails()
    {

system.debug('----------- In buildVoterDetails, MeetingID: ' + meetingId);
system.debug('----------- In buildVoterDetails, theID: ' + theID);

		meetID = meetingId;
		

    	return null;
    }


    
}

Any assistance greatly appreciated

Some months ago I successfully created a "Profile Setting" for my packaged application, but I cannot remmeber how I created it.

Any ideas?

PS: I have read the literature but am still confused about whether a profile setting will update existing profiles with additional/changed custom object permission.

Hi,

I have an app that allows administrators to create users within the application to avoid forcing them to learn how to use Setup / Users. I have this working in a manage package which I now need to install in to a DE to get the application through security review. When I tried to upload the package into the DE the upload failed with this message: 

Invalid field UserPermissionsChatterAnswersUser

I have had to set many of the user permission fields to make this feature work. The permission fields I have used are in the following code exceprt:

newUser.UserPermissionsCallCenterAutoLogin = false;
newUser.UserPermissionsChatterAnswersUser = false;
newuser.UserPermissionsInteractionUser = false;
newUser.UserPermissionsKnowledgeUser = false;
newUser.UserPermissionsMarketingUser = false;
newUser.UserPermissionsMobileUser = false;
newUser.UserPermissionsOfflineUser = false;
newUser.UserPermissionsSFContentUser = false;
newUser.UserPermissionsSiteforceContributorUser = false;
newUser.UserPermissionsSiteforcePublisherUser = false;
newUser.UserPermissionsSupportUser = false;

I could just comment out the offending field but a). that may cause other errors, and b). there may be other fields in the list that are invalid in different SF org levels.

I have read somewhere that I can use this notation:

newUser.put('UserPermissionsMarketingUser', true);

But I do not know if it will address the problem. I do not want to use trial and error, because it takes many steps and at least a day to create a new package and regression test.

Any ideas?

Thanks

Hi,

I am trying to call a simple js function to default a field value in VF from another field, but the js keeps telling me that the field I am trying to get is null. I have tried various ways to make this work; the current code is below.

The message I get is: TypeError: userNameFld is null​

</apex:form>
 <apex:pageBlock rendered="{!validPermissions}" mode="edit">

  <apex:pageBlockSection title="Create a New User" collapsible="false" columns="1">
                
     <apex:pageBlockSectionItem helptext="The User's email address" 
           rendered="{!NOT(fromEditPerson)}">          
        <apex:outputLabel value="Email Address"/>	
        <apex:inputField id="newEmailFld" value="{!newUser.Email}" 
  	            		onmouseout="defaultUsername();"
  	            		style="width: 250px !important;" required="true" />
      </apex:pageBlockSectionItem>

      <apex:pageBlockSectionItem helptext="The the user ID that the user will log in with">          
        <apex:outputLabel value="User Name"/>	
        <apex:inputField id="userNameFld" value="{!newUser.Username}" style="width: 250px !important;" required="true" />
      </apex:pageBlockSectionItem>
               							
  </apex:pageBlockSection>
               
 </apex:pageBlock>
</apex:form>

<script type="text/javascript">
  function defaultUsername() {

        	var userNameFld = document.getElementById("userNameFld");
        	var newEmailFLD = document.getElementById("newEmailFld");

        	if (userNameFld.value === null) {
        		userNameFld.value = newEmailFLD.Value;
       		}
        }

</Script>

Any ideas?

Thanks
 

I am looking for a way to load a modal VF page that has its own controller. I have seen a good post that allows you to embed a separate VF page into the existing one, but it relies on having only one controller.

Any ideas how to do this?

Hi,

I have 2 pagBlockSections in the same pageBlock*, each with 3 columns that I need to align. I have tried many combinations, but whatever I do I cannot get them to align.

* I have to use 2 pageBlockSections becase VF will not allow a rerender with a RTF field.

Here is a sample of how the page renders:



Here is the code excerpt:

<apex:pageBlock id="AddnewItem" mode="edit" rendered="{!editMode && updateAllowed}">

	<apex:pageBlockSection id="newItemDetails" collapsible="false" title="Add New Item" columns="3">
				
	<!-- Row 1: Radio buttons to decide whether Action, Decision or Note -->
		<apex:pageBlockSectionItem >
			<apex:outputLabel value="" />			<!-- Dummy label to ensure that the radio buttons are positioned correctly -->
			<apex:actionRegion >
				<apex:selectRadio id="itemTypeOptions" label=" Type" value="{!selectedItemType}" layout="lineDirection" title="Select the type of item to add">
					<apex:actionSupport event="onchange" rerender="newItemDetails" />
					<apex:selectOption itemValue="Action" itemLabel="Action" title="This is the action title" />
					<apex:selectOption itemValue="Decision" itemLabel="Decision" title="This is the Decsion title" />
					<apex:selectOption itemValue="Note" itemLabel="Note" title="This is the Note title" />
           			</apex:selectRadio>
			</apex:actionRegion>
		</apex:pageBlockSectionItem>					
		<apex:pageBlockSectionItem />
		<apex:pageBlockSectionItem />

	<!-- Row 2: Agenda, Blank, Blank -->                        
		<apex:pageBlockSectionItem helptext="{!$ObjectType.Meeting_Item__c.fields.Agenda__c.InlineHelpText}">
			<apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Agenda__c.label}" for="agendaItem"></apex:outputLabel>
				<apex:selectList id="agendaItem" value="{!agendaItem}" size="1" title="Select the agenda item for this item">
			<apex:selectOptions value="{!agendaList}"></apex:selectOptions>
			</apex:selectList>
		</apex:pageBlockSectionItem>					
		<apex:pageBlockSectionItem />
		<apex:pageBlockSectionItem />
	   
	<!-- Row 3: Title, Blank, Add Decision / Note Button --> 					
		<apex:pageBlockSectionItem helptext="{!$ObjectType.Meeting_Item__c.fields.Title__c.InlineHelpText}">
			<apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Title__c.label}" />
			<apex:outputPanel styleClass="requiredInput" layout="block">
				<apex:outputPanel styleClass="requiredBlock" layout="block"/>
				<apex:inputField value="{!quickItem.Title__c}" required="false" style="width: 350px !important;"/>
			</apex:outputPanel>
		</apex:pageBlockSectionItem>
		<apex:pageBlockSectionItem />
		<apex:commandButton value="Add New {!selectedItemType}" action="{!addQuickItem}" 
			title="Add a new {!selectedItemType} to the new items list"  rendered="{!selectedItemType!='Action'}"/>  
		<apex:pageBlockSectionItem rendered="{!selectedItemType=='Action'}" />
							
	<!-- Row 4: Due Date, Assigned to, Add Action Button -->							
		<apex:pageBlockSectionItem rendered="{!selectedItemType=='Action'}" helptext="{!$ObjectType.Meeting_Item__c.fields.Due_Date__c.InlineHelpText}">
			<apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Due_Date__c.label}" />
			<apex:outputPanel styleClass="requiredInput" layout="block">
				<apex:outputPanel styleClass="requiredBlock" layout="block"/>
				<apex:inputField value="{!quickItem.Due_Date__c}" required="false" />
			</apex:outputPanel>
		</apex:pageBlockSectionItem>
						
		<!-- Attendee List drop down -->						
		<apex:pageBlockSectionItem helptext="{!$ObjectType.Meeting_Item__c.fields.Assigned_To__c.InlineHelpText}" rendered="{!selectedItemType=='Action'}">
			<apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Assigned_To__c.label}" for="attendee"></apex:outputLabel>
			<apex:outputPanel styleClass="requiredInput" layout="block">
				<apex:outputPanel styleClass="requiredBlock" layout="block"/>
				<apex:selectList id="attendee" value="{!assignedTo}" size="1" title="Select the owner of the action">
					<apex:selectOptions value="{!attendeeList}"></apex:selectOptions>
				</apex:selectList>
			</apex:outputPanel>
		</apex:pageBlockSectionItem>
 								
		<apex:commandButton value="Add New {!selectedItemType}" action="{!addQuickItem}" 
			title="Add a new {!selectedItemType} to the new items list" rendered="{!selectedItemType=='Action'}"/>
							
	<!-- Row 5: Description, blank, blank (In it's own pageBlock section to allow rerender to work above-->
	<apex:pageBlockSection collapsible="false" columns="3">											
		<apex:inputField value="{!quickItem.Description__c}" style="width: 350px !important;" />			
		<apex:pageBlockSectionItem />	                                                                  
		<apex:pageBlockSectionItem />	                                                                                                                                    
	</apex:pageBlockSection>

</apex:pageBlock>

Any ideas?

Thanks

 

Hi,

I am trying to display radio buttons within a pageBlockSection along with other fields and am having a few basic display problems:

1. The label does not display for the set of 3 radio buttons
3.  The tooltip does not display for each radio button (Title attribute)
2. The radio buttons are aligned far left - I want them to display in the first colum of the pageBlockSection

VFcode excerpt

apex:pageBlockSection id="newItemDetails" collapsible="false" title="Add New Item" columns="3">

  <apex:actionRegion >
	<apex:pageBlockSectionItem >
		<apex:selectRadio id="itemTypeOptions" label="Type" value="{!selectedItemType}">
			<apex:actionSupport event="onchange" rerender="newItemDetails" />
			<apex:selectOption itemValue="Action" itemLabel="Action" title="This is an action" />
			<apex:selectOption itemValue="Decision" itemLabel="Decision" title="This is a Decsion" />
			<apex:selectOption itemValue="Note" itemLabel="Note" title="This is a Note" />
           </apex:selectRadio>
     </apex:pageBlockSectionItem>
  </apex:actionRegion>
						
  <apex:pageBlockSectionItem />
  <apex:pageBlockSectionItem />

</apex:pageBlockSection>

Any ideas?


 

Hi,

I have spent the better part of a day trying to get a new Auto Complete feature working using jQuery based on a post I read (http://anupjadhav.com/2013/02/01/jquery-autocomplete/)

The problem is that jQuery cannot find my controller, I get this error in the web console: ReferenceError: AutoCompleteController is not defined

Here is my VF page source

<apex:page Controller="AutoCompleteController" >

    <apex:pageMessages />

	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" />
	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js" />
	<apex:styleSheet value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/smoothness/jquery-ui.css" />

	
	<style>
	    .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>
	

	
	<apex:form id="autoCompleteForm" >
	        
	    <apex:pageBlock id="searchBlock" >
	        <apex:pageBlockSection id="searchSection" title="Find Attendee" columns="1" >
	             <apex:outputLabel value="Attendee Name" for="attendeeBox" />
	             <apex:outputPanel >
	                 <apex:inputText id="attendeeTextBox" value="{!searchTerm}" styleClass="placeHolder"/>
	                 <apex:inputHidden id="searchAttendeeId" value="{!selectedAttendee}" />
	             </apex:outputPanel>
	        </apex:pageBlockSection>
	    </apex:pageBlock>
	    
	    <apex:commandButton value="Exit" action="{!exit}" />
	    
	</apex:form>


	<script type="text/javascript">
	    var PLACEHOLDER = 'Enter Attendee Name Here'; 
	    var attendeeObjects;
	    var queryTerm;
	    
	    $('[id$=attendeeTextBox]').autocomplete({
	        minLength: 2,
	        source: function(request, response) {
	                    queryTerm = request.term;
	                    alert('BEFORE call to SearchAttendee');
	                    AutoCompleteController.searchAttendee(request.term, function(result, event){
	                    	alert('AFTER call to SearchAttendee');
	                        if(event.type == 'exception') {
	                        	alert(event.message);
	                        } else {
	                    		alert('NO exception');
	                            attendeeObjects = result;
	                            response(attendeeObjects);
	                        }
	                    });
	               },
	        focus: function( event, ui ) {
	                $('[id$=attendeeTextBox]').val( ui.item.Name );
	                return false;
	                },
	        select: function( event, ui ) {
	                    $('[id$=attendeeTextBox]').val( ui.item.Name );
	                    $('[id$=searchAttendeeId]').val( ui.item.Id );
	                    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$=attendeeTextBox]').val(PLACEHOLDER);
	    $('[id$=attendeeTextBox]').on("focus",  function(event){
	        $tgt = $(event.target);
	        if($tgt.val() === PLACEHOLDER ){
	            $tgt.val('');
	            $tgt.removeClass('placeHolder');
	        }
	    });
	    $('[id$=attendeeTextBox]').on( "blur",  function(event){
	        $tgt = $(event.target);
	        if($tgt.val() === '' ){
	            $tgt.val(PLACEHOLDER);
	            $tgt.addClass('placeHolder');
	        }
	    });
	</script>
</apex:page>

And here is my controller
 

public with sharing class AutoCompleteController {
    
    // Instance fields
    public String searchTerm {get; set;}
    public String selectedAttendee {get; set;}
    

   public AutoCompleteController()
    {
    }
     

    @RemoteAction
    public static List<Person__c> searchAttendee(String searchTerm) {


		list <Person__c> matchedPeople = [select Id, Name from Attendee__c where name like \'%' + String.escapeSingleQuotes(searchTerm) + '%\'');
        
        return matchedPeople;

    }

Any help gratefully accepted.


 

I have created a VF page and controller to add new user records, I am setting all relevant fields (I think), but I keep getting this error message:

Insert failed. First exception on row 0; first error: LICENSE_LIMIT_EXCEEDED, content feature license limit exceeded: []

I am setting profile, and have seen several posts that talk about setting the UserType but SF tells me that this field is not writeable.

I have plenty of licenses left in my dev org so not sure where the problem is. Am I missing a key field somewhere?

Here is the code excerpt:

// FIRST build default details based on current user		

// Establish current user and fetch details to copy
currentUser = [select CompanyName,					
				Country,											
				EmailEncodingKey,			
				LanguageLocaleKey,		
				LocaleSidKey,				
				TimeZoneSidKey,
				UserType				
			from User
				where id = :UserInfo.getUserId()];
						            	
// Copy to new user object
newUser = currentUser.clone(false, true);		

// Create all other details (NB: Fname, Lname, email in VF page)

// Set user licence and profile
 if (sysAdmin) {
 	newUser.ProfileId = sysAdminProfileID;	
 } else {
 	newUser.ProfileId = userProfileID;	 			
 }
 		
 // Set other fields
newUser.isActive = true;												
newUser.UserRole = null;												
newUser.UserName = newUser.Email;										
newUser.Alias = createUserAlias(newUser.FirstName, newUser.LastName);	
newUser.CommunityNickname = newUser.FirstName;							
newUser.ReceivesInfoEmails = false;										
newUser.ReceivesAdminInfoEmails = false;								
newUser.UserPreferencesApexPagesDeveloperMode = false;					
    
 // DML to ensure password generated 
Database.DMLOptions dmlo = new Database.DMLOptions();
dmlo.EmailHeader.triggerUserEmail = true;
dmlo.EmailHeader.triggerAutoResponseEmail= true;
newUser.setOptions(dmlo);

 try {
 	insert newUser;
 } catch (exception e) {
        ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.FATAL, e.getMessage()));
         return false; 			
 }

 

Hi,

I have a VisualForce component that presents a SelectList of TimeZones using a jQuery dialog. I have used an "onChange" event on the SelectList with action support that attempts to return the selected value using action support.

All seems to work ok, but the selected time zone does not appear to be set; at least it comes through as a null on the setter. 

I have tried all kinds of things but cannot get this to work properly - - I have used this technique successfully elsewhere, though not in a component.

Here are the relevant code excerpts:

The component
 

<apex:component controller="TimeZonePickerController">

    <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jquery-ui-1.12.1.custom/external/jquery/jquery.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jquery-ui-1.12.1.custom/jquery-ui.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jQuery, 'jquery-ui-1.12.1.custom/jquery-ui.css')}"/>
    

	<script>
    	// Create a new alias for jQuery (j$)
		var j$ = jQuery.noConflict();
	    
	    // When document loaded show the dialog
        j$(document).ready(function(){        
            j$("#dialog").dialog(
            {
                title:"Select a Time Zone",
                autoOpen: false,							
                width:510,
                height:70,
                modal:true,
                closeable:false,
                resizable:false,
                draggable:true
            });
            
            j$("#dialog").dialog('open');					
        }); 


        function closeTheDialog() {
            j$('#dialog').dialog('close');
        }


        function tzChanged(chosenTz) {    

	        // Perform the action - call to Apex
            doAction();
                                    
            // Close the dialog
            closeTheDialog();

        }            

	</script>

	<apex:attribute name="attrTimePickerData"
	    				assignTo="{!theData}"
	    				description=""
	                    type="TimePickerData"/>

                    
	<div id="dialog"> 
		<apex:outputPanel >	
			 
			<apex:selectList id="TimeZone" value="{!selectedTimeZoneStr}" size="1" onchange="tzChanged(this);">
				<apex:selectOptions value="{!TimeZones}"/>
			</apex:selectList>
 			
			<apex:actionFunction name="doAction" action="{!selectTz}"/>
								
		</apex:outputPanel>
	</div>
			
</apex:component>

The component controller:

public with sharing class TimeZonePickerController {

	public TimePickerData theData;
	public List<SelectOption> TimeZones {get; set;} 
	public String selectedTimeZoneStr; 
	private boolean timeZonesFetched = false;			

	public TimeZonePickerController() {
	}

	public TimePickerData getTheData() {
		return theData;		
	}

	public void setTheData(TimePickerData argTheData) {
		theData = argTheData;
		
		// Establish time picker settings for the given type 
		// (Using setter because it is the first time the class TimePickerData is populated)
		buildTimeZoneList();
		
		// Default timezone to user's if not already set
		if (string.isNotBlank(theData.selectedTimeZoneStr)) {
			selectedTimeZoneStr = theData.selectedTimeZoneStr;							
		} else {
			selectedTimeZoneStr = UserInfo.getTimeZone().getID();
		}			
	}	
	
	public String getSelectedTimeZoneStr() {
		return selectedTimeZoneStr;
	}

	public void setSelectedTimeZoneStr(String argSelectedTimeZoneStr) {
	
system.debug('---------- TZ PICKER COMPONENT - setSelectedTimeZoneStr: Start - Value: ' + argSelectedTimeZoneStr);
	
		selectedTimeZoneStr = argSelectedTimeZoneStr;
	
system.debug('---------- TZ PICKER COMPONENT - setSelectedTimeZoneStr - Value: ' + argSelectedTimeZoneStr);
			
		// Set the TimeZone as string and Timezone for return to calling page
		theData.selectedTimeZoneStr = selectedTimeZoneStr;									
//		theData.selectedTimeZone = TimeZone.getTimeZone(theData.selectedTimeZoneStr);									

system.debug('---------- TZ PICKER COMPONENT - setSelectedTimeZoneStr: End');
	}	

    public PageReference selectTz()
    {
		// Close the dialog - does this work?
		theData.displayTzPicker = false;

system.debug('---------- TZ PICKER COMPONENT - selectTz - Str value: ' + selectedTimeZoneStr);
system.debug('---------- TZ PICKER COMPONENT - selectTz - The Data value: ' + theData.selectedTimeZoneStr);
    
        return null;
    
    }

    public void buildTimeZoneList() {
    	
    	// Already fetched?
    	if (timeZonesFetched) {
    		return;
    	}

		// Build timezones
		TimeZones = new List<SelectOption>();
		Schema.DescribeFieldResult fieldResult = User.TimeZoneSidKey.getDescribe();			// Descibes the field in an object  (User in this case)
		List<Schema.PicklistEntry> PkListEntry = fieldResult.getPicklistValues();			// Returns the picklist options
		for( Schema.PicklistEntry  pkEnt : PkListEntry) {
			TimeZones.add(new SelectOption(pkEnt.getValue(), pkEnt.getLabel()));
		}       

		timeZonesFetched = true;


    }
	
}

NB: The component was working perfectly until I turned into a jQuery modal dialog!


 

Hi,

I have a rquirement to format a time which is given in HH:MM format (24-hour clock) into the user's locale. I assumed that there would be a fromat() method as the DateTime class does, but it does not exist.

Any ideas how I can do this?

Thanks

I have a packaged application that I wish to tailor for specific installations. For example, I want to customers to be able to include their own logos on printed output.

My application is packaged so all the components are locked down, so the static resources (in the example above), cannot be changed.

Any pointers? Not just with this example, but customizing SalesForce apps in general

Thanks in advance

Hi,

I have a VisualForce component that presents a SelectList of TimeZones using a jQuery dialog. I have used an "onChange" event on the SelectList with action support that attempts to return the selected value using action support.

All seems to work ok, but the selected time zone does not appear to be set; at least it comes through as a null on the setter. 

I have tried all kinds of things but cannot get this to work properly - - I have used this technique successfully elsewhere, though not in a component.

Here are the relevant code excerpts:

The component
 

<apex:component controller="TimeZonePickerController">

    <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jquery-ui-1.12.1.custom/external/jquery/jquery.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jquery-ui-1.12.1.custom/jquery-ui.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jQuery, 'jquery-ui-1.12.1.custom/jquery-ui.css')}"/>
    

	<script>
    	// Create a new alias for jQuery (j$)
		var j$ = jQuery.noConflict();
	    
	    // When document loaded show the dialog
        j$(document).ready(function(){        
            j$("#dialog").dialog(
            {
                title:"Select a Time Zone",
                autoOpen: false,							
                width:510,
                height:70,
                modal:true,
                closeable:false,
                resizable:false,
                draggable:true
            });
            
            j$("#dialog").dialog('open');					
        }); 


        function closeTheDialog() {
            j$('#dialog').dialog('close');
        }


        function tzChanged(chosenTz) {    

	        // Perform the action - call to Apex
            doAction();
                                    
            // Close the dialog
            closeTheDialog();

        }            

	</script>

	<apex:attribute name="attrTimePickerData"
	    				assignTo="{!theData}"
	    				description=""
	                    type="TimePickerData"/>

                    
	<div id="dialog"> 
		<apex:outputPanel >	
			 
			<apex:selectList id="TimeZone" value="{!selectedTimeZoneStr}" size="1" onchange="tzChanged(this);">
				<apex:selectOptions value="{!TimeZones}"/>
			</apex:selectList>
 			
			<apex:actionFunction name="doAction" action="{!selectTz}"/>
								
		</apex:outputPanel>
	</div>
			
</apex:component>

The component controller:

public with sharing class TimeZonePickerController {

	public TimePickerData theData;
	public List<SelectOption> TimeZones {get; set;} 
	public String selectedTimeZoneStr; 
	private boolean timeZonesFetched = false;			

	public TimeZonePickerController() {
	}

	public TimePickerData getTheData() {
		return theData;		
	}

	public void setTheData(TimePickerData argTheData) {
		theData = argTheData;
		
		// Establish time picker settings for the given type 
		// (Using setter because it is the first time the class TimePickerData is populated)
		buildTimeZoneList();
		
		// Default timezone to user's if not already set
		if (string.isNotBlank(theData.selectedTimeZoneStr)) {
			selectedTimeZoneStr = theData.selectedTimeZoneStr;							
		} else {
			selectedTimeZoneStr = UserInfo.getTimeZone().getID();
		}			
	}	
	
	public String getSelectedTimeZoneStr() {
		return selectedTimeZoneStr;
	}

	public void setSelectedTimeZoneStr(String argSelectedTimeZoneStr) {
	
system.debug('---------- TZ PICKER COMPONENT - setSelectedTimeZoneStr: Start - Value: ' + argSelectedTimeZoneStr);
	
		selectedTimeZoneStr = argSelectedTimeZoneStr;
	
system.debug('---------- TZ PICKER COMPONENT - setSelectedTimeZoneStr - Value: ' + argSelectedTimeZoneStr);
			
		// Set the TimeZone as string and Timezone for return to calling page
		theData.selectedTimeZoneStr = selectedTimeZoneStr;									
//		theData.selectedTimeZone = TimeZone.getTimeZone(theData.selectedTimeZoneStr);									

system.debug('---------- TZ PICKER COMPONENT - setSelectedTimeZoneStr: End');
	}	

    public PageReference selectTz()
    {
		// Close the dialog - does this work?
		theData.displayTzPicker = false;

system.debug('---------- TZ PICKER COMPONENT - selectTz - Str value: ' + selectedTimeZoneStr);
system.debug('---------- TZ PICKER COMPONENT - selectTz - The Data value: ' + theData.selectedTimeZoneStr);
    
        return null;
    
    }

    public void buildTimeZoneList() {
    	
    	// Already fetched?
    	if (timeZonesFetched) {
    		return;
    	}

		// Build timezones
		TimeZones = new List<SelectOption>();
		Schema.DescribeFieldResult fieldResult = User.TimeZoneSidKey.getDescribe();			// Descibes the field in an object  (User in this case)
		List<Schema.PicklistEntry> PkListEntry = fieldResult.getPicklistValues();			// Returns the picklist options
		for( Schema.PicklistEntry  pkEnt : PkListEntry) {
			TimeZones.add(new SelectOption(pkEnt.getValue(), pkEnt.getLabel()));
		}       

		timeZonesFetched = true;


    }
	
}

NB: The component was working perfectly until I turned into a jQuery modal dialog!


 

I have a problem that is probably simple for anyone who knows jQuery (not me obviously):

I have created a TimePicker component that works really well on it's own, but I need to use the component multiple times on the same VF page, but with slightly different outcomes. The jQuery selector in my component refers to anything with the gven (selectedTime) which means that the last component on the page overwrites any previous component details

Here is my component

<apex:component controller="TimePickerController">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<apex:stylesheet value="{!URLFOR($Resource.TimePicker, 'jquery.timepicker.css')}"/>
	<script type="text/javascript" src="{!URLFOR($Resource.TimePicker, 'jquery.timepicker.js')}"></script>
	<script type="text/javascript" src="{!URLFOR($Resource.TimePicker, 'lib/bootstrap-datepicker.js')}"></script>
	<apex:stylesheet value="{!URLFOR($Resource.TimePicker, 'lib/bootstrap-datepicker.css')}"/>

    <script>
        function setFocusOnLoad() {}

	    j$= jQuery.noConflict();
		    j$(function(){
		    	j$("[id$='selectedTime']").timepicker({ 						
		    		"timeFormat": "{!timeFormat}",
    		   		"minTime": "{!minTime}",
    		   		"maxTime": "{!maxTime}",
    		   		"step": "{!step}",
    	   		});
    		});		
    </script>

	<apex:attribute name="attrTimePickerData"
	    				assignTo="{!theData}"
	    				description=""
	                    type="TimePickerData"/>

	<apex:outputPanel >		 
		<apex:inputText value="{!theData.selectedTimeStr}" id="selectedTime" style="width:75px; "/>
	</apex:outputPanel>
			
</apex:component>

Here are the component calls in my VF page, each with a different ID

<apex:outputPanel >
	<c:TimePicker id="MeetingStartTime" attrTimePickerData="{!timePickerDataTime}"/>
</apex:outputPanel>

<apex:outputPanel >
	<c:TimePicker id="MeetingDuration" attrTimePickerData="{!timePickerDataDuration}"/>
</apex:outputPanel>

Obviously the jQuery selector is just changing all instances of "selectedTime". How do I change the selector to include the id of the component? Or is there a better way of achieving this?

Thanks in advance

​

Hi,

I have read lots of different posts, and tried lots of different varieties but whatever I do I cannot get commandbuttons to fire an apex method in my component.

Here is the main page:

<apex:page Controller="DemoModalController" sidebar="false" tabstyle="My_Meetings__tab" >
    <apex:pageMessages />
	<apex:form id="theForm">
		<h1>Demo Modal</h1>
		<p>Now is the time for all good men to come to arms</p>
		<apex:pageBlock id="theDialog" >
			<apex:commandButton value="Open Dialog"
		        		     	action="{!openDialog}" 
		            		 	title="Open the modal dialog"
		            		 	rerender="theDialog"/>

			<apex:outputPanel id="theDialog" rendered="{!demoDialogObj.displayDialog}" >
				<c:DemoDialog showDialogObj="{!demoDialogObj}" />
			</apex:outputPanel>
		</apex:pageBlock>
	</apex:form>
</apex:page>

And the main controller

public with sharing class DemoModalController {

	public demoModalDisplay demoDialogObj {get; set;}

    public DemoModalController()
    {
    	demoDialogObj = new demoModalDisplay();
    	demoDialogObj.displayDialog = false;
    }
	
    public PageReference openDialog()
    {            		
    	demoDialogObj.displayDialog = true;
	    return null;      
    }
}

The component page

<apex:component controller="DemoDialogController"
				allowDML="true">

    <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jquery-ui-1.12.1.custom/external/jquery/jquery.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jquery-ui-1.12.1.custom/jquery-ui.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jQuery, 'jquery-ui-1.12.1.custom/jquery-ui.css')}"/>

    <apex:attribute name="showDialogObj"
    				assignTo="{!demoDialogObj}"
    				description="Should the dialog be shown?"
                    type="DemoModalDIsplay"
                    required="true"/>
  
    <div id="dialog">
    
        <apex:pageMessages />

		<p>This dialog box has been created using a jQuery visualforce component!</p>

		<apex:pageBlock id="pageBlock">
		
			<apex:outputPanel id="counter" >
				<apex:actionRegion >
					<apex:outputText value="Click Me {!count}" />
					<apex:actionSupport event="onClick" action="{!incrementCounter}" rerender="counter" status="counterStatus"/>
				</apex:actionRegion>
        	</apex:outputPanel>
        	<apex:actionStatus id="counterStatus" startText=" (Incrementing...)" stopText=" (done)" />
			
			<br />	
			<br />	
			<apex:outputPanel id="actionF">
				<input type="button" value="Click for Action Function" onclick="doME();" />
				<apex:actionFunction name="doME" action="{!doNothing}" rerender="actionF" />
			</apex:outputPanel>
			
			<br />	
			<br />	
			<apex:commandButton value="Do Nothing"
			       		     	action="{!doNothing}" 
			           		 	title="Do nothing" 
			           		 	rerender="theForm"/>
			<br />
			<br />	
			<apex:commandLink value="Do Nothing"
			       		     	action="{!doNothing}" 
			           		 	title="Do nothing"
			           		 	reRender="me" />	 	
			<br /> 	
			<br />	
			<apex:commandButton value="Close Dialog"
			       		     	action="{!closeDialog}" 
			       		     	onClick="closeTheDialog()"
			           		 	title="Close the modal dialog" />
		</apex:pageBlock>	 		
    </div>	    

    <script type="text/javascript">       
     	// Create a new alias for jQuery (j$)
		var j$ = jQuery.noConflict();
	    
	    // When document loaded show the dialog
        j$(document).ready(function(){        
            j$("#dialog").dialog(
            {
                title:"<Dialog Title here>",
                autoOpen: false,							
                width:700,
                height:700,
                modal:true,
                closeable:false,
                resizable:false,
                draggable:true
            });
            
            j$("#dialog").dialog('open');	
        }); 
 
        function closeTheDialog()
        {
            j$('#dialog').dialog('close');
        }          
    </script>
</apex:component>

I have read that action regions can be used to solve the problem, but I cannot get them to work.

I have not been struggling with this for several weeks! Any help greatly appreciated.

Thanks
 

Hi,

I am trying to use a component as a modal dialog in an existing VF page with JQuery. I am having problems conditionally displaying the dialog and closing it properly again. I have used "rendered" with a boolean to determine whether to display the component, but am having problems when the modal is closed because the boolean is still set to true when the window is closed

Here is the page containing the component:

<apex:page Controller="DemoModalController">
	<apex:form >
		<h1>Demo Modal</h1>
		<p>Now is the time for all good men to come to arms</p>
		
		<apex:pageBlock id="theDialog" >
			<apex:commandButton value="Open Dialog"
		        		     	action="{!openDialog}" 
		            		 	title="Open the modal dialog"
		            		 	rerender="theDialog"/>
		    <br />
			<apex:commandButton value="Show displayDialog Value"
			       		     	action="{!showDisplayDialog}" 
			           		 	title="Show the value of displayDialog"/>

			<apex:outputPanel id="theDialog" rendered="{!displayDialog}" >
				<c:DemoDialog showDialog="{!displayDialog}" />
			</apex:outputPanel>
		</apex:pageBlock>

	</apex:form>

</apex:page>

And the controller

public with sharing class DemoModalController {

	public boolean displayDialog {get; set;}
	
    public DemoModalController()
    {
    	displayDialog = false;
    }
	
    public PageReference openDialog()
    {            		
		displayDialog = true;
	    return null;      
    }

    public PageReference showDisplayDialog()
    {
	    return null;      
    }	
}

And here is the component

<apex:component controller="DemoDialogController">

	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" />
	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js" />
	<apex:styleSheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/smoothness/jquery-ui.css" />

    <apex:attribute name="showDialog"
    				assignTo="{!displayDialog}"
    				description="Should the dialog be shown?"
                    type="boolean"
                    required="true"/>
                     
    <div id="dialog">
    
        <apex:pageMessages />

		<p>This dialog box has been created using a jQuery visualforce component!</p>
        
		<apex:commandButton value="No Nothing"
		       		     	action="{!doNothing}" 
		           		 	title="Do nothing"/>
		           		 	
		<apex:commandButton value="Close Dialog"
		       		     	action="{!closeDialog}" 
		       		     	onClick="closeTheDialog()"
		           		 	title="Close the modal dialog"/>

    </div>
	    
    <script type="text/javascript">
     
	var $j = jQuery.noConflict();
	    
        $j(document).ready(function(){
            $j("#dialog").dialog(
            {
                title: '<Dialog Title here>',
                width: 700,
                height: 700,
                modal:true,
                closeable:false,
                resizable:false,
                draggable:true
            });
        }); 
 
        function closeTheDialog()
        {
            $j('#dialog').dialog('close');
        }
            
    </script>

</apex:component>

And the component controller

public with sharing class DemoDialogController {

	public boolean displayDialog;
	
	public boolean getDisplayDialog() {
		return displayDialog;
	}
	
	public void setDisplayDialog(boolean argDisplayDialog) {
		displayDialog = argDisplayDialog;            	
	}	


    public PageReference doNothing()
    {
    	displayDialog = false;
	    return null;  
    }
	    
    public PageReference closeDialog()
    {
    	displayDialog = false;
	    return null;      
    } 
    
}

I think I have 2 ways of trying to solve this problem:

1. FInd another way to conditionally display the modal windor

OR

2. Update the boolean value in the component so that it is recognised by the controller

Any help greatly appreciated.


 

Some months ago I successfully created a "Profile Setting" for my packaged application, but I cannot remmeber how I created it.

Any ideas?

PS: I have read the literature but am still confused about whether a profile setting will update existing profiles with additional/changed custom object permission.

Hi,

I have an app that allows administrators to create users within the application to avoid forcing them to learn how to use Setup / Users. I have this working in a manage package which I now need to install in to a DE to get the application through security review. When I tried to upload the package into the DE the upload failed with this message: 

Invalid field UserPermissionsChatterAnswersUser

I have had to set many of the user permission fields to make this feature work. The permission fields I have used are in the following code exceprt:

newUser.UserPermissionsCallCenterAutoLogin = false;
newUser.UserPermissionsChatterAnswersUser = false;
newuser.UserPermissionsInteractionUser = false;
newUser.UserPermissionsKnowledgeUser = false;
newUser.UserPermissionsMarketingUser = false;
newUser.UserPermissionsMobileUser = false;
newUser.UserPermissionsOfflineUser = false;
newUser.UserPermissionsSFContentUser = false;
newUser.UserPermissionsSiteforceContributorUser = false;
newUser.UserPermissionsSiteforcePublisherUser = false;
newUser.UserPermissionsSupportUser = false;

I could just comment out the offending field but a). that may cause other errors, and b). there may be other fields in the list that are invalid in different SF org levels.

I have read somewhere that I can use this notation:

newUser.put('UserPermissionsMarketingUser', true);

But I do not know if it will address the problem. I do not want to use trial and error, because it takes many steps and at least a day to create a new package and regression test.

Any ideas?

Thanks

Hi,

I am trying to call a simple js function to default a field value in VF from another field, but the js keeps telling me that the field I am trying to get is null. I have tried various ways to make this work; the current code is below.

The message I get is: TypeError: userNameFld is null​

</apex:form>
 <apex:pageBlock rendered="{!validPermissions}" mode="edit">

  <apex:pageBlockSection title="Create a New User" collapsible="false" columns="1">
                
     <apex:pageBlockSectionItem helptext="The User's email address" 
           rendered="{!NOT(fromEditPerson)}">          
        <apex:outputLabel value="Email Address"/>	
        <apex:inputField id="newEmailFld" value="{!newUser.Email}" 
  	            		onmouseout="defaultUsername();"
  	            		style="width: 250px !important;" required="true" />
      </apex:pageBlockSectionItem>

      <apex:pageBlockSectionItem helptext="The the user ID that the user will log in with">          
        <apex:outputLabel value="User Name"/>	
        <apex:inputField id="userNameFld" value="{!newUser.Username}" style="width: 250px !important;" required="true" />
      </apex:pageBlockSectionItem>
               							
  </apex:pageBlockSection>
               
 </apex:pageBlock>
</apex:form>

<script type="text/javascript">
  function defaultUsername() {

        	var userNameFld = document.getElementById("userNameFld");
        	var newEmailFLD = document.getElementById("newEmailFld");

        	if (userNameFld.value === null) {
        		userNameFld.value = newEmailFLD.Value;
       		}
        }

</Script>

Any ideas?

Thanks
 

I am looking for a way to load a modal VF page that has its own controller. I have seen a good post that allows you to embed a separate VF page into the existing one, but it relies on having only one controller.

Any ideas how to do this?

Hi,

I have 2 pagBlockSections in the same pageBlock*, each with 3 columns that I need to align. I have tried many combinations, but whatever I do I cannot get them to align.

* I have to use 2 pageBlockSections becase VF will not allow a rerender with a RTF field.

Here is a sample of how the page renders:



Here is the code excerpt:

<apex:pageBlock id="AddnewItem" mode="edit" rendered="{!editMode && updateAllowed}">

	<apex:pageBlockSection id="newItemDetails" collapsible="false" title="Add New Item" columns="3">
				
	<!-- Row 1: Radio buttons to decide whether Action, Decision or Note -->
		<apex:pageBlockSectionItem >
			<apex:outputLabel value="" />			<!-- Dummy label to ensure that the radio buttons are positioned correctly -->
			<apex:actionRegion >
				<apex:selectRadio id="itemTypeOptions" label=" Type" value="{!selectedItemType}" layout="lineDirection" title="Select the type of item to add">
					<apex:actionSupport event="onchange" rerender="newItemDetails" />
					<apex:selectOption itemValue="Action" itemLabel="Action" title="This is the action title" />
					<apex:selectOption itemValue="Decision" itemLabel="Decision" title="This is the Decsion title" />
					<apex:selectOption itemValue="Note" itemLabel="Note" title="This is the Note title" />
           			</apex:selectRadio>
			</apex:actionRegion>
		</apex:pageBlockSectionItem>					
		<apex:pageBlockSectionItem />
		<apex:pageBlockSectionItem />

	<!-- Row 2: Agenda, Blank, Blank -->                        
		<apex:pageBlockSectionItem helptext="{!$ObjectType.Meeting_Item__c.fields.Agenda__c.InlineHelpText}">
			<apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Agenda__c.label}" for="agendaItem"></apex:outputLabel>
				<apex:selectList id="agendaItem" value="{!agendaItem}" size="1" title="Select the agenda item for this item">
			<apex:selectOptions value="{!agendaList}"></apex:selectOptions>
			</apex:selectList>
		</apex:pageBlockSectionItem>					
		<apex:pageBlockSectionItem />
		<apex:pageBlockSectionItem />
	   
	<!-- Row 3: Title, Blank, Add Decision / Note Button --> 					
		<apex:pageBlockSectionItem helptext="{!$ObjectType.Meeting_Item__c.fields.Title__c.InlineHelpText}">
			<apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Title__c.label}" />
			<apex:outputPanel styleClass="requiredInput" layout="block">
				<apex:outputPanel styleClass="requiredBlock" layout="block"/>
				<apex:inputField value="{!quickItem.Title__c}" required="false" style="width: 350px !important;"/>
			</apex:outputPanel>
		</apex:pageBlockSectionItem>
		<apex:pageBlockSectionItem />
		<apex:commandButton value="Add New {!selectedItemType}" action="{!addQuickItem}" 
			title="Add a new {!selectedItemType} to the new items list"  rendered="{!selectedItemType!='Action'}"/>  
		<apex:pageBlockSectionItem rendered="{!selectedItemType=='Action'}" />
							
	<!-- Row 4: Due Date, Assigned to, Add Action Button -->							
		<apex:pageBlockSectionItem rendered="{!selectedItemType=='Action'}" helptext="{!$ObjectType.Meeting_Item__c.fields.Due_Date__c.InlineHelpText}">
			<apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Due_Date__c.label}" />
			<apex:outputPanel styleClass="requiredInput" layout="block">
				<apex:outputPanel styleClass="requiredBlock" layout="block"/>
				<apex:inputField value="{!quickItem.Due_Date__c}" required="false" />
			</apex:outputPanel>
		</apex:pageBlockSectionItem>
						
		<!-- Attendee List drop down -->						
		<apex:pageBlockSectionItem helptext="{!$ObjectType.Meeting_Item__c.fields.Assigned_To__c.InlineHelpText}" rendered="{!selectedItemType=='Action'}">
			<apex:outputLabel value="{!$ObjectType.Meeting_Item__c.fields.Assigned_To__c.label}" for="attendee"></apex:outputLabel>
			<apex:outputPanel styleClass="requiredInput" layout="block">
				<apex:outputPanel styleClass="requiredBlock" layout="block"/>
				<apex:selectList id="attendee" value="{!assignedTo}" size="1" title="Select the owner of the action">
					<apex:selectOptions value="{!attendeeList}"></apex:selectOptions>
				</apex:selectList>
			</apex:outputPanel>
		</apex:pageBlockSectionItem>
 								
		<apex:commandButton value="Add New {!selectedItemType}" action="{!addQuickItem}" 
			title="Add a new {!selectedItemType} to the new items list" rendered="{!selectedItemType=='Action'}"/>
							
	<!-- Row 5: Description, blank, blank (In it's own pageBlock section to allow rerender to work above-->
	<apex:pageBlockSection collapsible="false" columns="3">											
		<apex:inputField value="{!quickItem.Description__c}" style="width: 350px !important;" />			
		<apex:pageBlockSectionItem />	                                                                  
		<apex:pageBlockSectionItem />	                                                                                                                                    
	</apex:pageBlockSection>

</apex:pageBlock>

Any ideas?

Thanks

 

Hi,

We have customers that desparately need spell checking switched on for rich text areas (our app produces meeting minutes). I have read several posts about using jquery to "switch on" the spellcheck attribute but cannot get it to work. I have never used jquery before so am probably making a very basic mistake.

Here are the relevant code excerpts
 

<apex:page Controller="NewMeetingController" tabstyle="My_Meetings__tab" sidebar="false" 
	deferLastCommandUntilReady="true">

	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
	<script>
		j$ = jQuery.noConflict();
		j$(document).ready(function() {
		j$('iframe[id*=meetingPurpose]').contents().find('body').attr('spellcheck','true');				
	   j$('iframe[id*=meetingOutcomes]').contents().find('body').attr('spellcheck','true');				
		});		
	</script>

etc..

     <apex:pageBlockSection id="meetingDescriptionsSection" title="Purpose & Outcomes" collapsible="false" columns="2" >          
          <apex:inputField value="{!series.Purpose__c}"  id="meetingPurpose" />
          <apex:inputField value="{!series.Outcomes__c}" id="meetingOutcomes"/>
     </apex:pageBlockSection>



And here is the page source excerptwith spell checker NOT enabled

<body id="j_id0:theForm:meetingDetailsBlock:meetingDescriptionsSection:meetingPurpose:textAreaDelegate_Purpose__c_rta_body" contenteditable="true" class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" spellcheck="false">sdfsdf dfsdf dsf ds</body>

Any ideas?
 

I've created a Visualforce page that lists a bunch of interview time slots with a link for people to reserve them. One of the columns is showing a date/time field. Since it is a public visualforce page, the date/time field defaults to GMT.

I would like to have a picklist containing all the time zones (worldwide), where the user selects their time zone from the list and then the date/time column updates to show the times based on the newly selected time zone.

I have gotten as far as creating the apex class and vf page which almost does the trick for the current system time (which is not very far!). I figure it's a good first step, but need some help as I'm stuck. I'm struggling to get the picklist value to pass into the timezone part of the apex class. Any ideas?

Thanks

Apex Class

public class ConvertTimeZone { 
    public String YourTimeZone {get;set;}
    public String tzOptions {get;set;}
    public String YourInterviewTime{get;set;}
    
    public List<SelectOption> getTimeZoneOptions() {
        List<SelectOption> tzOptions = new List<SelectOption>();
        tzOptions.add(new SelectOption('GMT','Greenwich Mean Time'));
        tzOptions.add(new SelectOption('Australia/Sydney','Australian Eastern Daylight Time'));
        tzOptions.add(new SelectOption('Asia/Kolkata','India Standard Time'));
 
        return tzOptions;
    }
    
    public ConvertTimeZone() {
    DateTime temp = System.now();
    YourInterviewTime = temp.format('dd/MM/yyyy HH:mm a z', 'tzOptions'); 
    }
}

VF Page

<apex:page controller="ConvertTimeZone">

<apex:form >
    <apex:pageBlock title="Custom PickList Demo" id="out">
        
        <apex:pageBlockSection title="Custom Picklist Using selectList and selectOption" collapsible="false">
            <apex:actionRegion >
            <apex:selectList value="{!YourTimeZone}" multiselect="false" size="1">
                <apex:selectOptions value="{!TimeZoneOptions}"/>
            <apex:actionSupport event="onchange" rerender="yourtimezone" />
            </apex:selectList>
            </apex:actionRegion>
        <apex:actionRegion >
            <apex:outputText id="yourtimezone" value="{!YourTimeZone}" label="You have selected:"/>
        </apex:actionRegion>
        </apex:pageBlockSection>

        <apex:pageBlockSection >
        Resulting Time: <apex:actionRegion ><apex:outputText id="yourtimezone" value="{!YourInterviewTime}"/></apex:actionRegion>
        </apex:pageBlockSection>
    </apex:pageblock>
  </apex:form>
</apex:page>

 

Good day Ladies and Gents.

I lay before you the fruit of many days of frustration, labor and tears, begging for your help.

There are a few moving parts here, so let me introduce them one by one, with nicknames.

TheVisualForcePage - A humble visualforce page, attached to standard controller User, with a custom extension.

TheVFExtensionCtrl - A braggadocious apex class, who wants the world to know how awesome it is(n't).

TheVFComponentOfDoom - A visualforce component with a custom Controller that exposes two very insubordinate Command buttons. In our case, this component exists to provide a re-usable "delete" button, associated logic and general frustration.

TheVFComponentCtrl - An apex class whose sole purpose in life is to delete an F'ing record. Like the fat kid at primary school sports day, it's main issue is that nobody calls on it. (and therein lies our problem)

To set the stage with these moving pieces, we should consider that the Visualforce page displays, depending on mode, a list of either makes, models or years of cars owned by the given user. Because in my fictional world, users may own multiple Ferrari F12 Berlinetta's (different colors of course.) We can safely assume that if one were to navigate to Farrari, and then Berlinetta, we would see at least one record displayed on our VF page. (2013 of course). These records are displayed in a custom list view format created by using an Apex:Repeat tag.

It's here where we discover our first problem. The list view has, as it's last column a series of "actions" like: "Sell", "Delete" (dear god, who would ever delete a Farrari f12???) and edit. Sell and Delete are command buttons exposed via our handy components. To simply this issue, lets pretend we only have a delete button.

Now, to the untrained, unsuspecting eye a visualforce component, with it's own controller invoked on a page during an Apex:Repeat loop doesn't sound all that complicated. Sure there's the issue of passing in an ID to the logic of the component controller, but that's time-tested, mother approved. Indeed, I thought I was, well, done with this until ...

As it turns out, pressing the delete button has a very curious set of consequences in this setup, consequences I can not fully explain, nor fix.

When you click on the delete command button, the page refreshes (yay, i want that!) However:

Detailed logging shows that the master vfpage's associated controller extension's constructor is executed. Without error
That the component's deleteThisCar method is Never invoked.
Visually, the page state has been lost. What do I mean? I mean that the page that was displaying years of Ferrari F12 Berlinetta's is now just blank, showing only the headers of the listview.

Not to be outdone by an overgrown java app, I've tried the following approaches:

Updating my code to use apex:ActionRegion tags around the components
Tried every damn combination of reRender on the command buttons. Curiously, this had the effect of not reloading the page, and not calling my apex method.
I said, F-IT loudly and refactored the code to not use a component -- invoking an action method directly on the master controller, but this also failed! causing the page to reload, without my action method being invoked
I have slept on the problem. (no joke, this usually works for me. I wake up with the answer.)
I have asked Co-workers to look at it. They suggested the actionRegion bit.
I tried giving up on my trusty commandButtons attempting to use a standard input button with an ActionFunction -- Curiously, this invokes the constructor of my component controller, but not the actual delete function.

Suffice it to say, that overgrown java app is raining on my day.

This feels like somehow the wrong form is being submitted, which is distinctly maddening because i've also rewritten the master vf page such that it had 2 forms (search in header, main page form) and 5 forms (Search in header, 1 form per "mode") Neither has worked.

I realize that it'd be hypocritical in the extreme if I posted this question without some kind of code attached, so here's the component and it's extension. The VF page itself is quite lengthy and I've not finished "sanitizing" it for public consumption.
 

<apex:component controller="ACE_DeleteCarCmpCtrl" allowDML="true">
<apex:attribute name="tv"
    description="ID of the Car model and year to display controls for."
    type="Id"
    required="false"
    assignTo="{!CarVersionId}"
/>
<apex:attribute name="t"
    description="ID of the Car model to display controls for."
    type="ACE_Track__c"
    required="false"
    assignTo="{!Car}"
/>


    <apex:outputPanel layout="block" id="theoutputpanel">
    <apex:actionRegion >
    <!-- <apex:actionFunction name="sayHello" action="{!deleteTrackOrVersion}" rerender="TrackVersionsForSelectedTrack" /> -->
        <apex:commandButton action="{!deleteCarOrYear}"
            value="Delete Car"
            rendered="{!IF(ISNULL(Car), false , true)}"
            styleClass="btn btn-sm btn-default"
            />
        <!-- <input type="button" class="submit" onclick="sayHello"/> -->
        <apex:commandButton action="{!deleteCarOrYear}"
            value="Delete Car Version"
            styleClass="btn btn-sm btn-default"
            rendered="{!IF(ISNULL(CarVersionId), false , true)}"
            rerender="nothing"
            />
    </apex:actionRegion>
    </apex:outputPanel>
</apex:component>

and the controller for it:

public with sharing class ACE_DeleteCarCmpCtrl {

Public ACE_Car_Version__c carVersion {get; set;}
Public Id carVersionId  {get; set { carVersionId = value; }}
Public ACE_Car__c car {get; set;}

public ACE_DeleteCarCmpCtrl() {
    system.debug('$$$$$$$$$$$$$$ : ' + ApexPages.currentPage().getParameters());
}

public PageReference deleteTrackOrVersion() {
    system.debug('************* : ' + ApexPages.currentPage().getParameters());
    try {
        if (car != null && carVersion != null) {
            throw new ACE_contentManagementLib.ContentManagementException('Both car and carVersion cannot be populated when invoking this component');
        } else if (carVersion == null && car == null) {
            throw new ACE_contentManagementLib.ContentManagementException('Both car and carVersion cannot be null when invoking this component');
        } else if (carVersion != null) {
            ACE_ContentManagementLib.deletecarVersion(carVersionId);
        } else if (car != null) {
            ACE_ContentManagementLib.deleteTrack(track);
        }
    } catch (ACE_ContentManagementLib.ContentManagementException e) {
        ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, e.getMessage()));
    }
    //return null;
    //Also tried null above. no joy.
    PageReference pageRef = new PageReference('/AwesomePage?id=' + UserInfo.getUserId() );
    system.debug('$$$$$$$$$$$$$$ : ' + ApexPages.currentPage().getParameters());
    pageRef.setRedirect(true);
    return pageRef;
}
}

 

Is it possible to add an image to static resources using apex code?

 

On a detail page I want to click a button that says upload image and store that image in static resources rather than in attachments on the individual record.

 

Is the possible and if so do you have any sample code?

Hi all,

 

I have a problem about upload file using apex:InputFile control, when i add this control (apex:InputFile) to form that uses renderer attribute, there is an error occurs:

apex:inputFile can not be used in conjunction with an action component, apex:commandButton or apex:commandLink that specifies a rerender or oncomplete attribute

 

Pls help me to solve this problem.