I am trying to build an "Expense Approval" tab where a salesman must list individually their airfare, hotel, food and car rental for approval.

I thought rather than create 5 or 6 fields for each section, I'd like to have an add new button so that there are only as many fields as needed on the submission.


  1. Shall I add the following Javascript code somewhere, if yes where should i add it as I don't see any custom scripting possible in salesforce.

  2. Do i have to change any Apex code (custom) to accomodate this request.

I know how to do it in HTML and Javascript, like below

enter image description here

HTML code

<SCRIPT language="javascript">
function add(type) {

    //Create an input type dynamically.
    var element = document.createElement("input");

    //Assign different attributes to the element.
    element.setAttribute("type", type);
    element.setAttribute("value", type);
    element.setAttribute("name", type);

    var foo = document.getElementById("fooBar");

    //Append the element in page (in span).


    <H2>Dynamically add element in form.</H2>
    Select the element and hit Add to add it in form.
    <SELECT name="element">
        <OPTION value="button">Submit</OPTION>
        <OPTION value="text">Textbox</OPTION>

    <INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/>

  • "jqGrid" is a jQuery grid plug in and you may try to use it. You can find lots of examples from here guriddo.net/demo/guriddojs – SL man Jan 4 '16 at 17:53
  • 1
    Conceptually that code would work as is in a vf page. All VF is in the end is js/html. To interact with the controller to submit the data the easiest way is to use the VF Form and input tags. So as a start simply put that code in a vf page and view it, you will see that it behaves just like any regular HTML page. The JS can go inside a script tag, or as a static resource and included in the page using the apex:includscript tag. for the jqGrid include it using the same tag. – Eric Jan 4 '16 at 18:09
  • one downside to this approach is that user can't quickly use tab key to blast through all the relevant expense lines, tabbing over irrelevant ones – cropredy Jan 4 '16 at 19:07

You can either use Apex/Visualforce or JavaScript (perhaps using something like jQUery would be easier) for that. With the former option you would use a wrapper class (or a native list, if it maps properly) mapped to an <apex:repeat> tag. With the latter, it's simply what you're doing, on steroids.

The pros for VF are that you can easily map the list to a db object with apex, whereas you're going to have to serialize the response from JS (and deserialize it on the Apex side) before you can save it.

On the flip side, the JS version would run much faster on the gui, and won't need any roundtrips to the server every time you add a row.

My apologies for the lack of sample code, I am not near a computer where I can type that much.

  • thanks for the answer, any code would be greatly appreciated – user580950 Jan 4 '16 at 16:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.