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

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Dima KryvyiDima Kryvyi 

Lightning Component Framework Specialist Superbadge - Step 2

Hi All,
I'm getting this error on Step 2 of Lightning Component Framework Specialist Superbadge.
User-added image
BoatSearchFormHelper.js which gets the name of the UITheme and checks whether 'e.force:createRecord' event is supported by the current context (one.app).  
renderNewButton: function (component) {
        var action = component.get('c.getUITheme');
        action.setCallback(this, function (response) {
            if (response.getState() === 'SUCCESS') {
                if (response.getReturnValue() == 'Theme4d' && $A.get('e.force:createRecord')) {
                    component.set('v.showNewButton', true);
                }
            }
        });
        $A.enqueueAction(action);
    }
So, if both conditions return true, then the 'showNewButton' attribute is set to 'true' and the 'New' button is rendered in the component markup: 
<div class='{!v.showNewButton ? '' : 'slds-hide'}'>
    <lightning:button variant='neutral' label='New' onclick='{!c.createBoat}'/>
</div>
I also tried such an option with aura:renderIf: 
<aura:renderIf isTrue='{!v.showNewButton}'>
    <lightning:button variant='neutral' label='New' onclick='{!c.createBoat}'/>
    <aura:set attribute='else'>
    </aura:set>
 </aura:renderIf>
Here is the phase from the challenge: "The form’s controller checks whether the event.force:createRecord event is supported by a standalone app and either shows or hides the New button according to best practices."

Does anyone know the way to check that?


 
Best Answer chosen by Dima Kryvyi
marktukmarktuk
You should be using <aura:if> rather than <aura:renderIf>. I would also default the attribute to false and only set it to true if the event is supported.

All Answers

marktukmarktuk
I think you're being too specific with that check, simply test if the action is available rather than checking the UITheme. The requirements should be taken quite literally "The form’s controller checks whether the event.force:createRecord event is supported".
Dima KryvyiDima Kryvyi
Hi Marktuk, 
Thank you for answering.
I've just tried to just put a simple check in the js controller (not in the helper), where showNewButton is the attribute of type Boolean. 
doInit: function (component, event, helper) {
        //event availability check
        var createRecordEvent = $A.get('e.force:createRecord');
        if(createRecordEvent){
            component.set('v.showNewButton', true);
        } else {
            component.set('v.showNewButton', false);
        }
    }
Then I conditionally render the 'New' button in the markup. 
<aura:attribute name='showNewButton' type='Boolean' />

<aura:renderIf isTrue='{!v.showNewButton}'>
    <lightning:button variant='neutral' label='New' onclick='{!c.createBoat}'/>
</aura:renderIf>
Still getting that error after all.


 
marktukmarktuk
You should be using <aura:if> rather than <aura:renderIf>. I would also default the attribute to false and only set it to true if the event is supported.
This was selected as the best answer
Dima KryvyiDima Kryvyi
Hey Marktuk, that's a good point with renderIf (I forgot about the fact it's obsolete now) and I started with the defauld='false' but then switched to defining that in the controller. Eventually I've managed to overcome that error with both <aura:if> & default='false' for the parameter.

But now I'm getting another error message:
User-added image
So the idea is that you have to pre-populate the BoatType field for the new boat record dialog with an Id of the boatType record.
User-added image
So, If I select the 'Yacht' value in the picklist, I'll have it pre-populated. If I select 'All' I'll have that field blank. 
User-added image
It seems that the author of the challenge was very strict about the way he wanted us to achieve the behavior... 
Here's my "CreateBoat" function: 
createBoat: function (component) {
        var createRecordEvent = $A.get('e.force:createRecord');
        if (createRecordEvent) {
            var typeName = component.find('typeSelect').get('v.value');
            var typeMap = component.get('v.searchOptionToIdMap');
            var typeId = null;
            if (typeName && typeMap && typeMap[typeName]) {
                typeId = typeMap[typeName];
            }
            createRecordEvent.setParams({
                'entityApiName': 'Boat__c',
                'defaultFieldValues': {
                    'BoatType__c': typeId
                }
            });
            createRecordEvent.fire();
        }
    }
Where 'typeName' holds the selected value from the picklist, 'typeMap' is a collection of key-value pairs with BoatType as a key and BoatType record Id as a value. Of course this is just a js-object. So, if the value from the picklist gets some Id from the 'typeMap' it'll be used to prepopulate the BoatType field.

Is there something wrong with it?
marktukmarktuk
I believe the challenge is expecting you to define the select options with the value as the Id of the BoatType__c records. 
<option text="{!type.Name}" value="{!type.Id}" />
The "All Types" option should have an empty string value. When you then pass this value to the createRecord event, you need to ensure you pass a valid Id. The way I did this was to check the selected value was truthy (i.e. not an empty string) and then use it to define the BoatType__c on the new record. Something similar to this perhaps: 
var params = {
    "entityApiName": "Boat__c"
};

if (boatTypeId)
{
    params['defaultFieldValues'] = {
        'BoatType__c' : boatTypeId
    };
}
You shouldn't need to make any additional server calls at this point, the key to making lightning components performant is to reduce server calls where possible.

 
Dima KryvyiDima Kryvyi
Hi Marktuk, 

Thank you for your comment. I figured out that the author of that challenge is expecting us to put that check into the controller and not in the helper. After moving that function to the controller I got 'PASS'.
PatMcClellan__cPatMcClellan__c
RE: Dima's last post, I passed with it in my helper, so I don't think it needs to be in the controller.