Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
protogrid:create-button [2017-11-10 15:49] druprotogrid:create-button [2021-10-15 14:13] (current) – old revision restored (2018-03-02 10:26) dru
Line 1: Line 1:
-====== Create Button ======+====== 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]]overview card (e.g. the [[protogrid:default card|default Card]]).+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 Side Script Library]] and define a name for the library. Add the following code inside the newly created Script Library below the var csl_key+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>function guid() {+<code javascript> 
 +function guid() {
   function s4() {   function s4() {
     return Math.floor((1 + Math.random()) * 0x10000)     return Math.floor((1 + Math.random()) * 0x10000)
Line 12: Line 13:
   return s4() + s4() + '-' + s4() + '-' + s4() + '-' +   return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
     s4() + '-' + s4() + s4() + s4();     s4() + '-' + s4() + s4() + s4();
-} </code>+ 
 +</code> 
  
-This code snippet creates a new Card-ID. Next you need to add the code to actually create your Card. For this, you need to know the key of the proto (see [[protogrid:proto | Proto]]).+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. Now you can add the following code snippet below the one above, replacing "my_proto_key" with the key of your Proto.
  
-<code>+<code javascript>
 function create_product(){ function create_product(){
     window.open("/"+$APP_URL_NAME+"/" + guid() + "?action=open_new_card&proto_key=my_proto_key", "_self");     window.open("/"+$APP_URL_NAME+"/" + guid() + "?action=open_new_card&proto_key=my_proto_key", "_self");
Line 23: Line 26:
 </code> </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>+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(); create_product();
 </code> </code>
-As the last step, add a button to the [[protogrid:proto|Proto]] you like. Select your trigger and type in a suitable label for the button.  +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! +
  
 +That's it, clicking onto this button will immediately create and open a new Card!
  
  
Print/export