Add row insted of PopUp for new record

Question

I have a custom object in which I can add a record and it will be shown as a row.

When clicking on New a pop up shows up:

And when this record is saved it is displayed as follow:

Now my requirements are a bit different from what I have been able to achieve. The program should do something like as shown in the image belove:

Simply when the user click add row a new row is added and the user can fill the data inline instead of having a pop-up opening.

Is it possible to achieve something similar with standard salesforce or is it completely custom? If it is a completely custom function what is the best approach for doing something similar?

Sorry for opening an open question like this one.

Thanks for your time!

Answer 1

Is it possible to achieve something similar with standard salesforce or is it completely custom?

It has to be a custom component.

If it is a completely custom function what is the best approach for doing something similar?

You can utilize lightning:datatable here. A very basic example here as how you can achieve this is below. You will need to go through further details on the component and how to handle different scenarios, but this should provide you a starting point.

In your component while utilizing a datatable, declare a button say Add Row:

<lightning:datatable
                    keyField="id"
                    data="{! v.data }"
                    columns="{! v.columns }"
                    hideCheckboxColumn="true"/>

<lightning:button variant="brand" label="Add Row" title="Add Row" 
                  onclick="{! c.addRow }" />

And in the JS controller for addRow, have something as:

addRow : function (cmp, event, helper) {

    // this fetches the existing data as rendered in datatable
    var myData = cmp.get("v.data"); 

    // now push a new empty row in the array retrieved
    myData.push(
        {
            myfield1: "",
            myfield2: ""
         }
    );

    // now add the new array back to the attribute, so that it reflects on the component
    cmp.set("v.data", myData);  
},

Answer 2

Component

<lightning:datatable
                keyField="id"
                data="{! v.data }"
                columns="{! v.columns }"
                hideCheckboxColumn="true"/>

<lightning:button variant="brand" label="Add Row" title="Add Row" 
                  onclick="{! c.addRow }" />    
</aura:component>

Controller

({ 
init: function (cmp, event, helper) {
    cmp.set('v.columns', [
        {label: 'RFQ Detail Name', fieldName: 'lineDetail', type: 'text'},
        {label: 'Product', fieldName: 'lineProduct', type: 'text'},
        {label: 'Scale Quantity', fieldName: 'lineQuantity', type: 'text'}
    ]);

    cmp.set('v.data', [
        {
            lineDetail: "lineDetail",
            lineProduct: "lineProduct",
            lineQuantity: "lineQuantity"
            },
            {
            lineDetail: "lineDetail",
            lineProduct: "lineProduct",
            lineQuantity: "lineQuantity"
        }
    ]);

    console.log('init2');
},

addRow : function (cmp, event, helper) {

    // this fetches the existing data as rendered in datatable
    var myData = cmp.get("v.data"); 

   myData.push(
    {
            lineDetail: "push",
            lineProduct: "push",
            lineQuantity: "push"
     }
);

// now add the new array back to the attribute, so that it reflects on the component
cmp.set("v.data", myData);  

}
})

And that example works out of the box.

Thanks for the suggestions!