How to Dynamically Show "Add Records" Link
Description
If a Grid Component can be used to add new records, the button used to display the new record rows or detail view for adding a new record can be dynamically shown or hidden. This is done by either using Action Buttons or adding HTML to the Grid component's layout so that JavaScript can be used to toggle the display of the add new records link.
Using a Custom Action Button
The easiest way to dynamically show an "Add Records" link or button is to use an Action Button. Using an Action Button also gives you full control over the appearance and placement of the add new records button. Action Buttons can be placed in the Grid Component's toolbar or in the Freeform Edit Regions of the component.
To control the display of the Action Button, show/hide expressions can be used. You can also use Security settings to control whether or not the currently logged in user has access for the Action Button.
In the Grid Properties, click the 
Smart Field button for the Action Buttons property to open the Action Button Editor. Add a new Action Button that will be used to display the New Record editor. Configure the appearance of the Action Button using the Control type and other properties.
Use the Server-side Properties and Client-side Properties to add a Show/hide expression or Security permissions to the Action Button. The Client-side Show/hide expression can be used to dynamically show or hide the Action Button on the client.
Client-side vs. Server-side The show/hide expression can be defined as a client-side or sever-side expression. If the expression is a client-side show/hide expression, the expression is evaluated on the client. This means if a data value that is used in the expression changes, the button can be dynamically shown or hidden immediately after the value has changed -- even if the user has not saved their changes.
A server-side show/hide expression will be evaluated on the server. It can also use values that are present on the client, however the Action Button will not be dynamically displayed or hidden until an Ajax Callback is made to the server to re-evaluate the show/hide expression.
Next, add the JavaScript to the button's onClick event that will display the interface for adding new records. Click the Smart Field button for the Action Button's Javascript property to edit the onClick event for the button. Switch the editing mode to Text mode and add the appropriate JavaScript to display the New Record interface.
If new records are added using one or more rows in the Grid component, add the following to the Action Button's onClick event:
{grid.object}.toggleNewRecordRows();If new records are added using a Detail View, add the following to the Action Button's onClick event:
{grid.object}.detailViewNewRecord();Finally, place the Action Button in the Grid Component's layout. The Action Button can be placed in the Grid Component's toolbar using the Toolbar 'Action Buttons' property or in a Freeform Edit Region.
Hiding the New Record Link
Alternatively, you can wrap the New Record link in a span tag and us JavaScript to dynamically show or hide the New Record text. In the Grid's Update Settings, add a span tag with an id arount the text for the new record link using the New records button label property:
<span id="{grid.componentName}newRecordText">New Record</span>
Then, define a JavaScript function in the Grid's Javascript Code Functions section that can be used to toggle the display of the span. Make sure the span's ID that you used in the New records button label property matches the ID passed to the $() function:
var toggleNewRecordLink = function () {
var ele = $('{grid.componentName}newRecordText');
if (!ele) {
' concatenate message so Alpha doesn't replace the text
' {grid.componentName} with the grid's component name!
var msg = "Could not find any elements in the Grid with an ID of '{";
msg = msg + "grid.componentName}newRecordText'.";
alert(msg);
return;
}
var display = ele.style.display;
if (display === "none") {
ele.style.display = "";
} else {
ele.style.display = "none";
}
}This function can be called from any Client-side event to toggle the display of the New Record text.
Wrapping the text in a span tag will hide the text, but it will not hide the entire link.
If you wanted to hide the entire link, the <span> tag can be added around the new Record link by specifying a Custom Grid Toolbar Template. To do this, edit the Customize Grid toolbar template settings in the Grid Properties. Select Toolbar when grid is editable to edit the toolbar template for an editable Grid and insert the default template by clicking Insert default template. Add the span tags around the {grid.GridViewAddNewRecordHyperlink}. For example:
<tr>
<td colspan="{grid.colspan}" class="[class.gridPartToolbar]" nowrap="nowrap" >
<table cellspacing="0" border="0" cellpadding="0" style="width:100%;">
<tr>
<td nowrap="nowrap" align="{grid.RecordNavigatorAlignment}">
<span id="{grid.componentName}newRecordLink">{grid.GridViewAddNewRecordHyperlink}</span> {grid.RecordNavigatorButtons} {grid.RecordsPerPage} {grid.toggleQBERowHyperlink}
{grid.ActionButtonHTMLTemplate}
{grid.ExportDataButton}
{grid.HelpWindowButton}
</td>
<td nowrap="nowrap" align="right">
{grid.grid_part.submitbuttons}
</td>
</tr>
</table>
</td>
</tr>Now that the new record link is wrapped in an element with an ID, JavaScript can be used to hide the link to add new records. For example, the following will toggle display of the new record link:
var ele = $('{grid.componentName}newRecordLink');
if (!ele) {
alert("Could not find any elements in the Grid with an ID of '{"+"grid.componentName}newRecordLink'.");
return;
}
var display = ele.style.display;
if (display === "none") {
ele.style.display = "";
} else {
ele.style.display = "none";
}