Display Errors In Modal setting does not work:
A V2 page has a Table component. The Table includes a Add Record global action. The Global Action opens a Modal, which has a Form component for entering the new data. There are required fields in the Form; there are also validation rules in the database.
The Modal properties specify that errors are to be displayed “In modal,” not “On page.”
However, the error messages are displayed behind the modal, above the Table on the main page.
Required fields can be identified with Form-level “Show errors inline,” but validation errors from the database cannot be seen. This seems to be the purpose for “Display errors In modal,” but the option does not produce the expected result.
Environment:
- API Version: v2
- Release: Dubai
- Release version: 15.3.5
- Platform: Salesforce
Brief Summary of the Defect/Issue:
Modal property Display errors - In Modal does not display error messages on the Modal
Action Performed:
Attempt a model save with required fields blank and/or input violating database validation rules
Expected Result:
Error messages should appear [somewhere] in the modal window
Actual Result:
Error messages actually appear in the main page, within the Table component (above the table body but below the Global Actions button).
Additional Resources:
Hi Mike! Thanks for reporting this. I’m trying to reproduce the issue you’re seeing in 15.3.5 and so far haven’t been successful.
At the bottom of this post is the page I’ve been experimenting with attempting to reproduce the issue (using the Pages object). Can you try it out in your org? In my org the error message is always showing inside the modal.
Let me know if there’s something I’ve missed. Maybe there’s another property set on the table or the model that is contributing to this issue. For example:
- Is it a custom validation rule?
- When you’re creating the new row, is it created in a separate model on the table object, or in the same model as the table?
Test Page
<skuid__page unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">
<models>
<model id="pages_table" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" sobject="skuid__Page__c">
<fields>
<field id="Name"/>
</fields>
<conditions/>
<actions/>
</model>
<model id="pages_createnew" limit="20" query="false" createrowifnonefound="false" datasource="salesforce" sobject="skuid__Page__c">
<fields>
<field id="skuid__Status__c"/>
<field id="Name"/>
</fields>
<conditions/>
<actions/>
</model>
</models>
<components>
<skuid__wrapper uniqueid="sk-6NW-77168">
<components>
<skuid__text contents="<strong>Steps to test</strong> <ol> 	<li>Open any of the modals (in the standalone button or in the global actions)</li> 	<li>Leave the name blank (or enter invalid characters like ? or &amp;) and click&nbsp;Save&mdash; an error will appear.&nbsp;</li> </ol> <em>expected behavior:&nbsp;</em>error shows in modal" uniqueid="sk-6Nb-78605">
<styles>
<spacing top="3" bottom="3" left="3" right="3"/>
</styles>
</skuid__text>
</components>
<styles>
<spacing/>
</styles>
<background type="color" color="#dbeef3"/>
</skuid__wrapper>
<skuid__buttonSet uniqueid="sk-6K0-17440" position="left">
<groups>
<skuid__buttonGroup uniqueId="sk-6K0-17438">
<buttons>
<skuid__button label="Independent Modal (test outside of table)" uniqueId="sk-6K0-17439">
<actions>
<action type="createRow" model="pages_createnew" appendorprepend="prepend" defaultmodefornewitems="edit" affectedrows="context"/>
<action type="showModal">
<skuid__modal title="New Modal" width="640px" ariaRole="dialog">
<components>
<skuid__form showErrorsInline="true" model="pages_createnew" uniqueid="sk-6KI-23865" mode="edit" showSaveCancel="true">
<columns>
<column>
<sections>
<section title="New Section">
<fields>
<skuid__field id="skuid__Status__c" uniqueId="sk-6KI-23866"/>
</fields>
</section>
</sections>
</column>
</columns>
</skuid__form>
</components>
</skuid__modal>
</action>
</actions>
</skuid__button>
</buttons>
</skuid__buttonGroup>
</groups>
<styles>
<spacing top="3" bottom="3"/>
</styles>
</skuid__buttonSet>
<skuid__table allowColumnFreezing="dragDrop" model="pages_table" uniqueid="sk-6KZ-27918" mode="read" showSaveCancel="true">
<fields>
<field id="Name" uniqueid="fi-6KZ-28378"/>
</fields>
<filtering enableSearch="false"/>
<actions>
<action type="multi" label="create new row in new row model" icon="sk-webicon-ink:add">
<actions>
<action type="createRow" model="pages_createnew" appendorprepend="prepend" defaultmodefornewitems="edit" affectedrows="context"/>
<action type="showModal">
<skuid__modal title="New Modal" width="640px" ariaRole="dialog">
<components>
<skuid__form showErrorsInline="true" model="pages_createnew" uniqueid="sk-6Ks-42711" mode="edit" showSaveCancel="true">
<columns>
<column>
<sections>
<section title="New Section">
<fields>
<skuid__field id="skuid__Status__c" uniqueId="sk-6Ks-42712"/>
<skuid__field id="Name" uniqueId="sk-6O_-94516"/>
</fields>
</section>
</sections>
</column>
</columns>
<conditions>
<condition type="contextrow" field="Id" mergefield="Id" operator="="/>
</conditions>
</skuid__form>
</components>
</skuid__modal>
</action>
</actions>
</action>
<action type="multi" label="create new row in table model" icon="sk-webicon-ink:add">
<actions>
<action type="createRow" model="pages_table" appendorprepend="prepend" defaultmodefornewitems="edit" affectedrows="context"/>
<action type="showModal">
<skuid__modal title="New Modal" width="640px" ariaRole="dialog">
<components>
<skuid__form showErrorsInline="true" model="pages_table" uniqueid="sk-6Oa-86245" mode="edit" showSaveCancel="true">
<columns>
<column>
<sections>
<section title="New Section">
<fields>
<skuid__field id="skuid__Status__c" uniqueId="sk-6Ob-87184"/>
<skuid__field id="Name" uniqueId="sk-6Oe-88780"/>
</fields>
</section>
</sections>
</column>
</columns>
<conditions>
<condition type="contextrow" field="Id" mergefield="Id" operator="="/>
</conditions>
</skuid__form>
</components>
</skuid__modal>
</action>
</actions>
</action>
</actions>
<rowActions/>
<massActions/>
<exportProperties useTableColumns="true"/>
<sorting enable="false"/>
</skuid__table>
</components>
<resources>
<labels/>
<javascript/>
<css/>
<actionsequences/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuid__page>
The difference is that my page uses a Button Set on the Modal. I only tested the “create new row in table model” Action because that matches my scenario. But your page code as provided displays the error messages where expected using the Save button in the Form footer. Add a Button Set to the Modal, using the same model (pages_table), and the error message appears on the main page.
(As I recall, there is a similar issue in V1, where actions on a popup throw an error in a model that is not represented in components on that popup. Those errors are displayed on the main screen - if at all. My workaround for that situation was to add a table on that model to the popup. As a matter of fact - that works here too!!! I’ve included an xml snippet you can add to yours between lines 107 and 108.)
<skuid__buttonSet uniqueid="sk-7JI-32274" model="pages_table">
<groups>
<skuid__buttonGroup uniqueId="sk-7JI-32272">
<buttons>
<skuid__button label="compare this Save button to the one with the green arrow icon" uniqueId="sk-7JI-32273">
<actions>
<action type="save">
<models>
<model>pages_table</model>
</models>
</action>
</actions>
</skuid__button>
</buttons>
</skuid__buttonGroup>
</groups>
</skuid__buttonSet>
<skuid__table allowColumnFreezing="dragDrop" model="pages_table" uniqueid="sk-7Ne-21837" mode="read" pageSize="10" saveIcon="sk-webicon-ink:inheritance">
<fields/>
<filtering enableSearch="false"/>
<actions/>
<rowActions/>
<massActions/>
<exportProperties useTableColumns="true"/>
<sorting enable="false"/>
</skuid__table>
Hey Mike, thanks for that! I can reproduce the issue and have brought it to the attention of the product team.
In the meantime it sounds like you’ve found a workaround - using a button on a table in the modal instead. Are you entering new row details in that in-modal table, or are you doing something to hide the table body?
Other workaround options:
- button field (this is nice because you can add more logic and actions, like to close the modal)
- built-in save button on form or table
- Use a separate model to handle creating the new row. Especially if you add more layers and complexity to this modal, it can be helpful to have a separate model to use in the modal and just requery the table model (or do a get more query) when you save the new row.
Cheers.
Great! Thanks.
Actually, I am not using the Table button as a workaround. It is too clunky a solution, as I do not actually want to show any tabular data just to expose a button. The Modal is used to create a new record with a Form. We do not use the Form’s button because we need more logic than saving the model - closing the Modal, as you suggested.
One thing the product team might want to keep in mind is placement of the default Save and Close buttons across all components. We have standardized on Above the data, on the Right, as the table component does. The form component not only puts the buttons Below the data, but also on the Left. Please keep the users - OUR users, not Skuid’s - in mind. Consistency makes for a better user experience, and we strive to provide that.
Hi Mike, thanks for the feedback. I’ve creating an idea to standardize button placement locations that you can vote up: Standardize Default Button Locations Across All Components
If you haven’t already, I recommend trying the button field as an interim solution for this case. If you click on the form section as shown below, you should see an option to add button group. You can place the button(s) at the bottom or at the top of the fields as you like, and you can update the “Buttons” label (for example delete it and a space so it won’t show up). You can also columns to your form if you’d like more flexibility with the layout.
Thanks for creating the Idea. 
The embedded button set is a workable alternative. We’ve done something like that in V1. But, wow! There are some issues with Button Sets, and limits on the utility of this as a workaround:
Beyond the restructuring of the Form required to get the buttons at the top…
The button field has a label that has to be overridden with a space, not a null.
The buttons cannot be right-justified.
The button set style defaults to borderless buttons, not to the Default. I had to duplicate the Default style for a button set and give it a separate name.
And the composer struggles with adding, moving, or deleting button groups, and adding or moving buttons within or between groups.
