cancel
Showing results for 
Search instead for 
Did you mean: 

SAPui5 : change design of a label in a formelement

Former Member
0 Kudos
2,099

hello,

I am unable to change the design to for example to Bold for the labels of my formelements in my form, the 3rd line in the code below

<f:FormContainer binding="{GETPLANT>/S_T001WSet('03')}">
  <f:formElements>
    <f:FormElement label="Warehouse Number">
      <f:fields>
	<Text text="{GETPLANT>DC}"/>
      </f:fields>
    </f:FormElement>
  </f:formElements>
</f:FormContainer>

but with ui5 inspector, it is possible to change the design of the label :

So there must be a way to do it, any idea?

Accepted Solutions (0)

Answers (4)

Answers (4)

Sefa_Kurtuldu
Explorer

Customizing SAPUI5 FormElement Labels: Best Practices and Workarounds

When working with SAPUI5 applications, you may encounter a situation where you need to customize the appearance of labels in your form elements. Specifically, you might want to change the label design to bold. While there are straightforward ways to achieve this using CSS, not all methods align with SAP's best practices for styling. In this blog post, we'll explore both a recommended approach and a common workaround.

The Challenge

The challenge arises when trying to directly style the labels of FormElement controls in an SAPUI5 form. For example, consider the following code snippet where we want to make the label bold.

The direct application of CSS styles to the label is not straightforward due to the way SAPUI5 generates and manages DOM elements.

Recommended Approach: Using CSS Classes

Workaround: Using Specific Element IDs

In this case, you might need a quick and dirty solution, especially for rapid prototyping or when dealing with legacy code. Here’s a workaround that involves targeting specific element IDs:

  1. Identify the element ID using the browser debugger. You can find the ID by running the following code in the console:

                                    this.getView().byId("label1").sId

  2. Add the CSS rules to your stylesheet:in style.css file:

    #application-XXX-display-component---ViewX--label1-label-bdi {
    font-weight: bold !important;
    color: rgb(0, 0, 0) !important;
    }

    Replace application-XXX-display-component---ViewX--label1-label-bdi with the actual ID obtained from the previous step.

    xxx-your app name
    Viewx-your view
    label1-your label id

    Conclusion

    While using specific element IDs in CSS can quickly solve styling issues, it is not a recommended practice for production code due to its lack of scalability and maintainability. Instead, leveraging CSS classes provides a more robust and sustainable approach to styling SAPUI5 applications.

    By following best practices, you ensure that your SAPUI5 applications remain maintainable, scalable, and aligned with SAP’s guidelines. Remember, clean code is not just about making things work; it’s about making things work well for years to come.

    Happy coding!





 

 

cdan
Explorer

Try this. Source - ChatGPT

<f:FormElement>
<f:label>
<m:Label text="Label" design="Bold" />
</f:label>
<f:fields>
<m:Input value="Input">
</f:fields>
</f:FormElement>

Hope this helps!

SyedUmer
Discoverer
Thanks, this was helpful
Former Member
0 Kudos

Hello,

I already use some custom CSS in my projects, the problem here is, the label is an attribute of the formelement, it is not a label on it's own,

so this:

<f:FormElement label="Warehouse Number" class="myclass">

will apply a css to the formelement, not the label, i need something like

<f:FormElement label="{text:'Warehouse Number',design:'Bold'}">

but this is not working

Joseph_BERTHE
Active Contributor
0 Kudos

Hello,
Did you follow this blog, it should answer your question.

Regards,

Joseph