- 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.
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?
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.
There should be some functionality coming soon that will excite you.
I'll have to check on this and get back to you, havent explored that myself! What's the use case here?
Thanks,
Clark
- 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.
- Main use: table rows act as the header, and then the drawer has the content, so there is no need for actual header.
- Thank you.
- Awesome, is that in the next update, when will that be coming out?
- 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.
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.
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.
:)
There should be a publicly available release candidate soon to check out. Not 100% sure on the timing at the moment, but soon!
Still checking on this with people that know more about this than me.
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.
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.
- Thank you, sorry for not being able to give better example for use of HTML.
- Unfortunately, Accordion is static in terms of how many sections it has, where table is dynamic on the number of rows.
- Ok.
- Thank you, I appreciate the help, and it would be really helpful to have that functionality.
- Awesome, thank you.
- 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).
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.
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.
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}}, {{$Model.UIModel1.data.0.Field2}}.
UIModel2: {{$Model.UIModel2.data.0.Field1}}, {{$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
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.
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}}, {{$Model.UIModel1.data.0.Field2}}.
UIModel2: {{$Model.UIModel2.data.0.Field1}}, {{$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="font-size:20px"> TextInHtml </span>" field="Html" enclosevalueinquotes="true"/>
</defaults>
</action>
</actions>
</actionsequence>
</actionsequences>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuid__page>
