I would like to make my own custom submit button

Submitted by zibek8 on Tue, 04/04/2017 - 22:12
1
0
-1

I would like to make my own custom submit button.
What I want is that when I click the new submit button, it will open a popup window to show some messages to the user. The submit button I created so far opens a popup message but I am not sure how the submit in Bonita actually works.

In the Custom widget editor, I used html tag <input type="submit> to create a submit button, but it doesn't seem to be working and the page stays in the same page. How can I create a custom submit button and how to send the data on click?

Custom Widget
submit button
2 answers

Submitted by chris.lowth on Wed, 04/19/2017 - 00:58
1
0
-1

Have you tried the "widget_modal" custom widget from the "examples" section of this forum?
If it's not perfect, it will at least give you some ideas.

(use "Learn" menu at the top of this window, then select "Examples". Finally: search for "modal").

Chris

Submitted by Sean McP on Wed, 04/05/2017 - 00:01
1
0
-1

The first thing I would do is make a copy of the current Submit Button and then modify it accordingly:

In Chrome:

  1. Open a Page with a submit button on it
  2. Right Click the submit button and click Inspect
  3. The debugger will open and highlight the submit button code
  4. Right Click and choose Edit as HTML
  5. Cntrl-A to select all and Cntrl-C to Copy
  6. Open the UI designer and then paste the copied code to a Custom Widget Template

Here is the code I got on my 7.4.3 system

<button ng-class="'btn btn-' + properties.buttonStyle" ng-click="ctrl.action()" type="button" ng-disabled="properties.disabled || ctrl.busy" ng-bind-html="properties.label | uiTranslate" class="ng-binding btn btn-primary">Submit</button>

This will give you your custom widget to play with.

The Code used by the submit button can be found in {{ bonitaInstallPath }}\workspace\default\web_widgets\pbButton file pbButton.js

Make sure to give it all the same parameters etc as the original as they are used, but you should be able then to add your code for opening the modal window.

It would be nice to see when you finish, could you share?

regards
Seán

PS: As this reply answers your question, please mark as resolved.

Notifications