Kickstart: date in form

cancel
Showing results for 
Search instead for 
Did you mean: 
mrahn
Active Member II

Kickstart: date in form

Jump to solution

Dear Community.

I want to display the current date/datetime in a form. How could I achieve this in the kickstart ui?

Best regards

Marco

btw: I wonder whether there is some kind of documentation that explains how to use all the kickstart ui widgets. The documentation I know off is limited to pure Activiti (without kickstart) or, as far as it concerns kickstart, is very basic. Are there some sample processes available?

1 Solution

Accepted Solutions
gdharley
Intermediate

Re: Kickstart: date in form

Jump to solution

The community Blog provides the best overview of the kickstart widgets but as you say, it is extremely limited.

There are a couple of ways to display date/time.

1. Retrieve in script and save as a process variable (this would be a fixed datetime).

2. Create a custom widget that displays datetime (this could be static or dynamic).

The biggest problem I have found with the custom stencils is that you cant use them on an existing form.

So, to use a custom widget, you need to start with a custom stencilset when you first create the form.

So, tip for young players. Before you start building anythign real. Create a custom stencilset (even if you have no custom widgets) and use this for creating your forms. This way, you can add custom widgets if needed later.

If you use the default stencilset, you are stuck with it.

Greg

View solution in original post

8 Replies
gdharley
Intermediate

Re: Kickstart: date in form

Jump to solution

The community Blog provides the best overview of the kickstart widgets but as you say, it is extremely limited.

There are a couple of ways to display date/time.

1. Retrieve in script and save as a process variable (this would be a fixed datetime).

2. Create a custom widget that displays datetime (this could be static or dynamic).

The biggest problem I have found with the custom stencils is that you cant use them on an existing form.

So, to use a custom widget, you need to start with a custom stencilset when you first create the form.

So, tip for young players. Before you start building anythign real. Create a custom stencilset (even if you have no custom widgets) and use this for creating your forms. This way, you can add custom widgets if needed later.

If you use the default stencilset, you are stuck with it.

Greg

mrahn
Active Member II

Re: Kickstart: date in form

Jump to solution

Thanks Greg!

1. I wonder how to retrieve the date in a script. How to post this to a variable? Do you have a example for this? I know Activiti only by Kickstart.

2. I'm aware of the default stencilset difficulty .. there is a hint in the official documentation Smiley Happy

Best regards

Marco

gdharley
Intermediate

Re: Kickstart: date in form

Jump to solution

Hi Marco,

I assume by Kickstart you mean the Activiti Enterprise "Kickstart App".
If so, then following the instructions below.

1. Inside the form editor, add a Display Text field where you want the date:

2. Now go the the Javascript tab and add a new Javascript block on the formRendered event with the following content:

where the "mydate" field name is the "ID" given to the display text field you added in 1.

On render, you will get:

Notice the current date and time rendered in column 2.
Obviously you can parse to format to your locale and prefered layout.

Cheers,

Greg

mrahn
Active Member II

Re: Kickstart: date in form

Jump to solution

Hello Greg.

Many thanks for your step-by-step instruction. This kind of help is very appreciated!

I followed your instructions step by step but couldn't get the expected result.

Taking your first screenshot it seems that you have, after the orange "Label 1" field, a "Display value" field and a "Display text" field in the 2nd column. Taking your third screenshot I'd expect the "Display value" field rendering the date whilst the "Display text" field is empty.

btw: how would I save the new Date() to a process variable?

Best regards

Marco

.. we run Activiti Enterprise 1.5.3

gdharley
Intermediate

Re: Kickstart: date in form

Jump to solution

Dont look at the input field or selector. I used an existing test form. The "Display Text" field is the bottom right field.

The Display Text field has an ID of mydate (this will be bound to a variable called mydate in the process instance).

The javascript code associated with the FormRendered event is:

var myDate = scope.findFormFieldWithId(scope.allFormFields, 'mydate');
var now = new Date();
myDate.value = now;

This will automatically create a process variable mydate on submission.

Greg

mrahn
Active Member II

Re: Kickstart: date in form

Jump to solution

It's sad, but it seams I had a typo. I copied your code and it works fine.

It works exactly as you descripted it.

Thanks again!

Marco

mrahn
Active Member II

Re: Kickstart: date in form

Jump to solution

Just to feedback the community with what we found:

We decided not to follow Gregs client-site approach but use a task listener since it's more flexible.

Here is what we've done:

String:

var execution = task.execution;
// get current date
//var today = task.getCreateTime();
var today = new Date();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();
if (mm < 10) {
 mm = '0' + mm.toString();
}
else {
mm = mm.toString();
}
yyyy = yyyy.toString();
// get process id
var processid = execution.getId();
processid = processid.toString();
// write to process variable
execution.setVariable('casenumber',yyyy+'-'+mm+'#'+processid);
Thus I am able to provide a "case number" (format: yyyy-mm#processid).
gdharley
Intermediate

Re: Kickstart: date in form

Jump to solution

Nice work. The only thing I would say is that by doing this on the server, your data will not be localized and be based on the server timezone.
Typically not an issue but if you are using a hosting service such as AWS/Heroku/Bluemix/Pivotal etc then the timezone may not be what you expect (depends on what region the server is running in).

G