Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Using in VF Page #5

Open
sfdcDesign opened this issue Mar 18, 2017 · 19 comments
Open

Using in VF Page #5

sfdcDesign opened this issue Mar 18, 2017 · 19 comments

Comments

@sfdcDesign
Copy link

I have designed an SLDS VF page that uses dynamic fields from a field set to populate. However, the standard datepicker only shows the link, not a calendar. I can't seem to get your datepicker connected correctly. Could you provide more detail on the correct setup? Thanks!
@rapsacnz
Copy link
Owner

rapsacnz commented Mar 18, 2017 via email

@sfdcDesign
Copy link
Author

sfdcDesign commented Mar 21, 2017 via email •
edited
Loading

@rapsacnz
Copy link
Owner

rapsacnz commented Mar 21, 2017 •
edited
Loading

In the $Lightning.use code, you need to refer to a specific id so the javascript knows where to attach the picker to.

So you will need as many $Lightning.use calls as you have items in the <apex:repeat>. You could try putting a lightning use call inside the repeat and using the special id syntax to refer to it.

ie:

<apex:page id="myPage"> 
<apex:variable value="{!1}" var="rowNum"/>
<apex:repeat id="myRepeat">
  <apex:inputText value="{!something}" id="inputDate"/>
  <script>
  $Lightning.use("c:DatePickerApp", function() {
        $Lightning.createComponent(
            "c:DatePickerWrapper",
            {value : {!review.Actual_Final_Signature__c},
             callback: function(){
                         alert('callback');
                       }
            },
            "myPage:myRepeat:" + {!rowNum} + "myInput",   //<--id is here
            function(cmp) {});
    });
  </script>
<apex:variable var="rowNum" value="{!rowNum + 1}"/>
</apex:repeat>

So the tricky part is building that id, since it is generated dynamically.
In this instance, you would need to build up the string and it would be something like:
"myPage:myRepeat:" + {!rowNum} + "myInput". Since there is no rowNum in Visualforce, you have to do you own:

Add this above the repeat:
<apex:variable value="{!1}" var="rowNum"/>

