SKUID V2 - Table Bugs and Missing Features

1. Hello!

   I tried to get the XML to work in a local environment, but I couldn’t quite get it to work. I’ll answer your points based on what I see in the XML itself…

   Table Headers aren’t currently designed to accept HTML as far as I understand. I see that you are looking to bold your table header text. This can be done through the DSS in the Table Component under the “Header Row” section with the “Font Weight” property.

Thanks,

Clark

1. The bold was just an example, the main use would be using merge syntax to create dynamic name, or HTML to split up the line.
2. Main use: table rows act as the header, and then the drawer has the content, so there is no need for actual header.
3. Thank you.
4. Awesome, is that in the next update, when will that be coming out?
5. It’s the fastest and best way to test JS functions. before i could just call them (e.g. testFunc(arg1, arg2…), and this would run the function). It’s useful if I need to do iterative (with slight change) testing (as I could also override them from console). Or, especially useful when the function is async and might produce error messages which if they are not called directly (from console) then they won’t be shown.

Two additional questions
6. Is support for CSS getting added any time soon? It’s used for everything, it might be minor changes or more precise control (instead of 4 or 8px), or making use of attributes options (e.g. no-wrap for responsive grid).
7. Form, when fields are not rendered (due to render conditions) in a row then they create an empty div and mess up the layout, will that be fixed?

Thank you,
Lukas

1. All great questions again! Thanks for the context.

   I will log the enhancement request for HTML in table headers. I think there are some requests out there for some related functionality. You can currently use global merge syntax in table headers as well.

1. Thank you, sorry for not being able to give better example for use of HTML.
2. Unfortunately, Accordion is static in terms of how many sections it has, where table is dynamic on the number of rows.
3. Ok.
4. Thank you, I appreciate the help, and it would be really helpful to have that functionality.
5. Awesome, thank you.
6. Yes, thank you.

I’ve been working more with Tables and forms, and these issues related to 1. Original issue surfaced.

The XML bellow the issues is includes example for each issue. The XML contains 2 models (UIModel1, UIModel2) and each has 2 fields (Field1, Field2).

8. A Rich Text with model set to UIModel1 and it contains Global Merge Syntax used for both fields of both models. Global Merge Syntax is not updating for UIModel2, unless a 2nd row is added.

9. Global Merge Syntax in Table’s header never updates (no matter how many rows are added to a table). Though, local merge syntax is fine I believe.

10. Local Merge Syntax is not working for Form Field Headings.

<skuid__page unsavedchangeswarning=“yes” personalizationmode=“server” showsidebar=“true” showheader=“true”>

<fields>

    <field id="Field1" displaytype="TEXT" length="255"/>

    <field displaytype="TEXT" length="255" id="Field2"/>

</fields>

<conditions/>

<actions/>

<fields>

    <field id="Field1" displaytype="TEXT" length="255"/>

    <field id="Field2" displaytype="TEXT" length="255"/>

</fields>

<conditions/>

<actions/>

<skuid__buttonSet model=“UIModel1” uniqueid=“sk-XpR-6174”>

<groups>

    <skuid__buttonGroup uniqueId="sk-XpR-6172">

        <buttons>

            <skuid__button label="AddRow" uniqueId="sk-XpR-6173">

                <actions>

                    <action type="createRow" model="UIModel1" appendorprepend="prepend" defaultmodefornewitems="edit" affectedrows="context">

                        <defaults>

                            <default valuesource="fieldvalue" field="Field1" enclosevalueinquotes="true" value="UIModel1Filed1Value"/>

                            <default valuesource="fieldvalue" field="Field2" enclosevalueinquotes="true" value="UIModel1Filed2Value"/>

                        </defaults>

                    </action>

                    <action type="createRow" model="UIModel2" appendorprepend="prepend" defaultmodefornewitems="edit" affectedrows="context">

                        <defaults>

                            <default valuesource="fieldvalue" field="Field1" enclosevalueinquotes="true" value="UIModel2Filed1Value"/>

                            <default valuesource="fieldvalue" field="Field2" enclosevalueinquotes="true" value="UIModel2Filed2Value"/>

                        </defaults>

                    </action>

                </actions>

            </skuid__button>

        </buttons>

    </skuid__buttonGroup>

</groups>

</skuid__buttonSet>

<skuid__text contents="


