Retake Trailhead Challenge Quizzes Locally

Trailhead is a great tool for learning Salesforce and soft-skills. However, currently quiz type unit doesn't allow us to retake "Challenge". And we cannot copy and paste challenge quizzes directly. So I created a simple scraping app for Trailhead unit. You can easily copy and paste Trailhead quizzes by designating URL of a Trailhead unit. Have fun!

Trailhead Quiz Extractor - https://trailhead-quiz-extractor.herokuapp.com/

Recreate modal component for force:lightningQuickActionWithoutHeader

Intro

Lightning component action is a handy option to create custom function called from record detail page. We can launch a lightning component from a custom action by just implementing either force:lightningQuickAction or force:lightningQuickActionWithoutHeader. However, lightning component action has serious user interface problems. I will introduce them and propose a workaround.

Problems

A component implemented force:lightningQuickAction is shown on the auto-created modal and its header and footer are outside of the component. So we can neither customize the header text nor put an another button next to the cancel button on the footer.
f:id:shunkosa:20171212181307p:plain

It's a natural to think about recreating everything in a component implemented force:lightningQuickActionWithoutHeader. However, it has another problem. Extra margin is generated.
f:id:shunkosa:20171212181318p:plain

Workaround

Notice: The following workaround is not compatible with Salesforce mobile and not available for API version 42.0 or later.
We can overwrite the style of the auto-created modal by inline CSS to disable extra margin. Another possibility is calling a custom modal from lightning:button tag but it requires you to recreate a highlight panel and it would be a tough work.

.cuf-content{
    padding:0 !important;
}
.slds-p-around--medium{
    padding:0 !important;
}
.slds-modal__content{
    overflow-y:hidden !important;
    height:unset !important;
    max-height:unset !important;
}

f:id:shunkosa:20171212181336p:plain
Now we get a modal which is similar to standard action.
f:id:shunkosa:20171212181350p:plain:w500

Reusable component

I created a template modal component which can be used in a component implemented force:lightningQuickActionWithoutHeader. It is available on this repository.

Usage
<aura:component implements="force:lightningQuickActionWithoutHeader">
	<c:LightningActionModal title="Hello world!" percentWidth="85" bodyHeight="300">
        <aura:set attribute="body">
            //awesome modal body
        </aura:set>
        <aura:set attribute="footer">
            <lightning:button label="Cancel" variant="neutral"/>
            <lightning:button label="Save" variant="brand" />
        </aura:set>
    </c:LightningActionModal>
</aura:component>
Attributes
Attribute Type Description
title String Text shown on the modal header.
percentWidth String Designate the width of the modal by percent. Default value is 50.
bodyHeight Integer Designate the height of the modal body by pixel. Default value is 250. The value in the custom action setting is neglected due to the overwritten CSS.
body Object Content in the modal body.
footer Object Content in the modal footer.