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
Last revisionBoth sides next revision
protogrid:create-button [2017-11-13 11:04] – pgrid_wiki_adminprotogrid:create-button [2021-10-15 14:10] – 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]] (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 javascript> <code javascript>
 function guid() { function guid() {
Line 16: Line 16:
 </code> </code>
  
-<code ecmascript> 
-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 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.
  
Line 37: Line 26:
 </code> </code>
  
-<code ecmascript> 
-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":+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> <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!
  
  

Trace:

Print/export