Answered

PCF control appears different in designer than in CRM

(0) Share

Report

Posted on by Christopher Klein

Hello,

I've been working to create a custom address control that the field looks like you would expect on an envelope window and when you click on the field it pops out the individual fields to edit.

When I test the control in the designer it looks correct

But when I build the solution, install it into CRM, add a text field and then add the custom control to the field I end up with this:

All of the fields stack.

The 'full address' string is built up

let multiLineAddress =

this.state.street1+"\n"

+this.state.street2+"\n"

+this.state.street3+"\n"

+this.state.city+" "

+this.state.state+" "

+this.state.zip

Does anyone have any idea what might be causing this?

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (5)

Answers (1)

a33ik 3,306 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!
Hello,

Instead of building one you could save some time and use something that I built earlier and works exactly the way you wanted - https://github.com/AndrewButenko/ABControlsToolkit/wiki/Composite-Address-Control

But code wise here is what I used:

private defaultFormatAddress = (address: any): string => { let formattedAddress = address.street1 ?? ""; if (address.street2) { formattedAddress += '\n' + address.street2; } if (address.street3) { formattedAddress += '\n' + address.street3; } if (address.city) { formattedAddress += '\n' + address.city; } if (address.county) { formattedAddress += '\n' + address.city; } if (address.state) { formattedAddress += ', ' + address.state; } if (address.postalcode) { formattedAddress += ' ' + address.postalcode; } if (address.country) { formattedAddress += '\n' + address.country; } return formattedAddress; }

Was this reply helpful? Yes No
Christopher Klein 48 on at

Like (0)

Report
Copy link

Link copied!

Hi Andrew,
This is based off of your controls. The only reason we didn't just use your ABControlsToolKit is that it is managed, and we would not have access to the source code in the event something changed in the future with browser, etc that caused it to stop working.
I started with the original Composite-Address control but it was too deprecated, and I couldn't build it so then I looked at the FullNameControl which used React and I was able to expand upon that, adding 3 additional fields.

No real difference between your code snippet and mine, take 3 fields append \n to them and then concatenate the next 3 with a space together.

More confused as to why it shows in the preview one way but stacked in CRM.

Edit: I think I just noticed what the cause is. Since I used the FullNameControl has the base, it just allows for a Singleline.text control, but looking over the wiki for the Composite Address Control it allows for SingleLine.text, Singleline.TextArea and Multiple.
Just need to figure out how to implement that functionality to allow for a TextArea control.

Was this reply helpful? Yes No
Verified answer

a33ik 3,306 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!
Here are slices of manifest file I used:

<control namespace="AButenko" constructor="CompositeAddress" version="0.0.4" display-name-key="Composite Address Control" description-key="Use this control to minimize the size of address section on the form and format it the way you want" control-type="standard" preview-image="Imgs/Preview.gif"> <property name="value" display-name-key="Full Address" description-key="Full Address" of-type-group="Strings" usage="bound" required="true" />

and

<type-group name="Strings"> <type>SingleLine.Text</type> <type>SingleLine.TextArea</type> <type>Multiple</type> </type-group>

Let me know if it helped.

Was this reply helpful? Yes No
Christopher Klein 48 on at

Like (0)

Report
Copy link

Link copied!

That solved it for me! Thanks for the input and the work behind this, never tried to create a custom control before and this has been 'educational' on many levels 🙂

Was this reply helpful? Yes No
a33ik 3,306 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

I'm glad I was able to help you!

Was this reply helpful? Yes No