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-10 10:58] – sblprotogrid:create-button [2021-10-15 14:10] – dru
Line 1: Line 1:
-====== Create Button ======+====== Button to Create new Cards ======
  
-You can simply create your own button to create a new [[protogrid:card|Card]]. You could use this buttons for example on a starting page.+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 the key of the proto (see [[protogrid:proto | Proto]]). 
-Now you can add the following code snippet below the last one, replacing "my_proto_key" with the key of your Proto. 
  
-<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(){ 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 fill in the button label.  +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 your Button will create and open a new Card! +
  
 +That's it, clicking onto this button will immediately create and open a new Card!
  
  

Trace:

Print/export