Display entity data in multiple columns on a portal page

[paulsnolan]

Hi All

I have a question regarding how best to display/style entity data in multiple columns on a portal page.

I've created a web template and some bespoke section/css classes to render an image. I need to be able to display some entity data below this image

I've included the liquid statement {% editable page 'adx_copy' %} in the template. The page has a section with one column. I've got an entity form that is placed in this column. The entity form has two columns and, by editing the form in the studio, each column has various fields from the entity. I'm struggling to see how to style the form to get the desired look and feel. I've styled some other pages to have grey background containers etc. but I can't see how to approach styling the entity form.

Attached is the desired layout and my attempt without any styling. Any help would be welcome.

[OOlashyn]

Hi @paulsnolan ,

Does your entity form need to be editable or it is read-only? If it is read-only I would suggest you remove the entity form and create a more complex layout with liquid to get the data via the entities object. If you do need to be able to edit the data you might still use liquid to create a custom layout and use Web API to push it back to the system. Finally, if you absolutely need to go with a regular entity form you would need to use javascript to modify the html of the page to apply proper styling. As I was explaining in this article entity form with two columns is rendered as two divs for each section which inside has divs that contains fieldset with the table inside. Using JS you would need to get the div for the second column (or second fieldset depending where you would like to apply background) and apply styling (ie grey color). Regarding placing the picture/placeholder on the left side again you would need to use js and some tricks to put it there. You need to find the id of the fieldset and use that to place element inside of it.

[paulsnolan]

Hi OOlashyn

In this instance the entity form is read-only. I have another one that has been developed which is editable but at the moment is just PoC. I'll try your suggestions. Thanks for the reply.

[Fubar]

I would lean towards using the Web Api (even though it is still preview), and then you can format/layout however you want.

Alternatively (but I am not recommending this), maybe set your CDS/DataVerse form to 2 Tabs.  And then do a nasty jQuery hack to move the Page Copy using jQuery's .detach() and .append() to move the DOM node.

Or if your top left hand side can remain readonly and put all the editable fields in the right column (even if you duplicate the LHS fields), you can format your template to be 2 columns, fetchxml to populate the LHS column top, put your liquid page copy below the fetch output, and then put the liquid entity form in the right hand column. 

[paulsnolan]

Hi OOlashyn

I have a question re the entity object whose details are to be displayed. The page to display the details is navigated to from a page with an entity list. An entity is selected from the list using the OOB view details icon present in the list. Using my current page the Entity Form setting 'Record ID Query String Parameter Name' is set to id.

How do I get this value using liquid in my new web template, so that I can get the instance of the xyzentity?

I've tried {% assign xyzentity = entities.xyzentity[id] %} to get the xyzentity entity

but I get the error 'Liquid error: Value cannot be null. Parameter name: key'.  

[OOlashyn]

Hi @paulsnolan ,

First you need to get the id. Because it is part of the request URL you can use request object to get it. Your code should look like this:

{% assign id = request.params['id'] %}
{% assign xyzentity = entities.xyzentity[id] %}

[paulsnolan]

Hi OOlashyn

Thanks, that worked but with a slight tweak, I had to use this slightly different syntax

{% assign id = request.params['id'] %}

{% assign xyz = entities.xyzentity[{{ id }}] %}

How do I get the properties from this entity?

For a simple property I’ve tried  

{% assign simpleproperty = xyz.simpleproperty %}

But I just get blank/empty.

Is there a guide to the syntax required to retrieve the different property types e.g. Lookup, Yes/No etc.

[paulsnolan]

Hi OOlashyn

Update re the blank/empty value for a property, suspect this may be a permissions issue.

[ragavanrajan]

Hi @paulsnolan, 

As per the below example, could you try with the actual id and let us know if that is working. 

Hope it helps. 

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

[OOlashyn]

Hi @paulsnolan ,

If we are talking about Lookup then yes if the user doesn't have proper permission it will be empty. Regarding guide to retrieve the different type of fields you can find them in docs - lookups or Entity Reference, optionset or choise. Yes/No fields will be returned as booleans.