====== Button to Create New Cards ======

This article explains how to add own buttons which create new [[protogrid:card|Cards]] to an [[protogrid:overview card|Overview Card]] (e.g. the [[protogrid:default card|Default Card]]).

First, add the necessary code. To do this, add a new [[protogrid:script_library|Client Script Library]] and define a name for the library. Add the following code at the end of the newly created Script Library:
<code javascript>
function guid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
    s4() + '-' + s4() + s4() + s4();
} 
</code>


This code snippet generates a new Card ID. Next you need to add the code which actually creates your Card. For this, you need to know the key of the [[protogrid:proto | Proto]] which you want your card to be based on.
Now you can add the following code snippet below the one above, replacing "my_proto_key" with the key of your Proto.

<code javascript>
function create_product(){
    window.open("/"+$APP_URL_NAME+"/" + guid() + "?action=open_new_card&proto_key=my_proto_key", "_self");
}
</code>


Next, create a new [[protogrid:trigger| Trigger]]. The Trigger should have a well-understandable name. As Script Library choose the newly created one and insert the call to the second code-snippet into the field "Triggered Call":
<code javascript>
create_product();
</code>
As last step, add a button to the [[protogrid:Proto#Overview Proto|Overview Proto]] of the card you want the button to be placed on. Select your Trigger and type in a suitable label for the button which describes its action to the user. 

That's it, clicking onto this button will immediately create and open a new Card!