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 II
Super User II

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 II
Super User II

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 II
Super User II

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
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Users online (54,190)