cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
nerdifand
Frequent Visitor

inject subgrid into entity form via javascript

Hello fellow developers,

dear @OliverRodrigues 

we are using entity forms on upsert of records in an entitylist (opens in a pop-up-overlay, no webpage required).
i need to show records filtered by fields on this form in a subgrid.

i know i can hide records with javascript, however i thought i could also show the subgrid onCreate (entity forms cannot show subgrids on create) when i inject the subgrid via js.

do i create the table with liquid in a webtemplate (documented) and inject it via js? how do i do that?
using a web-template to insert the entity form and then the subgrid is probably easier, but i will lose the pop-up effect right?
any help is much appreciated
sunny greetings

1 ACCEPTED SOLUTION

Accepted Solutions
OliverRodrigues
Super User
Super User

hi @nerdifand sorry about the delay, was playing around here and got to what you are looking for.

 

So basically I created a Web Template that will be responsible for retrieving the subgrid data - my example I am fetching the account records and displaying the results in a table:

{% fetchxml accountFetch %}
    <fetch version='1.0' output-format='xml-platform' mapping='logical' distinct='false'>
        <entity name='account'>
        <attribute name='name' />
        <attribute name='telephone1' />
        <attribute name='address1_city' />
        <attribute name='primarycontactid' />
        <attribute name='statecode' />
        <attribute name='accountid' />
        <link-entity name='contact' from='contactid' to='primarycontactid' visible='false' link-type='outer' alias='c'>
            <attribute name='emailaddress1' />
        </link-entity>
        </entity>
    </fetch>
{% endfetchxml %}

<div class='view-grid'>
    <table aria-relevant='additions' role='grid' class='table table-striped table-fluid'>
        <thead>
            <tr>
                <th style='width:32%;' aria-label='Account Name' tabindex='0'>Account Name<span class='sr-only sort-hint'></span></th>
                <th style='width:10%;' aria-label='Main Phone' tabindex='0'>Main Phone<span class='sr-only sort-hint'></span></th>
                <th style='width:10%;' aria-label='Address 1: City' tabindex='0'>Address 1: City<span class='sr-only sort-hint'></span></th>
                <th style='width:16%;' aria-label='Primary Contact' tabindex='0'>Primary Contact<span class='sr-only sort-hint'></span></th>
                <th style='width:16%;' aria-label='Email (Primary Contact)'>Email (Primary Contact)</th>
            </tr>
        </thead>
        <tbody>
            {% for account in accountFetch.results.entities %}
                <tr data-id='{{ account.id }}'>
                    <td data-attribute='name' class='details-link has-tooltip launch-modal'>{{ account.name}}</td>
                    <td data-attribute='telephone1' class='details-link has-tooltip launch-modal'>{{ account.telephone1}}</td>
                    <td data-attribute='address1_city' class='details-link has-tooltip launch-modal'>{{ account.address1_city}}</td>
                    <td data-attribute='primarycontactid' class='details-link has-tooltip launch-modal'>{{ account.primarycontactid.Name }}</td>
                    <td data-attribute='c.emailaddress1' class='details-link has-tooltip launch-modal'>{{ account['c.emailaddress1']}}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

 

My initial intention was to inject directly to the Insert Entity Form using a liquid tag {% include %}. Not sure why but this was not working as I expected, might be due to the type of data or the timing which things gets evaluated. To overcome this issue I created a Web Page + Page Template to show my table (without header/footer):

OliverRodrigues_0-1612902257169.png

Now I am adding a JS to the Insert Entity Form, making an Ajax call to that page, and appending to section in my form:

$(document).ready(function () {
    AddAccountList();
});

