+ Start a Discussion
Andrea SloanAndrea Sloan 

Calendar picker

I am gettng VisualForce errors and don't know where I'm going wrong. I'm creating a Salesforce Visualforce page to allow user to alter the filter dates on reports even though I technically have these permissions closed down in Salesforce. Everything works except instead of asking users to insert their dates in the form which then inputs the result in Salesforce report Filter Fields, I 'd like them to select the calendar date through  a calendar picker which will get the results to the notes input location in the Salesforce report. (<input type="text" name="pv1" id="pv1" /> <br/>) This is the code I have which works without "input field" calendar picker code. I don't know how to incorporate this to the input field code. Also, within all my playing around with the coding, there were times when the system did not recognize my Opportunity.trave Date field from Opportunites. ( <apex:inputField value="{!Opportinity.Travel Date}" />) Probably a syntax error I don't know how to fix.
I understand I can do this either through a controller or through a salesforce binding date field.
I can't do this either way.

The latest message I got was this:
Error: Cyclic page or component references '/apex/Report_filtering_Form1' are not allowed

This message does not appear when I don't insert calendar picker coding. I need to call the report as that's where the dates will be inputted by the user.
I also added:

<apex:page standardController="Opportunity"> guessing that's it's required for the opportunity input field. Not sure if that is so or if I should take that out. It works fine without it if I remove the calendar pickiner coding out and just have ethe "insert text field" code.

I don't know how to write this. For now, I've only tried inserting the calendar picker coding in the first form below. The second one you'll see doesn't have it yet. Can someone please help me sort this out?
Code:
<apex:page >
  <br/>
  <B>Use the date fields below to view Travel Dates for a specific time period</B>
 
 
  <TABLE Border= "3" CELLSPACING="1" CELLPADDING="1">
  <br/>
  <CAPTION><B> Salesforce Reports </B></CAPTION>
 <br/>
 <TR>
  <TD ALIGN = "Center">
  <B>Opportunity Reports</B>
  </TD>
  <TD ALIGN = "Center">
  <B> Visit Summary Reports</B>
  </TD>
 </TR>
 
<TR>
  <TD>
 <apex:page standardController="Opportunity">
 
  <form method="get" action="/00OE0000002ujMC" >
  <B>New Confirmed/Travels (This Month)</B>
  <br/>
    <B>Date Ranges:</B>
    <br/>
    Travel Date From (MM/DD/YYYY):
       <input type="text" name="pv1" id="pv1" /> <br/>
    Travel Date To (MM/DD/YYYY):
   <apex:form>
   <apex:inputField value="{!Opportinity.Travel Date}" />
  </apex:form>
       <input type="text" name="pv2" id="pv2" />
       <br />
       <input type="submit" value="My Confirmed Travels" class="submit" />
</form>
  </apex:page>
 </TD>
    
  <TD>
  <form method="get" action="/00OE0000002us1h" >
   <B>New Visits</B>
  <br/>
    <B>Date Ranges:</B>
    <br/>
    Visit Activity Date From (MM/DD/YYYY):
       <input type="text" name="pv0" id="pv0" /><br />
    Visit Activity Date To (MM/DD/YYYY):
       <input type="text" name="pv1" id="pv1" />
       <br />
       <input type="submit" value="My Visits" class="submit" />
  </form>
</TD>
</TR>


</TABLE>

</apex:page>





 
Mathew Andresen 5Mathew Andresen 5
you need to have __C  appended to the end of all custom fields.  So if you have a custom field on an opportunity the to access the field you would use something like 

{!opportunity.TravelDate__c}  
So if you do <apex:inputfield value= "{!opportunity.traveldate}"/>

That should pull up your date picker.  This needs to be within apex form tags  <apex:form>

If you want to include data from fields into other fields, I think you might need to do a controller extension.  Then you could easily pass that data from the date picker into the text field.

 
Andrea SloanAndrea Sloan
Hi Mathew:

I just did this and still get an error. Please see screenshot. My travel date field is in fact two words. I don't have a controller. Don't know how to use them but not sure if it's necessary?

User-added image
 
Mathew Andresen 5Mathew Andresen 5
There are no spaces in API field names.  What you are thinking of is the field label (the part that is visible when users work on it).  You need the field name.  In the field name spaces are automatically replaces with _