UIModel1: {{$Model.UIModel1.data.0.Field1}},&nbsp;{{$Model.UIModel1.data.0.Field2}}.
UIModel2: {{$Model.UIModel2.data.0.Field1}},&nbsp;{{$Model.UIModel2.data.0.Field2}}." uniqueid=“sk-Xq7-23004” allowHtmlInBuilder=“false” model=“UIModel1”>

<styles>

    <spacing/>

</styles>

<renderConditions logictype="and"/>

<styleVariantConditions/>

</skuid__text>

<skuid__table allowColumnFreezing=“dragDrop” model=“UIModel1” uniqueid=“sk-Xpv-19471” mode=“read” pageSize=“10” enableDrawers=“true”>

<fields>

    <field id="Field1" label="{{$Model.UIModel1.data.0.Field1}}" uniqueid="fi-Xs--43838"/>

    <field id="Field2" label="{{$Model.UIModel1.data.0.Field2}}" uniqueid="fi-Xs--43839"/>

</fields>

<filtering enableSearch="false"/>

<rowActions/>

<massActions/>

<drawer>

    <components>

        <skuid__form showErrorsInline="true" model="UIModel1" uniqueid="sk-Xt3-44790" mode="read">

            <sections>

                <section title="New Section" showHeading="false">

                    <rows>

                        <row>

                            <fields>

                                <skuid__field id="Field1" uniqueId="sk-Xt8-45828" label="{{Field2}}"/>

                            </fields>

                        </row>

                        <row>

                            <fields>

                                <skuid__field id="Field2" uniqueId="sk-Xt8-45833" label="{{$Model.UIModel2.data.0.Field1}}"/>

                            </fields>

                        </row>

                    </rows>

                </section>

            </sections>

        </skuid__form>

    </components>

</drawer>

</skuid__table>

<skuid__table allowColumnFreezing=“dragDrop” model=“UIModel2” uniqueid=“sk-XrV-33846” mode=“read”>

<fields>

    <field id="Field1"/>

    <field id="Field2"/>

</fields>

<filtering enableSearch="false" searchMethod="client"/>

<rowActions/>

<massActions/>

</skuid__table>

<labels/>

<javascript/>

<css/>

<actionsequences/>

<styleitem type="background" bgtype="none"/>

</skuid__page>

Thanks @lukaspovilonis, we’ll take a look at this. Can you let me know what version of Skuid you’re using?

Hi Anna,

Thank you for taking time to look at this.

version: 13.0.4

Best,

Lukas

Hey Lukas, thanks so much for the repro page. Here’s what we found:

A Rich Text with model set to UIModel1 and it contains Global Merge Syntax used for both fields of both models. Global Merge Syntax is not updating for UIModel2, unless a 2nd row is added.

We found that if you sent the Rich Text model to the model which is updated last (in this case UIModel2), Global Merge Variables in the rich text field will update as expected.

Global Merge Syntax in Table’s header never updates (no matter how many rows are added to a table). Though, local merge syntax is fine I believe.

With this one, if the row exists on page load, global merge syntax will work in the table header. Can you share more about your use case here?

Local Merge Syntax is not working for Form Field Headings.

As a workaround, you can use global merge syntax here. The form Section headers do respect local merge syntax.

Hi Anna,

Thank you once again for your time.

We found that if you sent the Rich Text model to the model which is updated last (in this case UIModel2), Global Merge Variables in the rich text field will update as expected.

As you said that worked.

With this one, if the row exists on page load, global merge syntax will work in the table header. Can you share more about your use case here?

Essentially, there is a Year Filter on YearModel (Allows users to select 2020, 2019, etc.), based on the filter I retrieve data for current year and previous, adjust it, push to TableModel and the data is displayed. The table header has to contain the the years for clarity. Due to it being dynamic the model will not have the row on page load.

As a workaround, you can use global merge syntax here. The form Section headers do respect local merge syntax.

Merge syntax (local and global) worked for section header, but neither worked for field headings. Also, it would be better if form fields worked with local merge syntax as I use forms in decks.

Best,

Lukas

• Follow up to the previous post,

  11. Another table bug, if there are enough columns to make x-scroll bar show up and the scroll bar is not at end of either edge, then when select a cell (for the sake of it or to edit) the scroll bar moves, where i would expect the scroll bar to stay put and then cell to be selected or change to edit mode.

  12. If a table is created using Javascript:

  If there is a drawer then there will be a visual bug where the drawer button is offset to the right. by 40px~. If user hovers over the button it will go back to its place, though its very apparent and clients use our product.

Hi @lukaspovilonis, could you update your test page or make a new one for those new issues? Thanks!

