Open Closed

Question: How do you add an action to a Navigation Property Picker / Modal Ui #192


0
sean.alford created

How do you add a new action like (+ New Entity) to the Navigation Property picker, and it's modal picker so the user can create a new Entity if the one they're looking for doesn't exist?

Fianlly, how do you render multiple properties on the modal picker?

For example, Name, Surname, Phone


3 Answer(s)
  • 0
    alper created
    Support Team

    MVC / Angular?

  • 0
    sean.alford created

    @alper, MVC

  • 0
    cotur created
    Support Team

    Hi @sean.alford,

    You can use abp.ModalManager javascript library to open a new modal easily.

    Consider that, I want to place a button on my Index.cshtml Razor Page.

    <button id="MyBtn">My Action</button> <!-- Place this button wherever you want at your page -->
    

    And my javascript codes

    // abp.appPath + "Test/CreateModal" => TestApp.Web / Pages / Test / CreateModal.cshtml
    
    var createModal = new abp.ModalManager(abp.appPath + "Test/CreateModal");
        
    $('#MyBtn').click(function (e) {
            ... // your codes
            
            createModal.open(); // Without parameters
        });
    

    and if you want to send parameters while opening modal, just send a javascript object as a parameter of open function.

        createModal.open({ name: "John Doe" }); // With parameters
    

    For second question, I think you use DataTables, and it is really easy to show different values on table.

    For example; I have an endpoint that retuns ContactDto list. ContactDto contains Name, surname, Phone etc.

    ContactDto

    public class ContactDto : FullAuditedEntityDto<Guid>
        {
            public string Name { get; set; }
    
            public string Surname { get; set; }
    
            public string CellPhone { get; set; }
    
            public string Phone { get; set; }
    
            public string Email { get; set; }
    
            public string Title { get; set; }
    
            public string Note { get; set; }
    
            public Guid AccountId { get; set; }
            
            public AccountDto Account { get; set; } // This Dto has Name property
        }
    

    My table:

    <abp-table striped-rows="true" id="ContactsTable">
                <thead>
                    <tr>
                        <th>@L["Actions"]</th>
                        <th>@L["Name"]</th>
                        <th>@L["Surname"]</th>
                        <th>@L["CellPhone"]</th>
                        <th>@L["Phone"]</th>
                        <th>@L["Email"]</th>
                        <th>@L["Title"]</th>
                        <th>@L["Note"]</th>
                        <th>@L["AccountName"]</th>
                    </tr>
                </thead>
            </abp-table>
    

    And my javascript codes,

     var dataTable = $("#ContactsTable").DataTable(abp.libs.datatables.normalizeConfiguration({
            processing: true,
            serverSide: true,
            paging: true,
            ajax: abp.libs.datatables.createAjax(window.volo.easyCrm.contacts.contact.getList), // .getList is auto generated javascript proxy of my AppService
            columnDefs: [
                {
                    rowAction: {
                        items:
                            [
                                {
                                    text: l("Edit")
                                },
                                {
                                    text: l("Delete")
                                }
                            ]
                    }
                },
    			{ data: "name" },
    			{ data: "surname" },
    			{ data: "cellPhone" },
    			{ data: "phone" },
    			{ data: "email" },
    			{ data: "title" },
    			{ data: "note" },
                { data: "account.name" }
            ]
        }));
    

    I hope this will help you. But I suggest you to check EasyCRM sample that created to show ABP and ABP Commercial features.