cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
hansgfixed
Frequent Visitor

Namespace naming convention Do's and Dont's

Pascal Case of course but what about nesting like 'MyPcf.Foo.Bar'. Somehow my css doesn't get applied. Is this by design or a bug?

1 ACCEPTED SOLUTION

Accepted Solutions

@hansgfixed I've tried to repro, running this command to create my PCF component:

pac pcf init --namespace Long.NameSpace.For --name MyControl --template field

And when rendered, I get this class attribute on my container DIV:

class="customControl Long NameSpace.For.MyControl Long.NameSpace.For.MyControl"

So the container has:

  1. The customControl indicator class
  2. The Long root namespace class
  3. The NameSpace.For.MyControl child namespace class
  4. The Long.NameSpace.For.MyControl full namespace class

From what you've posted in this thread:

MyPcf.Foo.Bar\.FooBarControl #inputid {background-color: red;}

The issue I'm seeing is the missing . at the beginning of your CSS selector indicating that you're looking for a class not an element named MyPcf, and the other \ characters indicating that this is a long class name that uses dots, not a string of classes on the same element, so this should work:

.MyPcf\.Foo\.Bar\.FooBarControl #inputid {background-color: red;}

Visual Studio Code showing what this CSS selector would matchVisual Studio Code showing what this CSS selector would match

 

 

View solution in original post

6 REPLIES 6
HemantG
Power Apps
Power Apps

quick tested it on the test control and I was able to see the style apppied in the debug harness.

.hello.world\.test
{
font-family: 'SegoeUI-Semibold', 'Segoe UI Semibold', 'Segoe UI Regular', 'Segoe UI';
}
 
Where do you see the error, in the app itself.  Have u tried browser debugging to understand whats the core issue. Can you share the control  code so I can try. I am not aware of any such limitation. 
 
hemant

Thanks for the reply.

 

This is strange. What I observed is that the container contains the following class composition in a regular namespace

 

customControl MyPcfRegularNamespace FooBarControl MyPcfRegularNamespace.FooBarControl

while the "nested" namespace container classes are

 

customControl MyPcf Foo.Bar.FooBarControl MyPcf.Foo.Bar.FooBarControl

The css resource gets loaded. Checked this by directly selecting an id instead of going with the namespace and controlname and added some styles.

 

So when adding the namespace and control class like

 

MyPcf.Foo.Bar\.FooBarControl #inputid {background-color: red;}

The obvious background color doesn't get applied anymore.

 

Meanwhile I'll try figuring out what could be the issue that the classes differ in composition in contrast when I used just an oneword namespace.

I've just created a second pcf control with the namespace CompanyName.Crm.Pcf and as expected the applied css class is

 

customControl CompanyName Crm.Pcf.SampleAutocomplete
CompanyName.Crm.Pcf.SampleAutocomplete

where the namespace is not part of the sub-namespaces like it should be.

 

I've also created another project like yours with only one sub-namespace and the css gets applied.

 

@HemantG, please test this again with the same namespace and (minimum 2) sub-namespaces. If you can reproduce the issue I guess it's a bug considering there shouldn't be a limitation on sub-namespaces.

 

Thanks!

Bumping own thread as it is not possible as of now to use more than two sub-namespaces.

@hansgfixed I've tried to repro, running this command to create my PCF component:

pac pcf init --namespace Long.NameSpace.For --name MyControl --template field

And when rendered, I get this class attribute on my container DIV:

class="customControl Long NameSpace.For.MyControl Long.NameSpace.For.MyControl"

So the container has:

  1. The customControl indicator class
  2. The Long root namespace class
  3. The NameSpace.For.MyControl child namespace class
  4. The Long.NameSpace.For.MyControl full namespace class

From what you've posted in this thread:

MyPcf.Foo.Bar\.FooBarControl #inputid {background-color: red;}

The issue I'm seeing is the missing . at the beginning of your CSS selector indicating that you're looking for a class not an element named MyPcf, and the other \ characters indicating that this is a long class name that uses dots, not a string of classes on the same element, so this should work:

.MyPcf\.Foo\.Bar\.FooBarControl #inputid {background-color: red;}

Visual Studio Code showing what this CSS selector would matchVisual Studio Code showing what this CSS selector would match

 

 

View solution in original post

Many thanks Greg. This obviously was the issue all along.

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Users online (1,894)