Manage CSS (Update screen size, Update color, font etc., Update button css) of Screen Flows #inSalesforce
Manage CSS (Update screen size, Update color, font etc., update button css) of Screen Flows #inSalesforce
Prerequisites:
Install in Prd: https://login.salesforce.com/packaging/installPackage.apexp?p0=04tIY0000000W5DYAU
Install in sandbox: https://test.salesforce.com/packaging/installPackage.apexp?p0=04tIY0000000W5DYAU
Create a screen flow for example for case creation, add the component Style Overwritein the screen. In the input parameter add the CSS String (theCSS - create text template with the css value)
like:
.slds-form-element__label {
font-weight: bold;
}
Add the screen e.g. in lightning page or quick action and test this.
Frequetly used css :
Update field Label Color:
.slds-form-element__label {
color: red !important;
}
Update Modal Height
.uiModal flowruntime-flow {
max-height: 100% !important;
}
Update Modal Width
.uiModal--medium .modal-container {
max-width: 400px !important;
}
Hide the Close button:
button.slds-modal__close.closeIcon {
display: none;
}
Add background Image: (if flow opened from quick action)
.uiModal flowruntime-flow {
background-image: url("sampleImage.jpg") !important;
background-repeat: no-repeat !important;
background-position: center;
background-size: cover;
}
.slds-modal__header {
margin-bottom: 0 !important;
}
Remove Border:
article.flowRuntimeForFlexipage {
border: none;
}
Update height of data table:
flowruntime-datatable .restrict-scroll {
max-height: 200px !important;
}
Update nav bar color:
.uiModal flowruntime-navigation-bar {
background-color: lightblue !important;
border-width: 0 !important;
}
Update text area height/color:
textarea {
min-height: 300px !important;
color: green !important;
font-weight: 800;
}
Specific Object or Field involved:
div[data-target-selection-name="sfdc:RecordField.Case.Priority"] .slds-form-element__label {
font-weight: bold;
color: red;
font-size: 14px;
}
Visual: https://www.youtube.com/watch?v=Rd92-bIcNrs
Comments
Post a Comment