Facts #27 || CSS Tricks and scenarios related to Community Portal

When we are developing community portal by using OOTB functionalities. In some scenarios we need to hide the fields, buttons, list views from desktop and mobile.

Will discuss some scenarios and CSS what can be used to make that scenario possible.
To find the CSS class you need to search CSS class by inspecting the community page.
----------------------------------------------------------------------------------------------------------------------------
Scenario 1: If you are using case object page layout on community portal and business asked to remove the status field from the page layout [view and edit mode] but status field is required field and we can't hide this field from profiles and page layouts. 

Solution: 
Create one section in page layout and add status field to that section.
To hide that section which contains status use below CSS to hide that section from page layout in Community portal

// nth-child(n) -- nth section of the page layout you can replace the n value based on the requriment.
.test-id__record-layout-container .test-id__section:nth-child(1) {
display:none;
}

.forcePageBlock .slds-section:nth-child(1) {
display: none;
}
-----------------------------------------------------------------------------------------------
Scenario 2:  On lightning record pages we can hide Mark status as complete button related to case path from Edit page [Builder] but from community portal we need to add CSS to hide that button from UI.

Solution: 
.slds-path .slds-path__mark-complete{
display: none;
}
----------------------------------------------------------------------------------------------------------------------------
Scenario 3: If we are using Record List component on community portal and we need to show only one list view on UI. To remove other lists like Recently Viewed Accounts, Open Accounts ..etc. 
Select the list view you need to show on the portal in record list component and use this CSS.

Solution:
.forceVirtualAutocompleteMenuList {
display: NONE;
}

.slds-page-header__name-switcher {
display: none;
}
----------------------------------------------------------------------------------------------------------------------------
Scenario 4: Consider this scenario you need to give edit access to record from detail page not from list view page. To hide that pencil icon [edit button] from portal use this CSS.

Soultion: 
.forceVirtualActionMarker.forceVirtualAction{
display: NONE;
}

Comments

Post a Comment

Popular posts from this blog

Vlocity Facts #01 | OmniStudio DataRaptors

DataRaptor is a mapping tool that  you can use to read, transform, and write Salesforce data. For Example. In each interaction with a digital customer  or business process, the system needs to extract the data in order to display it. If the user modifies this data or enters new data, they also need to be saved. This is where we use OmniStudio DataRaptors.  Where to use DataRaptors? Retrieving Data:   OmniScript calls  DataRaptor Extract (via the integration procedure) to read the data from Salesforce. For example, OmniScript editing an account should display data such as account name, phone number, website, and so on. Manipulating data: OmniScript captures modified and new data based on user input. For example, an agent changes the  phone number of an account. Save Data:   OmniScript calls DataRaptor Load (via the integration procedure) to write the data back to Salesforce. For example, the updated account phone number is saved back to the Account rec...
Read more

Vlocity Facts #34 || Getting the details from the URL in a FlexCard and an Omniscript

Image
 1.The parameters in the URL must be in the format c__Node, followed by their values, in order to extract the parameters from the URL. For example: If you need to show different layout or different set of actions for community users and salesforces users you can pass different parameters in URL. For Community Portal Pass Community or any other reference value in ' c__Type '. https://salesforce.lightning.force.com/lightning/cmp/ omnistudio__vlocityLWCOmniWrapper?c__target=c%3ApHXTestFlexCard&c__tabIcon=custom%3Acustom18& c__Type =Community  For Salesforce Users Pass Salesforce or any other reference value in ' c__Type '. https://salesforce.lightning.force.com/lightning/cmp/ omnistudio__vlocityLWCOmniWrapper?c__target=c%3ApHXTestFlexCard&c__tabIcon=custom%3Acustom18& c__Type =Salesforce  2. We can get the value as {Params.c__Parameter} from the FlexCard and we can execute different actions based on the input. 3. From the omniscript,  we can retrieve ...
Read more

Vlocity Facts #44 || Communication between Omniscript and Flexcard [Pub/Sub]

Image
Flexcards have the ability to trigger and listen to two kinds of events: Custom and Pubsub events . Custom Events: Facilitate the transmission of information between a child and its parent. This can occur between a child Flexcard and its parent Flexcard, or between an element and the Flexcard to which it belongs. Pubsub Events: Allows communication between two separate components. This could occur between two separate Flexcards on the same Lightning page, known as sibling Flexcards, or between a Flexcard and an Omniscript.  In this post I will discuss about Pub/Sub event. Consider we have omniscript and flexcard individually on home page when an update happens we need to show those details in flexcard. To achieve this we can use pub/sub event. Step 1: Create a omniscript according to your requirement. I'm trying to create Contact record by using Step element and data raptor post action. Now to trigger the flexcard we need to configure the messaging frame work when an update happen...
Read more