So you would have {!opportunity.travel_date__C}  

Note I would strongly suggest working through the trailhead modules they will help with this stuff.  Also, if there is a part you are having a hard time with, comment out the rest of the info and just focus on the the part that you are having difficulties with, then slowly add more stuff in.  That way you can isolate problems.

Thanks,
Andrea SloanAndrea Sloan
Hi Mathew:

Once I had sent you out the message, I realized I had left a space and put the _ in but I'm still getting error messages. I've inserted a controller to the page which it didn't have. Not sure if I put it in the right place. Now my coding is per below. If we just focus on my first form (with opportunities as my second one will mirror image it later once this works) you can see that I've inserted it inside the first form. I'm getting an error message. See screenshot. (Yes, I will be doing some Trailhead modules on this but wanted to get this going for some mockups I wanted to present to my team. It's just frustrating as I'm beyond hte regular standard Salesforce usage and I know there's so much that can be done even with simple develpment type of coding) Thank you for your help.

My controller code is also on the second screenshot.:

<apex:page >
 <br/>
 <B>Use the date fields below to view Travel Dates for a specific time period</B>
 
 <TABLE Border= "3" CELLSPACING="1" CELLPADDING="1" columnClasses="red,green,blue">
<style>
blue
 {
background-color:green;
}
  </style>  
 <br/>
 <CAPTION><B> Salesforce Reports </B></CAPTION>
<br/>
 
     <TR>
     <TD ALIGN = "Center">
          <B>Opportunity Reports</B>
     </TD>
     <TD ALIGN = "Center">
          <B> Visit Summary Reports</B>
     </TD>
     </TR>
 
      <TR>
      <TD>
        <form method="get" action="/00OE0000002ujMC" >
          <B>New Confirmed/Travels (This Month)</B>
          <br/>
          
          <apex:page controller="opportunityController">
          <apex:form>
          Travel Date : <apex:inputField value="{!opp.Travel_Date__c}"/>
          </apex:form>
        </apex:page>
 
          
         
          <B>Date Ranges:</B>
          <br/>
          Travel Date From (MM/DD/YYYY):
          <input type="text" name="pv1" id="pv1" /> <br/>
          Travel Date To (MM/DD/YYYY):
          <input type="text" name="pv2" id="pv2" />
           <br />
          <input type="submit" value="My Confirmed Travels" class="submit" />
       </form>
      </TD>
    
      <TD>
        <form method="get" action="/00OE0000002us1h" >
          <B>New Visits</B>
          <br/>
          <B>Date Ranges:</B>
          <br/>
          
          Visit Activity Date From (MM/DD/YYYY):
          <input type="text" name="pv0" id="pv0" /><br />
          Visit Activity Date To (MM/DD/YYYY):
          <input type="text" name="pv1" id="pv1" />
          <br />
          <input type="submit" value="My Visits" class="submit" />
       </form>
       </TD>
       </TR>


</TABLE>



</apex:page>



User-added image



User-added image
Andrea SloanAndrea Sloan
Any idea why I would be getting the Clyclic Page error when I insert:

<apex:page standardController="opportunity">
      <apex:form>
          Travel Date : <apex:inputField value="{!opportunity.Travel_Date__c}"/>
      </apex:form>
    </apex:page>

?
Andrea SloanAndrea Sloan
Hi Matthew:

I am now successful at getting my calendar picket inside my form and the submit icon redirects me to the wanted report. I am no longer getting syntax errors. However, I want the result of my calendar date from and calendar date range to to update id="pv1" and id="pv2" in my report filters.
This does work without calendar picker. It does update hte date on the report filter as desired. It just doesn't update it when I have the calendar picket code. I wonder if I need to put some extra coding in front of he id="pv1" code on the VisualForce page?

For this code below with the calendar picker, the form works but the report filters don't get updated
 <form method="get" action="/00OE0000002ujMC" >
         <apex:form >
         <B>New Confirmed/Travels (This Month)</B>
         <BR/>
         <B>Date Ranges:</B>
         <BR/>
         Travel Date From:
         <apex:inputField value="{!opportunity.Travel_Date__c}" id="pv1"/><br/>
          Travel Date To:
         <apex:inputField value="{!opportunity.Travel_Date__c}"  id="pv2"/><br/>
         <br />
          <input type="submit" value="My Confirmed Travels" class="submit" />
          </apex:form>
          
          <br/>
        
       </form>
      </TD>