Thanks for the updated test page, @lukaspovilonis. So it’s a bit easier to keep track of where things are at per issues, I’ve split off a new post to track 11 & 12: http://community.skuid.com/discussion/8015549/issues-with-v2-table-scroll-bars-dynamically-created-table

The issues regarding global and local merge syntax have been logged (Global Merge Syntax does not handle data changes & v2 local merge syntax not accessible in Form field label). We’ll let you know when these issues are resolved.

Hi @Lukas thank you for your patience! Skuid has fixed the issue you raised regarding local merge syntax not working in form field headings (issue DSC-2619) in the new 13.0.13 release which is now available on the Skuid Releases page.

Best practices for upgrading can be found in Upgrading Skuid on Salesforce. As a reminder, Salesforce does NOT allow reverting back to prior versions of managed packages. Skuid always recommends installing new versions in a non-business critical sandbox environment to test all mission critical functionality before installing into a production environment. We also recommend that you update out of date themes after you upgraded. Please let us know if you continue to encounter any problems with this issue after upgrading.

Thanks again for alerting us of this issue!

Hi Anna,

Sure, I will try my best to split up the posts from now, not sure if this issue should also be split up, sorry…

Thank you for the update. Merge syntax for fields seems to be working, much appreciated! Though, merge syntax (global and local) aren’t working for tables, it can be reproduced with the page below (its same but with Text field issue added).

Another issue with merge syntax: Using merge syntax in Text field which has allowed HTML, where the field in merge-syntax contains HTML. Use case: each record contains client data, and a specific field contains a blurb specific to that client, the blue is to be displayed in Home Page.

Thank you,

Lukas

<skuid__page unsavedchangeswarning=“yes” personalizationmode=“server” showsidebar=“true” showheader=“true”>

<models>

    <model id="UIModel1" limit="20" query="true" createrowifnonefound="false" datasource="Ui-Only">

        <fields>

            <field id="Field1" displaytype="TEXT" length="255"/>

            <field displaytype="TEXT" length="255" id="Field2"/>

        </fields>

        <conditions/>

        <actions/>

    </model>

    <model id="UIModel2" limit="20" query="true" createrowifnonefound="false" datasource="Ui-Only">

        <fields>

            <field id="Field1" displaytype="TEXT" length="255"/>

            <field id="Field2" displaytype="TEXT" length="255"/>

        </fields>

        <conditions/>

        <actions/>

    </model>

    <model id="UIModel3" limit="" query="false" datasource="Ui-Only" createrowifnonefound="true">

        <fields>

            <field id="Html" displaytype="TEXT" length="255"/>

        </fields>

        <conditions/>

        <actions/>

    </model>

</models>

<components>

    <skuid__buttonSet model="UIModel1" uniqueid="sk-XpR-6174">

        <groups>

            <skuid__buttonGroup uniqueId="sk-XpR-6172">

                <buttons>

                    <skuid__button label="AddRow" uniqueId="sk-XpR-6173">

                        <actions>

                            <action type="createRow" model="UIModel1" appendorprepend="prepend" defaultmodefornewitems="edit" affectedrows="context">

                                <defaults>

                                    <default valuesource="fieldvalue" field="Field1" enclosevalueinquotes="true" value="UIModel1Filed1Value"/>

                                    <default valuesource="fieldvalue" field="Field2" enclosevalueinquotes="true" value="UIModel1Filed2Value"/>

                                </defaults>

                            </action>

                            <action type="createRow" model="UIModel2" appendorprepend="prepend" defaultmodefornewitems="edit" affectedrows="context">

                                <defaults>

                                    <default valuesource="fieldvalue" field="Field1" enclosevalueinquotes="true" value="UIModel2Filed1Value"/>

                                    <default valuesource="fieldvalue" field="Field2" enclosevalueinquotes="true" value="UIModel2Filed2Value"/>

                                </defaults>

                            </action>

                        </actions>

                    </skuid__button>

                </buttons>

            </skuid__buttonGroup>

        </groups>

    </skuid__buttonSet>

    <skuid__text contents="

