Creating a Grid for Microsoft Access Using the SQL Builder

Description

Step by step instructions for creating and formatting a grid for Microsoft Access using the SQL builder.

  1. Go to the Web Projects Control Panel and click the New button near the top left-hand corner of the dialog. Under the New File Dialog choose Web component > Next > Grid > Next to create a new grid component.

  2. On the 'Select Grid Component Template' page select the 'Start with a blank Grid Component' radio button and click OK

  3. The Grid Builder Dialog will open. Make sure the Design Tab is open.

  4. Under the Grid Layout menu select the "Stacked Columnar" option. This produces a multi-record view that looks like multiple forms arrayed in a grid, with field labels above fields as show in the preview screen inside the design page.

  5. Select the Updateable radio button.

    images/A_GridLayout.png

Selecting the Data Source

  1. Go to the Component Type tree menu on the Design page and under Grid click Data Source.

  2. Select the SQL Database accessed via AlphaDAO (Alpha Data Access Objects) option.

Selecting the Records to Display

  1. Display the Grid > Query (AlphaDAO) page.

  2. Change the Connection Type to Specify Connection String. This will open the Create SQL Connection String Dialog box.

  3. When the Create SQL Connection String Dialog box opens leave the Connection Type drop down at the top of the dialog set to Access.

  4. In the Create SQL Connection String Dialog, click 'open the folder' icon (shown below)under the options menu to select a file and navigate to the "Northwind" database in the MDB Filename field. Click Open.

    images/Folder_button.gif
  5. Click OK to close the Create SQL Connection String Dialog.

  6. Click Connect. This opens the Access database so you can select the table or view that you want to use.

  7. Select the SQL Select Statement radio button.

    images/A_SQLSelect.png
  8. Click the Edit SQL button to display the SQL Builder dialog box.

  9. The SQL Genie should appear. Make sure the Tables tab is open.

  10. Click Add Table to display the Add Table dialog box.

  11. Select the "Customers (Table)" entry in the Tables list and click OK.

  12. Click Add Table to display the Add Table dialog box.

  13. Select the "Orders (Table)" in the entry in the Tables list and click Next, check the table is not joined button, and click Finish, then click OK.

    images/A_addtable.png
  14. Under the Query page Click Select Primary Key(s) to display the Specify Primary Keys dialog box. Leave the Table is read-only check box empty.

    • 1. Select the "Customers" table from the Tables list.

    • 2. Check the "CustomerID" field.

    • 3. Select the "Orders" table from the Tables list.

    • 4. Check the "OrderID" field.

    • 5. Click OK to continue.

      images/A_PrimaryKeys.png
    Since this grid is updateable, you must include both the fields that you wish to display plus the primary keys of the tables that contain these fields, even if you do not wish to display them.

Selecting the Fields to Display

  1. Display the Grid > Fields page.

  2. Leave the Grid is editable check box unchanged. Although a grid starts out as updateable, it can still be read only. This has the virtue of using text boxes instead of labels to represent the data in the grid, which in turn provides more reliable formatting alternatives, as well as the ability to copy data from the fields.

  3. In the Available Fields list select "Customerid" through "Orderdate" and click the '>' icon.

Formatting the Grid

  1. Display the Grid > Properties page.

  2. Under the Layout Options menu click the '...' (shown below) button located on the Style Name Row. This will display the Select Style dialog.

    images/A_expandchoices.png
  3. Under the Location menu on the Left side of the Select Style dialog select System. From the list of styles that appear select GrTan. You can add new styles or modify existing styles.

  4. Change the Layout Options > Repeating columns field value to "4".

  5. Change the Layout Options > Snaking style field value to "LRTB".

    With the Stacked Columnar grid style, the Layout Options > Rows of data field actually specifies the number of forms to display. Since the Layout Options > Repeating columns field value is "4" and the Permissions > Number of new record rows on the Grid > Update Settings page will be set to "1", this field value will be set to "3" ( 4 - 1 = 3).
  6. Change the Layout Options > Rows of data field value to "3".

  7. Scroll down the long list of properties to the Record Navigator properties, you can collapse the lists of properties you are not interested in by clicking the minus sign next their title.

  8. Click the '...' button (shown below) in the Record Navigator > Record navigator layout field to display the Record Navigator Designer dialog box. You can modify the default navigator styles or create new navigator styles.

    images/A_expandchoices.png
  9. Select the Pre-Defined Format shown below and click OK.

    images/A_arrows.png
    images/A_RecordNavigatorDesigner.png
  10. Change the Record Navigator > Record navigator position field to "Above and Below Grid".

  11. Scroll back up the list of Properties until you come to the Customization properties. Click the button in the Customization > 'Total records' message text field to display the HTML Editor.

    • 1. Display the Source tab.

    • 2. Erase all the HTML code and click Save.

  12. Scroll down the Properties list until you see the Freeform Edit Regions title. Click the button in the Freeform Edit Regions > Above Grid field to display the Freeform Edit Regions Editor dialog. To the right there will be an area to enter HTML. Click the HTML Editor button if you would like more HTML tools to work with.

    • 1. Enter "Northwind Customer Orders" into the HTML editor, adjusting the format and font to your liking.

    • 2. In the HTML Editor Click Save.

      images/A_Freeform.png
  13. Click OK in the Freeform Edit Regions Dialog.

Defining Update Settings

  1. Go back to the Component Type tree menu on the left side of the Grid Builder and click the Grid > Update Settings page.

  2. Uncheck the Permissions > Allow delete check box.

  3. Change the Permissions > Number of new record rows to "1".

Previewing the Grid

  1. The first stage of previewing your work is to create a page onto which to place the new component.

    • 1. Click the 'save' button to preserve your work. Name it "Access_SQL_Grid".

      images/Save_button.gif
    • 2. Click Close to return to the Web Projects Control Panel.

    • 3. Click 'new' on the toolbar.

      images/New_Query_button.gif
    • 4. Select A5W Page > Next and then Blank Page > Next open the HTML Editor.

    • 5. Click File > Save As. Name the page "Access_SQL_Grid" and click OK.

  2. The next stage is to place the component on the page.

    • 1. Click the 'genie' icon or Insert Component button to display the Insert Component dialog. The button should appear in the very top center of the Web Projects Control Panel.

      images/Genie_button.gif
    • 2. Click Select to display the Select Component dialog.

    • 3. Select "Access_SQL_Grid" and click OK.

    • 4. Change the component Alias in the Insert Component Dialog to "ASG" and click OK. This makes the code that Alpha Anywhere generates in the background more compact, but the main benefit is it allows you to transparently replace the component with another component with the same alias.

    • 5. Click 'save' and close the HTML Editor.

      images/Save_button.gif
  3. Next, publish the files to the local webroot. The local webroot is presumably the location where you will test your website. In most cases you will create a second profile (in this case "AlphaSports") where you will publish your finished public website.

    • Display the A5W Pages page of the Web Projects Control Panel by clicking on 'A5W Pages' in the list on the left side of the panel.

    • Right click "Access_SQL_Grid" and select Publish (local webroot) and open. Click OK. You should see something like the following image displayed in you browser.

    If you get a 404 Error after your A5W page is published you may have set the page security to "Always Denied". To remedy this open the A5W Pages again in the Web Projects Control Panel. Right click on the Access_SQL_Grid.A5W page. In the right click menu scroll down to Page Security and on the menu that opens under page security make sure that 'Always Allowed' is selected for this page's security. Re-publish the page by selecting Publish (local webroot) and open and clicking OK just as you did above. The page should then appear in your browser.
images/WPT_Access_SQL_Grid.png