Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision |
protogrid:create-button [2017-11-10 15:49] – dru | protogrid:create-button [2021-10-15 14:10] – dru |
---|
====== 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) |
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"); |
</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! |
| |
| |