This is a pretty specific, probably rare, situation that I accidentally found while previewing a page early in the process of building it. The gist is that when a page contains an image and the only model is a ui-only model, the page content will not load. However, either adding a model with Salesforce as the data source OR removing datasource=“salesforce” from the image tag XML fixes it.
Given that this issue is limited to pages using only a UI model, I am guessing it won’t come up much, but figured I’d share in case anyone else gets stuck on this. Or in case there is a need to have a page with an image that only contains UI models.
Some details:
I found this when I started building a page with an image in the header and without any models; checked the preview and it loaded fine. When I added a UI-only model, the preview page loaded, but did not display any content and there were no error messages in version 9.5.6.
Thinking maybe it was fixed in a later version, I tested this in a sandbox upgraded to version 10.0.5 and it still would not load the content, but in the later version, I got the following error message: “There was a problem rendering a component of type image: Cannot read property ‘getImageSource’ of undefined.” This occurred when the image source was either a static resource or URL. When I change the Data Source Type in the page builder from “salesforce” to “Ui-Only” the error message went away, but the image did not show up from a URL.
Found the solution after some testing – either adding a Salesforce-sourced model or removing datasource=“salesforce” from the image tag XML.
After building exactly what I interpretted as described: I was able to have this build work in 10.0.5. What am I missing:
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" useviewportmeta="true" showheader="false"> <models> <model id="UIOnly" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true"> <fields/> <conditions/> <actions/> </model> </models> <components> <image source="url" uniqueid="sk-fExCJ-102" datasource="Ui-Only" behavior="none" model="UIOnly" url="http://cdn.earthporm.com/wp-content/uploads/2015/10/XX-Proud-Mommies5__605.jpg"> <styles> <styleitem type="itemsize"/> <styleitem type="border"/> </styles> </image> </components> <resources> <labels/> <javascript/> <css/> </resources> <styles> <styleitem type="background" bgtype="none"/> </styles></skuidpage>
