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