0

I created an Aura Component for our Lightning Opportunity page that will replace our URL hacking for classic to pull information to a new asset record. I added a Modal to select the Record type before firing force:createRecord. createRecord displays it's modal correctly, but it is displaying the record type Modal incorrectly.

enter image description here

cmp Code:

    <div role="dialog" 
         tabindex="-1" 
         aria-labelledby="modal-heading-01"
         aria-describedby="modal-content-id-1"
         class="slds-modal slds-modal_small"
         aura:id="myModal">
        <div class="slds-modal__container">
                <div class="slds-modal__header">
                    <button class="slds-button slds-modal__close slds-button--icon-inverse"
                            title="Close" 
                            onclick="{!c.closeModal}">
                        X<span class="slds-assistive-text">Cancel</span>
                    </button>
                    <h2 id="modal-heading-01" class="slds-text-heading--medium">New Asset</h2>
                </div>
                <div class="slds-modal__content slds-p-around--medium" id="modal-content-id-1">
                    <div class="slds-grid slds-wrap">
                        <div class="slds-size--1-of-2 slds-large-size--1-of-2">
                             <div class="slds-align--absolute-center">Select a Record Type</div>                            
                        </div>
                        <div class="slds-size--1-of-2 slds-large-size--1-of-2">
                            <ui:inputSelect aura:id="selectid">
                                <aura:iteration items="{!v.lstOfRecordType}" var="contact">                            
                                    <ui:inputSelectOption text="{!contact}" label="{!contact}"  />
                                </aura:iteration>
                            </ui:inputSelect>
                        </div>&nbsp; &nbsp;
                    </div>                   
                </div>
            <div class="slds-modal__footer">
                    <lightning:button class="slds-button slds-button--neutral" onclick="{!c.closeModal}">Cancel</lightning:button>
                    <lightning:button class="slds-button slds-button--brand" onclick="{!c.newAsset}">Next</lightning:button>
                </div>
            </div>
        </div>
        <div class="slds-backdrop" aura:id="myModal-Back"/>

Controller:

closeModal: function(component, event, helper) {
   //find modal using aura id
    var modal = component.find("myModal");
    var modalBackdrop = component.find("myModal-Back");

   // Now add and remove class
    $A.util.removeClass(modal, 'slds-fade-in-open');
    $A.util.removeClass(modalBackdrop, 'slds-fade-in-open');
    },
 
   openModal: function(component, event, helper) {
   //find modal using aura id
    var modal = component.find("myModal");
    var modalBackdrop = component.find("myModal-Back");

   // Now add and remove class
    $A.util.addClass(modal, 'slds-fade-in-open');
    $A.util.addClass(modalBackdrop, 'slds-fade-in-open');
   },

CSS:

.THIS .slds-backdrop {
    background-color: blue;
}

It's not the backdrop, as I set that to Blue, so I'm not sure what is causing this.

3
  • can you inspect the elements in your browser? this will give you a better Idea of what may be going on. For example, CSS issue, or the element is simply not rendered, etc, tec.. – glls Jan 29 at 17:55
  • Turns out I'm an idiot. i set the background of the component to white because i was trying to set the background of the component card. it made everything white. – theInappropriateYodeller Jan 29 at 20:43
  • 🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣 – glls Jan 29 at 21:24
0

Stepping back a bit on this: why not use a URL with pre-filled fields in Lightning?

This approach in classic was common, but unsupported, so I understand the hesitancy. But in Lightning, as of the Spring 20 release (last year), this is an actually supported approach. Source

/lightning/o/[OBJECT_API_NAME]/new?defaultFieldValues=
    Name={!URLENCODE('value')},
    Custom_Field_Api_Name__c={!URLENCODE('value')}

add useRecordTypeCheck=1 if you don't want to skip the record type selection screen

/lightning/o/[OBJECT_API_NAME]/new?useRecordTypeCheck=1&defaultFieldValues=
    Name={!URLENCODE('value')},
    Custom_Field_Api_Name__c={!URLENCODE('value')}
3
  • I did want to do this at first. It would have been waaaaay simpler, but I ran into some issues with date codes and lookup fields not parsing. I tried troubleshooting, but i couldn't get them to work – theInappropriateYodeller Feb 1 at 16:01
  • For what its worth, some of the things that tripped me up: - Field Names are case sensitive ("Name" will work, "name" will not) - Dates expect the following format: YYYY-MM-DD. (eg: Date_Field__c=2021-02-01) – Jeff Kranz Feb 1 at 17:49
  • Not sure what your issue with lookups were, but it works for me using the __c version of the field name and the 18 digit version of the record ID – Jeff Kranz Feb 1 at 17:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.