function AddAccountList()
{
    try {
        var url = "/account-custom-list/";
        $.ajax({
            method: "GET",
            url: url,
            success: function (data) {
                if (!!data && data.length > 0) {
                    $("table[data-name='Accounts']").append(data);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.error("Error XXXX: " + jqXHR + ", " + textStatus + ", " + errorThrown);
            }
        });
    } catch (e) {
        console.error("Error XXXX: " + e);
    }   
};

 

Result:

OliverRodrigues_1-1612902361603.png

 

 

I hope this works for you, please let me know.




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.

Power Apps Portals Super User


Oliver Rodrigues


 

View solution in original post

6 REPLIES 6
OliverRodrigues
Super User
Super User

Hi, I actually think it might be the same effort using a Web Page or directly an Entity Form.

The JS you will write will be place in the Entity Form (insert/modal) so it will run the same way. 

 

I just trying to get my head around what will be displayed in your subgrid. Can you explain the below:

  • Entity List for Entity X
  • Insert/Create button (opening modal/pop-up)
  • The Insert Entity Form needs to show a subgrid
    • what will the subgrid related to? the new record for entity X does not exist (yet)
    • is it a generic list that you want to display (read-only probably)? 



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.

Power Apps Portals Super User


Oliver Rodrigues


 

Hello Oliver,

thank you for your reply.
its a normal custom entity, nothing special.
the subgrids on the entity form show records of the same entity. they are not related by a relationship.
by filtering the records by date fields (effectiv from, valid until), we want to show historic/future records,

so users can have a look at other records while upsert.


can i create a subgrid and place it in the form with js?

$(document).ready(function () {

create subgrid with fetchxml

 

put subgrid in form on specific place (maybe $(.selector).after(html subgrid);)
});

Hi @nerdifand,

Unless I'm missing something, if there's no relationship and your desire is to have filter options, why not just use an Entity List?

Just change your Web Template to have both.

// Typical template
{% if page.adx_entityform %}
  {% entityform id:page.adx_entityform.id %}
{% elsif page.adx_webform %}
  {% webform id:page.adx_webform.id %}
{% else %}
  {% entitylist id:page.adx_entitylist.id %}
{% endif %}

// Make it
{% if page.adx_entityform %}
  {% entityform id:page.adx_entityform.id %}
{% elsif page.adx_webform %}
  {% webform id:page.adx_webform.id %}
{% endif %}
<div id="list_div" class="hidden">
{% if page.adx_entitylist %}
  {% entitylist id:page.adx_entitylist.id %}
{% endif %}
</div>
<script>
  $(function() {
    $(some_selector).after($("#list_div"));
  });
</script>

 Note I'm going off memory, double-check the liquid in Layout 1 Column. 

OliverRodrigues
Super User
Super User

hi @nerdifand sorry about the delay, was playing around here and got to what you are looking for.

 

So basically I created a Web Template that will be responsible for retrieving the subgrid data - my example I am fetching the account records and displaying the results in a table:

{% fetchxml accountFetch %}
    <fetch version='1.0' output-format='xml-platform' mapping='logical' distinct='false'>
        <entity name='account'>
        <attribute name='name' />
        <attribute name='telephone1' />
        <attribute name='address1_city' />
        <attribute name='primarycontactid' />
        <attribute name='statecode' />
        <attribute name='accountid' />
        <link-entity name='contact' from='contactid' to='primarycontactid' visible='false' link-type='outer' alias='c'>
            <attribute name='emailaddress1' />
        </link-entity>
        </entity>
    </fetch>
{% endfetchxml %}

<div class='view-grid'>
    <table aria-relevant='additions' role='grid' class='table table-striped table-fluid'>
        <thead>
            <tr>
                <th style='width:32%;' aria-label='Account Name' tabindex='0'>Account Name<span class='sr-only sort-hint'></span></th>
                <th style='width:10%;' aria-label='Main Phone' tabindex='0'>Main Phone<span class='sr-only sort-hint'></span></th>
                <th style='width:10%;' aria-label='Address 1: City' tabindex='0'>Address 1: City<span class='sr-only sort-hint'></span></th>
                <th style='width:16%;' aria-label='Primary Contact' tabindex='0'>Primary Contact<span class='sr-only sort-hint'></span></th>
                <th style='width:16%;' aria-label='Email (Primary Contact)'>Email (Primary Contact)</th>
            </tr>
        </thead>
        <tbody>
            {% for account in accountFetch.results.entities %}
                <tr data-id='{{ account.id }}'>
                    <td data-attribute='name' class='details-link has-tooltip launch-modal'>{{ account.name}}</td>
                    <td data-attribute='telephone1' class='details-link has-tooltip launch-modal'>{{ account.telephone1}}</td>
                    <td data-attribute='address1_city' class='details-link has-tooltip launch-modal'>{{ account.address1_city}}</td>
                    <td data-attribute='primarycontactid' class='details-link has-tooltip launch-modal'>{{ account.primarycontactid.Name }}</td>
                    <td data-attribute='c.emailaddress1' class='details-link has-tooltip launch-modal'>{{ account['c.emailaddress1']}}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

 

My initial intention was to inject directly to the Insert Entity Form using a liquid tag {% include %}. Not sure why but this was not working as I expected, might be due to the type of data or the timing which things gets evaluated. To overcome this issue I created a Web Page + Page Template to show my table (without header/footer):

OliverRodrigues_0-1612902257169.png

Now I am adding a JS to the Insert Entity Form, making an Ajax call to that page, and appending to section in my form:

$(document).ready(function () {
    AddAccountList();
});

function AddAccountList()
{
    try {
        var url = "/account-custom-list/";
        $.ajax({
            method: "GET",
            url: url,
            success: function (data) {
                if (!!data && data.length > 0) {
                    $("table[data-name='Accounts']").append(data);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.error("Error XXXX: " + jqXHR + ", " + textStatus + ", " + errorThrown);
            }
        });
    } catch (e) {
        console.error("Error XXXX: " + e);
    }   
};

 

Result:

OliverRodrigues_1-1612902361603.png

 

 

I hope this works for you, please let me know.




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.

Power Apps Portals Super User


Oliver Rodrigues


 

View solution in original post

Fubar
Solution Sage
Solution Sage

Just to add to what @OliverRodrigues posted, you can also return JSON to your Ajax call and do all the HTML etc in the Client side (one benefit of this is you can use Client side JS libraries etc).  To do it, it is as per what Oiver has provided but you loop your Fetchxml results and construct the JSON object (rather than constructing the HTML), and then set the mime type on the Web Template to JSON (the mime type is hidden at the bottom of the form and usually not noticed)

 

Hello @OliverRodrigues and @Fubar and @justinburch 
thank you very much for your help!
I think this is valuable information for the internet, since i couldnt find anything similar when searching.
be blessed
nerdifand

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Users online (1,202)