on 2017 Nov 21 4:10 PM
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?
Request clarification before answering.
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 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.
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:
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!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
50 | |
8 | |
5 | |
5 | |
5 | |
5 | |
5 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.