Objective:
This article teaches you how to use CSS to hide the "Add" button in a Linked Section
Before you get started:
These articles might be helpful before you read this one:
When using Linked Sections (specifically Shared Linked Sections), there are certain situations when you may wish to have end users interact with prepopulated data, but not be able to add new records. For example, if you build a form that has a linked section to the Contact object - you may wish for your end users to only update existing Contacts from the linked section and not be able to insert new Contact records. In order to do this, consider using CSS to hide the Add button on the form.
The following snippet allows you to hide the Add button while using Linked Sections with Compact Cards.
#formContent .ls-card-add-container {
display: none;
}
To hide the Add button of a specific linked section with Compact cards, Inspect the element for its data-randomid and use in the following:
#formContent .ls-card-add-container[data-randomid="insert data-randomid here"] {
display: none;
}
The following snippet allows you to hide the Add button while using Linked Sections WITHOUT Compact Cards
#formContent .form-section .slds-button.add-linked-section {
display: none;
}
After you apply the CSS to the template, the end result should look something like below. Look closely - the left image has an Add button on the bottom, which would allow an end user to create a new Contact record from within the form. In the image on the right, the Add button has been removed.
In addition to removing the add button from linked sections, it is also common for admins to wish to remove the Trash Bin icon from linked sections, which would prevents end users from deleting linked sections. This can be done by adding the following CSS.
.remove-linked-section-container {
display: none!important;
}
Comments
0 comments
Please sign in to leave a comment.