Inside the repeat, increment it.
<apex:variable var="rowNum" value="{!rowNum + 1}"/>
(I've already added it above).

Hopefully you can take this example and just use it.

Note, this could quite heavy - one picker for each field. Another option is to use lazy loading and add the picker in an onclick attribute on the code. You may even be able to pass the id in the onclick call, which would save a lot of fussing.

A snippet:

<apex:inputText value="{!something}" id="inputDate" onclick="handleClick(this.id)"/>
<script>
function handleClick(id){
  $Lightning.use("c:DatePickerApp", function() {
        $Lightning.createComponent(
            "c:DatePickerWrapper",
            {value : {!review.Actual_Final_Signature__c},
             callback: function(){
                         alert('callback');
                       }
            },
            id, //id you passed in above
            function(cmp) {});
    });
}

Hope this helps!!! (I'm very confident that's not the actual datepicker itself - it's in use in several of my production components)

@sfdcDesign
Copy link
Author

sfdcDesign commented Mar 21, 2017 via email •
edited
Loading

@rapsacnz
Copy link
Owner

What you probably don't realise is that Visualforce takes your id actualFinal and rewrites it.
It comes out as a concatenation of all the ids in the objects wrapping your field.

Hence this line in my example above:

"myPage:myRepeat:" + {!rowNum} + "myInput",   //<--id is here

This evaluates to "myPage:myRepeat:1:myInput"

You can check this by rightclicking on the page and choosing "Inspect Element".

Look here for more info:
https://developer.salesforce.com/forums/?id=906F000000098xKIAQ

@rapsacnz
Copy link
Owner

Oh, btw, there is a bug in that string concatenation too. Change

"myPage:myRepeat:" + {!rowNum} + "myInput",   //no colon

To

"myPage:myRepeat:" + {!rowNum} + ":myInput",   //see added colon

@rapsacnz
Copy link
Owner

Another option is to not use apex:outputText elements. If you use standard HTML elements, their ids won't be rewritten by Visualforce. Ie, your id actualFinal will remain just that.

@rapsacnz
Copy link
Owner

I also noticed a bug. Change your attribute to:

<aura:attribute name="review"
                    type="Custom_Review__c"
                    default="{'sobjectType' : 'Custom_Review__c',
                    'recordType.Name' : 'Special_Review',
                    'Actual_Final_Signature__c' : ''}"
                    />

@sfdcDesign
Copy link
Author

sfdcDesign commented Mar 22, 2017 via email •
edited
Loading

@rapsacnz
Copy link
Owner

For line 37 of the component, you should probably change that to the id of the date - I've also done that in the repo - Thanks.
In the controller, line 19, the date will be null if you are not passing in a datestring - which is fine, as the component will then generate a new default date - today's date. Is that how it's working? Either way, I don't think there's a problem there.
Glad you are getting some good Lightning experience - it's a pretty cool component framework.
Also, look out for my new component I'm making at the moment - a two column, draggable, multi select component (as opposed to the drop-down style one I made a while back).

@sfdcDesign
Copy link
Author

Caspar,
I believe you have a great start here, but having debugged this using the Chrome Dev Tools, I am positive this app is not set up from VF in its current state and implementation. Hopefully these will help improve your component.

Current Bugs for VF implementation:

  1. There is a 404 error because the app does not extend ltng:outApp.
  2. Dates do not transer from VF page to DatePickerController datestr.
  3. If I manually entered a date string in the DatePickerWrapper instead of {!v....}, then this error occurs.

This page has an error. You might just need to refresh it. Error during init [Action failed: c:DatePicker$controller$doInit [momentDate.isValid is not a function]]

Aura documentation shows isValid is used for components. Maybe a leftover from Moment.js?

  1. If momentdate.isValid() is removed from the null check, then this error occurs

This page has an error. You might just need to refresh it. Error during init [Action failed: c:DatePicker$controller$doInit [momentDate.toDate is not a function]]

Because momentDate is already a date, since that is what is returned by $A.localizationService.parseDateTime().

If that is removed so that the line 24 reads "currentDate = momentDate;", then no errors occur, but the component never builds in the vf page.

  1. I tried to confirm if the dateChangeEvent ever fires on init to be handled by the wrapper controller and callback to the vf page. I didn't see it, but it may be there or not need to be explicit. So this may or may not be a bug.

Also tried with the html tag and a generic testDate variable from the Apex controller.

Lastly, to verify org config, built the app out of the lightning documentation on using components in VF pages, and had no issue showing the "Press Me" button.

I do look forward to hearing if you get this one running or about your other component's release. This has been a learning experience either way for me.

Regards,
Joshua

@rapsacnz
Copy link
Owner

Hi Joshua,
As regards point 1, that is not a bug - it's just something you need to do to use in a VF page.
For the others, I'll spin up a demo VF page on Monday and get it working - if there is anything to be fixed, I'll fix it and let you know.
You are probably right about some of these bugs - in my production code I've fixed a few bugs and some of the fixes may not have made their way here.
I'll let you know.

@sfdcDesign
Copy link
Author

Thanks, Caspar! I appreciate your work on this.

@rapsacnz
Copy link
Owner

Ok, there were several issues caused by divergence of my production code and this code.
The worst was actually a bug caused by the framework in it's parsing of dates. It appears that they have moved to returning a Javascript Date object rather than a Moment.js object. This caused a lot of problems.
I have added in things added in my production code also:

-- better drop down handling
-- clear date function
-- manual input handling
-- use of a custom select object (included) that allows the component to display the currently selected year.
-- removal of Resource dependencies (using the built in lightning css)
-- probably some other stuff :)

I needed to do this, because one of my other production projects used the same "no moment dependencies" build, so will now be breaking until I update it with this latest code.

Please use the attached VF page, TestDatePicker component and App, and TestDatePicker Apex controller to check it's all working for you.

Cheers,

Caspar

@sfdcDesign
Copy link
Author

A date picker displays!

Still having a couple probable bugs. Initially, it would not compile Select.cmp because there was no markup for "DataChange". I assumed you meant "DateChange", but I'm not sure. When the default date in TestDatePicker is removed, I ran into an error for timezone being undefined. Maybe it's not passed to parseInputDate? Also, when I select a year, it crashes the page. I get a warning that Event.setParams(): 'data'('2017') is not a valid parameter. Valid parameters are 'value'.

Much improved though to get a displayed date picker in a vf with the confirmed callback.

@rapsacnz
Copy link
Owner

I've added a new DataChange event. You should probably update every component with what's up here, because much has changed. Oh and I see DataChange is not up... I'm putting up now.

@rapsacnz
Copy link
Owner

Ok, you were right! There was a bug when a value was cleared... also it would attempt to add todays date in if you cleared, which you would not want - if you clear it, you want it to stay cleared!
So yeah, get fresh sources for the datepicker, the events, and the select and you should be good to go.

@rapsacnz
Copy link
Owner

@sfdcDesign is it working for you?

@sfdcDesign
Copy link
Author

@rapsacnz Thanks for the updated version...current development on that page got tabled for a couple sprints. I'm still going to test in some free time on a test page. I'll let you know. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rapsacnz @sfdcDesign