Constellation UI Custom Component not rendering correctly in App Studio view

I’m trying to show a button using a custom react component on a view on Pega 8.8

Using the SDK, if I open http://localhost:3502/portal or http://localhost:3502/embedded the button is being rendered on both portal application mode and embedded mode.

However, if I try to add the custom component to a View on App Studio it shows as a Text Input field.

I have tried using the subtype Text (button label A) and Text-URL (button label B) as shown here: Editing the field (pega.com)

But the tutorial never shows the final result so I’m not sure if the button should show on the App Studio View or not.

Is this the expected behavior or should App Studio render the component as seen on the screenshots?

@VictorB94 Hi. And thank you for your interest in the Constellation React SDK!

When you create a custom component using the React SDK, you may notice that there are actually 2 components that are created as part of the process: one in the custom-sdk folder and one in the custom-constellation.

The version of the custom component that is in custom-sdk is the implementation that will be run/rendered by the SDK at run time, It’s coded using the design system of your choice. (The samples out-of-the-box use Material UI.) The version of the custom component that is in custom-constellation is published to your Infinity server (when you do a publish) and its code uses the Pega Constellation design system (since it’s rendered in the context of Pega’s App Studio that only knows about the Constellation design system.

So, the version of the custom component you’re seeing in App Studio is the custom-constellation version and, perhaps, you haven’t updated it to render something other than a TextInput. Note that it isn’t necessary possible for you to easily get the rendering of the custom-constellation version to look like your “real” custom component since you’re not using the same design system for each. The customer-constellation version is often a simple rendering to provide some level of visual feedback in App Studio.

If you make edits to the version in the custom-constellation version and re-publish, you should see that code reflected in App Studio.

I hope this helps explain the behavior that I think you’re seeing. If this isn’t the case, please provide more information and we’ll try to dig a little deeper into the behavior you’re seeing.

@JohnArnold Thank you for the response and clarification.

After updating the component on custom-constellation we were able to render it on a case in Pega. It still shows as a TextInput on App Studio but works fine in the Pega portal.