For this code below where the date is entered manually on the form, the dates of the form do get updated on the appropriate report filter. All works well but no calendar picker.

<TD>
        <form method="get" action="/00OE0000002us1h" >
          <B>New Visits</B>
          <br/>
          <B>Date Ranges:</B>
          <br/>
          Visit Activity Date From (MM/DD/YYYY):
          <input type="text" name="pv0" id="pv0" /><br />
          Visit Activity Date To (MM/DD/YYYY):
          <input type="text" name="pv1" id="pv1" />
          <br />
          <input type="submit" value="My Visits" class="submit" />
       </form>
       </TD>

Why does the report not update with te calendar picker?


 
Mathew Andresen 5Mathew Andresen 5
I think this is due to the mixing of html and visualforce.   Maybe try an <apex:command button> when submitting, and then use your controller to populate the URL with the appropriate action.  
Andrea SloanAndrea Sloan
Hi Matthew:

As a controller to grab the calendar picker date field I'm using:

<apex:page standardController="opportunity"> Is that okay or do I need to change this? It all works well on the form.
Where exactly are you suggesting I make a change, what type of Apex command button are you referring to? Sorry to a sk but its the first time I'm dong something like this and my develpment skills are not quite there.
Which line do I need to change?

<TD>
        <form method="get" action="/00OE0000002ujMC" >
         <apex:form >
         <B>New Confirmed/Travels (This Month)</B>
         <BR/>
         <B>Date Ranges:</B>
         <BR/>
         Travel Date From:
         <apex:inputField value="{!opportunity.Travel_Date__c}" id="pv1"/><br/>
          Travel Date To:
         <apex:inputField value="{!opportunity.Travel_Date__c}"  id="pv2"/><br/>
         <br />
          <input type="submit" value="My Confirmed Travels" class="submit" />
          </apex:form>
          
          <br/>
        
       </form>
      </TD>
Mathew Andresen 5Mathew Andresen 5
Sorry I should be more precise, you would need a controller extension to extend the functionality of the standard controller. 

https://developer.salesforce.com/docs/atlas.en-us.198.0.pages.meta/pages/pages_controller.htm

Basically I think the report isn't getting the data from your apex:inputfields.   

If this is too much work, you might also try something like

<form>
  Birthday:
  <input type="date" name="bday">
</form>

That is closer to the way you were doing stuff orginally 

http://www.w3schools.com/html/html_form_input_types.asp

I'm more used to using the Visualforce stuff so that's where I usually lean towards a solution.
Andrea SloanAndrea Sloan
I know I had previusly tried <input type="date" name="bday">but this did not work with the calendar picker. I was forced to insert apex:inputfield value to grab the calendar picker field.

I'll read up on the link you sent me but is hte extension controller an additional field I'll need to save as a class or just input it inside this page? I'm guessing I'll have to save it as a class?
Mathew Andresen 5Mathew Andresen 5
yes it's a whole seperarte class that you would have to create.

I also suggest doing the trail heads on apex and visualforce
Andrea SloanAndrea Sloan
Hi Matthew:

So after a lot of playing around with my code, I now have the code I'm posting below. I received help in inserting the JAVA script at the beginning which is a calendar picker as a stylesheet from the web. Let me note that my data entried inside the form all passes through correctly into the desired report. THere's nothing to change from that end. HOWEVER... my table below has currently 6 cells (3 rows of 2). The calendar picker is only kicking off in the first cell and not hte other cells. I am STILL able to manually enter a date in all the other cells and the date goes through to my report but I need help in getting the calendar picker to show up in all the cells I were to create. I can't understand why it only pops up for the first form entry. Interestingly as a test, I inserted the exact same code for my last form that I had for the first form. yet calendar picker pops up for form one and notfor form 6 when they each have the same coding? Would you be able to help me with this one?