UIModel1: {{$Model.UIModel1.data.0.Field1}},&nbsp;{{$Model.UIModel1.data.0.Field2}}.
UIModel2: {{$Model.UIModel2.data.0.Field1}},&nbsp;{{$Model.UIModel2.data.0.Field2}}." uniqueid=“sk-Xq7-23004” allowHtmlInBuilder=“false” model=“UIModel1”>

        <styles>

            <spacing/>

        </styles>

        <renderConditions logictype="and"/>

        <styleVariantConditions/>

    </skuid__text>

    <skuid__accordion uniqueid="sk-2Cns-15512">

        <sections>

            <section title="Table">

                <components>

                    <skuid__table allowColumnFreezing="dragDrop" model="UIModel1" uniqueid="sk-Xpv-19471" mode="read" pageSize="10" enableDrawers="true">

                        <fields>

                            <field id="Field1" label="{{$Model.UIModel1.data.0.Field1}}" uniqueid="fi-Xs--43838"/>

                            <field id="Field2" label="{{$Model.UIModel1.data.0.Field2}}" uniqueid="fi-Xs--43839"/>

                        </fields>

                        <filtering enableSearch="false"/>

                        <rowActions/>

                        <massActions/>

                        <drawer>

                            <components>

                                <skuid__form showErrorsInline="true" model="UIModel1" uniqueid="sk-Xt3-44790" mode="read">

                                    <sections>

                                        <section title="New Section" showHeading="false">

                                            <rows>

                                                <row>

                                                    <fields>

                                                        <skuid__field id="Field1" uniqueId="sk-Xt8-45828" label="{{Field2}}"/>

                                                    </fields>

                                                </row>

                                                <row>

                                                    <fields>

                                                        <skuid__field id="Field2" uniqueId="sk-Xt8-45833" label="{{$Model.UIModel2.data.0.Field1}}"/>

                                                    </fields>

                                                </row>

                                            </rows>

                                        </section>

                                    </sections>

                                </skuid__form>

                            </components>

                        </drawer>

                    </skuid__table>

                    <skuid__table allowColumnFreezing="dragDrop" model="UIModel2" uniqueid="sk-XrV-33846" mode="read">

                        <fields>

                            <field id="Field1" uniqueid="fi-2Ck7-8082"/>

                            <field id="Field2" uniqueid="fi-2Ck7-8083"/>

                        </fields>

                        <filtering enableSearch="false" searchMethod="client"/>

                        <rowActions/>

                        <massActions/>

                    </skuid__table>

                </components>

            </section>

            <section title="Form">

                <components>

                    <skuid__deck columnGutter=".75em" rowGutter=".75em" model="UIModel1" showSaveCancel="false" verticalAlign="top" minWidth="350px" uniqueid="sk-2Cmw-9210">

                        <components>

                            <skuid__form showErrorsInline="true" model="UIModel1" uniqueid="sk-2Cmu-8567" mode="read">

                                <sections>

                                    <section title="New Section" showHeading="false">

                                        <rows>

                                            <row>

                                                <fields>

                                                    <skuid__field id="Field1" uniqueId="sk-2CnK-13455" label="{{$Model.UIModel1.data.0.Field1}}"/>

                                                </fields>

                                            </row>

                                            <row>

                                                <fields>

                                                    <skuid__field id="Field2" uniqueId="sk-2CnK-13470"/>

                                                </fields>

                                            </row>

                                        </rows>

                                    </section>

                                </sections>

                            </skuid__form>

                        </components>

                        <filtering enableSearch="false"/>

                    </skuid__deck>

                </components>

            </section>

            <section title="Text">

                <components>

                    <skuid__text contents="{{Html}}

------

{{{Html}}}

------

Expected:
TextInHtml " uniqueid=“sk-2Co2-18811” allowHtmlInBuilder=“true” model=“UIModel3”>

                        <styles>

                            <spacing/>

                        </styles>

                    </skuid__text>

                </components>

            </section>

        </sections>

    </skuid__accordion>

</components>

<resources>

    <labels/>

    <javascript/>

    <css/>

    <actionsequences>

        <actionsequence id="b24f9fbe-4b6f-4122-b51f-7849a9439b0c" label="New sequence" type="event-triggered" event-scope="component" event-name="page.rendered">

            <description/>

            <actions>

                <action type="createRow" model="UIModel3" appendorprepend="prepend" defaultmodefornewitems="edit" affectedrows="all">

                    <defaults>

                        <default valuesource="fieldvalue" value="<span style=&quot;font-size:20px&quot;> TextInHtml </span>" field="Html" enclosevalueinquotes="true"/>

                    </defaults>

                </action>

            </actions>

        </actionsequence>

    </actionsequences>

</resources>

<styles>

    <styleitem type="background" bgtype="none"/>

</styles>

</skuid__page>