[SalesForce] Add row insted of PopUp for new record

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

When clicking on New a pop up shows up:
enter image description here

And when this record is saved it is displayed as follow:
enter image description here

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:
enter image description here

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!

Best Answer

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);  
},
Related Topic