SKUID V2 - Table Bugs and Missing Features

edited August 18, 2020 in Questions
Hi,
Table related bugs and missing features:
1. HTML in table header no working properly (this might be the same in table rows). This can be reproduced with the XML before.
2. Disabling Header - it's not possible, I can make it hidden by adding an empty sapce to custom label of column header, and using Design Systems to hide boarders. Though, there is still big white space, and when I press on the empty header cell there will be golden boarder cause of selection. This can also be reproduced using the XML before, and seen in the screenshot.
3.Cannot apply custom styles to checkboxes inside a table.
4. Field Render snippets (for tables and forms), they don't exist in v2 and there is nothing to replace them. I cannot use render conditions since they don't contain context (snippet context issue is an issue in itself that needs to be solved). How can I reproduce functionality of Field Render Snippet?
5. Unrelated to tables, but how can I call Inline Javascript functions from console?

Thank you,
Lukas

ControlC (Pastebin not working):
https://controlc.com/8f325696

XML:
<skuid__page unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" theme="Test_Design">
<models>
<model id="User" query="true" createrowifnonefound="false" datasource="salesforce" sobject="User" limit="20">
<fields>
<field id="Username"/>
<field id="Is_Community_Admin__c"/>
<field id="Account.Name"/>
<field id="Id"/>
<field id="Email"/>
<field id="UserRole.Name"/>
</fields>
<conditions>
<condition type="userinfo" value="" field="Id" operator="=" enclosevalueinquotes="true" userinfotype="userid"/>
</conditions>
<actions/>
</model>
</models>
<components>
<skuid__table allowColumnFreezing="dragDrop" model="User" uniqueid="sk-2Mf-10028" mode="read">
<fields>
<field id="Username" uniqueid="fi-2Mt-12341" label="<b> Username</b>"/>
<field id="Email" uniqueid="fi-2NM-15907"/>
<field id="UserRole.Name" uniqueid="fi-2NM-15908"/>
</fields>
<filtering enableSearch="false"/>
<rowActions/>
<massActions/>
</skuid__table>
<skuid__table allowColumnFreezing="dragDrop" model="User" uniqueid="sk-2NO-16187" mode="read" pageSize="10">
<fields>
<field id="Username" uniqueid="fi-2NV-18672" label=" "/>
<field id="Id" uniqueid="fi-2NV-18673" label=" ">
<renderConditions logictype="and" onhidedatabehavior="keep"/>
<enableConditions/>
</field>
<field id="Email" uniqueid="fi-2NV-18674" label=" "/>
</fields>
<filtering enableSearch="false"/>
<rowActions/>
<massActions/>
<styles>
<spacing/>
</styles>
<renderConditions logictype="and"/>
<styleVariantConditions/>
</skuid__table>
</components>
<resources>
<labels/>
<javascript/>
<css/>
<actionsequences/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuid__page>

Answers

  • Clark CreggClark Cregg ✭✭✭
    edited August 20, 2020

    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...

    1. 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.
    2. I'd be happy to log the request to hide the table header as an enhancement. Could you share more about your use case for this so I can give our Product Management team clear information? 
    3. Custom Checkbox styles can be applied to tables through the DSS as well. If you go to the table component and look under "Nested Components" you will see an option to select a checkbox style that you have created.
    4. There should be some functionality coming soon that will excite you.
    5. I'll have to check on this and get back to you, havent explored that myself! What's the use case here?

    Thanks,

    Clark

  • edited August 20, 2020
    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
  • All great questions again! Thanks for the context.

    1. 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.
    2. I'll see if I can write this up, i may come back with questions. You may be able to get something similar working with an accordion component that would be more standard behavior for the component.
    3. :)
    4. There should be a publicly available release candidate soon to check out. Not 100% sure on the timing at the moment, but soon!
    5. Still checking on this with people that know more about this than me.
    6. This is something we've been working on for the next release as well. It will look different than it has in the past, but i've played with it in beta testing and thoroughly enjoyed the flexibility/scalability of the new setup.
    7. This has been resolved as of 12.4.12 from what I am seeing in some tests that I just ran. So you should be good to go if you update to latest version.


  • 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.
    4. Ok.
    5. Thank you, I appreciate the help, and it would be really helpful to have that functionality.
    6. Awesome, thank you.
    7. 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">

    <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>

    </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="&lt;br /&gt;&#10;&lt;br /&gt;&#10;&lt;br /&gt;&#10;UIModel1: {{$Model.UIModel1.data.0.Field1}},&amp;nbsp;{{$Model.UIModel1.data.0.Field2}}.&lt;br /&gt;&#10;UIModel2: {{$Model.UIModel2.data.0.Field1}},&amp;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>

    </components>

    <resources>

        <labels/>

        <javascript/>

        <css/>

        <actionsequences/>

    </resources>

    <styles>

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

    </styles>

    </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.
    • If column freezing is enabled the draggable button to change how many rows are frozen is offset to the bottom right 100px~ in both directions. Unlike with draws this never works.


Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!