<apex:Page >
    <head>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
     
        <link rel="stylesheet" href="/resources/demos/style.css"/>
        <script>
            $(function() {
            $( "#pv0" ).datepicker({changeMonth : true , changeYear : true});
            $( "#pv1" ).datepicker({changeMonth : true , changeYear : true});
            $( "#pv2" ).datepicker({changeMonth : true , changeYear : true});
            });
        </script>
    </head>
    Hello  {! $User.FirstName}
    <br/>
    <br/>
    <h1 style="text-align:center;color:blue;">
    <B>Use the form below to select specific timeframe filters for the selected reports.</B></h1>
    <TABLE Border= "3" CELLSPACING="1" CELLPADDING="1" columnClasses="red,green,blue">
        <br/>
        <CAPTION><B><h1 style="text-align:center;color:blue;"> Salesforce Reports </h1></B></CAPTION>
        <br/>
        <TR>
            <TD ALIGN = "Center">
                <B>Opportunity Reports</B>
            </TD>
            <TD ALIGN = "Center">
                <B> Visit Summary Reports</B>
            </TD>
        </TR>
        <TR>
            <TD>
           
                <form method="get" action="/00OE0000002ujMC" >             
                <B>New Confirmed/Travels (This Month)</B>
                <BR/>
                <b>Date Ranges:</b>
                <br/>
                Travel Date From (MM/DD/YYYY):
                <input type="text" name="pv0" id="pv0" /> <br/>
                Travel Date To (MM/DD/YYYY):
                <input type="text" name="pv1" id="pv1" />
                <br />
                Confirm Date (MM/DD/YYYY):
                <input type="text" name="pv2" id="pv2" />
                <br />
                <input type="submit" value="My Confirmed Travels" class="submit" />
                </form>
            </TD>
            <TD>
            
                 <form method="get" action="/00OE0000002us1h" >
                 
                    <B>C- New Visits</B>
                    <br/>
                    <B>Date Ranges:</B>
                    <br/>
                    Activity Date From (MM/DD/YYYY):
                    <input type="text" name="pv0" id="pv0" /><br />
                    Activity Date To (MM/DD/YYYY):
                    <input type="text" name="pv1" id="pv1" />
                    <br />
                    <input type="submit" value="My Visits" class="submit" />
                </form>
            </TD>
        </TR>
        
        
        <TR>
            <TD>
                <form method="get" action="/00OE0000002uD4A" >             
                <B>A- Account Yearly Revenue (by Bus Unit)</B>
                <BR/>
                <b>Date Ranges:</b>
                <br/>
                Travel Date From (MM/DD/YYYY):
                <input type="text" name="pv0" id="pv0" /> <br/>
                Travel Date To (MM/DD/YYYY):
                <input type="text" name="pv1" id="pv1" />
                <br />
                <input type="submit" value="Account Yearly Revenue" class="submit" />
                </form>
            </TD>
            <TD>
                <form method="get" action="/00OE0000002uHmV" >
                    <B>C- Conversion Rate by Source</B>
                    <br/>
                    <B>Date Ranges:</B>
                    <br/>
                    Travel Date From (MM/DD/YYYY):
                    <input type="text" name="pv0" id="pv0" /><br />
                    Travel Date To (MM/DD/YYYY):
                    <input type="text" name="pv1" id="pv1" />
                    <br />
                    <input type="submit" value="Conversion Rate" class="submit" />
                </form>
            </TD>
        </TR>
        
        
          <TR>
            <TD>
                <form method="get" action="/00OE0000002uD4A" >             
                <B>A- Account Yearly Revenue (by Bus Unit)</B>
                <BR/>
                <b>Date Ranges:</b>
                <br/>
                Travel Date From (MM/DD/YYYY):
                <input type="text" name="pv0" id="pv0" /> <br/>
                Travel Date To (MM/DD/YYYY):
                <input type="text" name="pv1" id="pv1" />
                <br />
                <input type="submit" value="Account Yearly Revenue" class="submit" />
                </form>
            </TD>
            <TD>
                <form method="get" action="/00OE0000002ujMC" >             
                <B>New Confirmed/Travels (This Month)</B>
                <BR/>
                <b>Date Ranges:</b>
                <br/>
                Travel Date From (MM/DD/YYYY):
                <input type="text" name="pv0" id="pv0" /> <br/>
                Travel Date To (MM/DD/YYYY):
                <input type="text" name="pv1" id="pv1" />
                <br />
                Confirm Date (MM/DD/YYYY):
                <input type="text" name="pv2" id="pv2" />
                <br />
                <input type="submit" value="My Confirmed Travels" class="submit" />
                </form>
            </TD>
        </TR>
        
        
        
        
        
    </TABLE>
</apex:Page>