pegasystems / constellation-ui-gallery

This open-source repository provides a collection of ready-to-use and customizable Constellation DX components. Use this resource to gain inspiration, best practices, and a solid foundation for implementing custom components.
https://pegasystems.github.io/constellation-ui-gallery/
Apache License 2.0
32 stars 29 forks source link

Comparison table does not work in web embed #70

Open psobolewski1992 opened 3 months ago

psobolewski1992 commented 3 months ago

In web embed, comparison table does not render due to the following line:

{fields[0].value.map((val: string, idx: number) => {
              const field = {
                type: 'Text',
                config: {
                  text: val,
                  displayMode: 'DISPLAY_ONLY'
                }
              };
              return (
                <th scope='col' key={`${tableId}-col-${idx}`} id={`${tableId}-col-${idx}`}>
                  {getPConnect().createComponent(field)}
                </th>
              );

This syntax works perfectly fine in normal portal but does not render in web embed, due to the following error: TypeError: Failed to construct 'Text': Please use the 'new' operator, this DOM object constructor cannot be called as a function. Since we do not know what are necessary attributes of text field we changed field object to:

 const field = {
                type: 'TextInput',
                config: {
                  text: `${val}`,
                  value: `${val}`,
                  label: '',
                  displayMode: 'DISPLAY_ONLY'
                }
              };

After performing this change, table renders correctly.