cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
T-REX-XP
Level: Powered On

How to set style for the label of custom control?

Hello,
How can i set the new style for the label of custom control? Something like color, font family, etc...

 

Thanks,

2 ACCEPTED SOLUTIONS

Accepted Solutions
AndrewLyMVP
Level 8

Re: How to set style for the label of custom control?

That's actually part of the Dynamics 365 form, and not actually PCF.

 

There isn't a supported way of changing the styling of attribute labels, you can try editing the DOM object with javascript but that is highly unsupported at this stage.

PaulMare
Level: Powered On

Re: How to set style for the label of custom control?

You could hide the standard label on the form and generate your own label a part of your control.

10 REPLIES 10
AndrewLyMVP
Level 8

Re: How to set style for the label of custom control?

That's pretty straight forward.  You'll need to make a reference to a CSS file within your manifest (uncomment the css resources line below):

 

<?xml version="1.0" encoding="utf-8" ?>
<manifest>
  <control namespace="ControlsAndrewLy" constructor="TestProject1" version="0.0.1" display-name-key="TestProject1_Display_Key" description-key="TestProject1_Desc_Key" control-type="standard">
    <!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
    <property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" />
    <!-- 
      Property node's of-type attribute can be of-type-group attribute. 
      Example:
      <type-group name="numbers">
        <type>Whole.None</type>
        <type>Currency</type>
        <type>FP</type>
        <type>Decimal</type>
      </type-group>
      <property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type-group="numbers" usage="bound" required="true" />
    -->
    <resources>
      <code path="index.ts" order="1"/>
      <!-- UNCOMMENT TO ADD MORE RESOURCES
      <css path="css/TestProject1.css" order="1" />
      <resx path="strings/TestProject1.1033.resx" version="1.0.0" />
      -->
    </resources>
  </control>
</manifest>

Then, create the css folder with css file.

 

Each control you create (with project.ts file), will need a class name.  E.g. Label has class name of YourLabelClass.

 

Check out some of my projects for examples:

 

https://github.com/365lyf/PCFControls

T-REX-XP
Level: Powered On

Re: How to set style for the label of custom control?

Thanks for your suggestion, but i mean the following label.

1111.png

 

 

AndrewLyMVP
Level 8

Re: How to set style for the label of custom control?

That's actually part of the Dynamics 365 form, and not actually PCF.

 

There isn't a supported way of changing the styling of attribute labels, you can try editing the DOM object with javascript but that is highly unsupported at this stage.

PaulMare
Level: Powered On

Re: How to set style for the label of custom control?

You could hide the standard label on the form and generate your own label a part of your control.

Highlighted
binau
Level: Powered On

Re: How to set style for the label of custom control?

I was also lokking into this (still to start, it will be my first custom control ever).

I'm wondering if adding a label in custom control will give the same experience when resizing the screen than using the default label (level within DOM would be different).

 

PowerApps Staff HemantG
PowerApps Staff

Re: How to set style for the label of custom control?

Yes it should. When the label is hidden the control gets the full section width instead of half with the label. Reflow, resizing is the same. 

binau
Level: Powered On

Re: How to set style for the label of custom control?

I'm still struggling with this.

When the browser screen resizes, the OOB controls get different classes assigned to change heigt, width, ...

How can I do similar if I have the label in my custom control?

I couldn't find specifications as what the criteria are.

PaulMare
Level: Powered On

Re: How to set style for the label of custom control?

Yeah it is tricky, you need to use similar responsive design triggers and adjust the style for the label as things reflow. This is not so easy, and if the built-in styles change at some point in future, you would have to re-align to that. @hemant - would it be appropriate to assign the built-in styles to the label? I suspect that would be unsupported?


@binau wrote:

I'm still struggling with this.

When the browser screen resizes, the OOB controls get different classes assigned to change heigt, width, ...

How can I do similar if I have the label in my custom control?

I couldn't find specifications as what the criteria are.


 

bthompson
Level: Powered On

Re: How to set style for the label of custom control?

@PaulMare Surely a "label" within a component is no different from any other piece of plain (none form input) html within a component.

 

Given that look and feel is essential for user experience, components really do need the ability to access label formatting (and reformatting) information to ensure custom PCF components look as close as possible to other fields on the form.

Helpful resources

Announcements
firstImage

PowerApps Monthly Community Call!

Join us next Wednesday for our Demo Extravaganza, October 16, 2019 8am PDT.

firstImage

Microsoft Business Applications Virtual Launch Event

Join us for an in-depth look at the new innovations across Dynamics 365 and the Microsoft Power Platform.

firstImage

Watch Sessions On Demand!

Continue your learning in our online communities.

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

FirstImage

Power Platform World Tour

Coming to a city near you

thirdimage

PowerApps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

FourthImage

Join PowerApps User Group!!

Connect, share, and learn with your peers year-round

SecondImage

Power Platform Summit North America

Register by September 5 to save $200

Users Online
Currently online: 136 members 3,740 guests
Recent signins:
Please welcome our newest community members: