Tutorial 6: How to create a new row

This tutorial explains how to create a new row in a Formspider Application. The tutorial continues from the “Regions” application built in the “How to show data from a table” tutorial.

You will add a button to the “Regions” application which will insert a new row to the grid displayed in the main screen.

As the first step, add a new simple panel to the “Regions” application named “topPanel”.

Creating topPanel.

Click OK to create the “topPanel”. Add a button with the label “New Region” to the Panel. The “topPanel” XML is below.

<panel>
  <tableLayout>
    <row>
      <cell>
        <button label="New Region"/>
      </cell>
    </row>
  </tableLayout>
</panel>

Click the “Save” button to commit your changes in the Editor.

The “New Region” button will trigger an action that will create a new row in the “Regions1″ datasource. To create this action, expand the Actions accordion, select the Actions node from the tree and click the “+” button in the Actions toolbar. Alternatively, you may right click the Actions node and select the “New” menu item from the pop-up menu. Enter “createRegion” as the Action name. Enter “regions_pkg.createRegion” as the procedure. This procedure does not exist yet. You will create it in the next step.

Creating "createRegion" action. Note that we haven't created the "regions_pkg.createRegion" procedure so Formspider IDE gives a warning.

To create the procedure, go to your favorite PL/SQL editor, connect to the “HR” schema if you are using a local installation of Formspider or to your Formspider Online Schema if you are using Formspider Online and create a package named “regions_pkg”. Inside the package create a procedure named “createRegion”. The procedure will make a call to the “api_datasource.createRow” API. This API returns a pointer to the newly created row to enable further manipulations on it. Use the code below to assign a new value to the “REGION_ID” column of the new row in the “Regions1″ Datasource. (Obviously, this operation should normally be done with a sequence counter, for simplicity, we will use row count of the datasource.)

v_row_id:=api_datasource.createRow('REGIONS1');
v_region_oid := api_datasource.getRowCount('REGIONS1');
api_datasource.setColumnValue('REGIONS1.REGION_ID',v_region_oid,v_row_id);

Expose the “createRegion” procedure in the Package specification. Below is the DDL of the final “regions_pkg”:

CREATE OR REPLACE
PACKAGE regions_pkg IS
procedure createRegion;
END;
/
CREATE OR REPLACE
PACKAGE BODY regions_pkg IS
procedure createRegion is
  v_row_id number;
  v_region_oid number;
begin
  v_row_id:=api_datasource.createRow('REGIONS1');
  v_region_oid := api_datasource.getRowCount('REGIONS1');
  api_datasource.setColumnValue('REGIONS1.REGION_ID',v_region_oid,v_row_id);
end;
END;

After you save the package, go back to the Formspider IDE and Click OK to save the new “createRegion” action.

Saving "createRegion" action.

Call the “createRegion” action from the buttonPress event of the button labeled “New Region”.

<panel>
  <tableLayout>
    <row>
      <cell>
        <button label="New Region">
          <events>
            <buttonPress action="createRegion"/>
          </events>
        </button>
      </cell>
    </row>
  </tableLayout>
</panel>

Next, include the topPanel panel to the north of the mainPanel as shown below:

<panel>
  <borderLayout>
    <cell docking="North">
      <include panelName="topPanel"/>
    </cell>
    <cell docking="Center">
      <grid dataSource="REGIONS1">
        <column headerLabel="ID">
          <textLabel column="REGION_ID"/>
        </column>
        <column headerLabel="Name">
          <textField column="REGION_NAME"/>
        </column>
      </grid>
    </cell>
  </borderLayout>
</panel>

Click the “Save” button. Run the application. In your application, click the “New Region” button to observe the creation of the row. Note that the “REGION_ID” is filled with the value we assigned in the “createRegion” action. You may enter a region name as well. Please note that, since we do not have a “Save” button yet, your changes will not be committed to the database.

Adding a new row.

  • Vladyslav

    Hi, i’m having problems when trying to enter new region name. Only new id inserting works

    • http://www.gerger.co Yalim K. Gerger

      Hi Vladyslav,
      Could you provide a little bit more information please? How do you enter the new region name?

      • Vladyslav

        By double click on the field. Here is a screenshot

        • http://www.gerger.co Yalim K. Gerger

          Are you sure the region name component is a textField? Can you please paste the XML of the grid here?

          • Guest

            Here is my code, but it is the same as in tutorial:

          • Vladyslav

            I’ve found out the problem… it was not text field. Thank you !

          • http://www.gerger.co Yalim K. Gerger

            You are welcome Vladyslav. Happy to hear that the problem is resolved. :-)

        • http://www.gerger.co Yalim K. Gerger

          By the way, you don’t need to double click. Just one click should be enough to be able to enter a new value to the textField.

  • Marnie Guerrero

    How do I place the new row on top of the list instead of placing it at the last of the list when a new blank row is created? If list contains about a 2000 records and the “Paging Components” are used to display records by 100s. Users still have to go to the last page to add entries to the blank tow.

    • İbrahim Sandallı

      Hi Marnie,

      Nice to hear from you again. You can use api_datasource.createRowByRowNumber API to create a new row at the top of the list. The following code snippet creates a new row at the top of the current page:

      api_datasource.createRowByRowNumber(‘yourDatasourceName’, 1, api_datasource.getcurrentpage(‘yourDatasourceName’))

      Hope this helps,
      Ibrahim

      • Marnie Guerrero

        Hi Ibrahim,

        Thanks for the response and help. Nice to hear from you too.

        Regards

        • Vladyslav

          Hi, i’m having problems when trying to enter new region name. Only new id inserting works