Getting input from user when creating a link

We are evaluating GOJS to check whether library meets requirements of our application.

I would like to ask, which would be best way to implement following feature.

When user draws a link, html dialog is opened to get some constraints from the user. Using blocking prompt will not be acceptable as user needs to fill multiple values. Based on those constraint we need to validate whether the link is valid or not. As the validation process is quite complex and requires information from server database, I think it would be feasible to do the actual validation in server side using ajax call and return validation result to client.

I currently have one solution in my mind, but I think it is not very elegant and would like to know if there is a better way to implement our feature. My current solution is following.

  1. Override the insertLink method
    • in the insertLink method save the link in external jquery object
  2. Create “linkDrawn” event listener
    • Open dialog with html input fields, selects etc.
  3. Create dialog close function
    a) In dialog close function send linkData with user input to server for validation
    - If link is valid, append user input to linkData
    - Else remove already created link

Drawback with this solution is, that link is first created and then removed, in case validation fails.

I would recommend implementing either a LinkingBaseTool.linkValidation predicate or a Node.linkValidation predicate (or both), doing the best that you can given the information that you have client-side in your app.

Then with the “LinkDrawn” DiagramEvent you can open your form to ask for user input about the link.

When they are done with that form send the validation request to the server.

When the server responds with “not valid”, then you can remove the link. Remember to conduct such changes within a transaction. (Changes performed in the “LinkDrawn” DiagramEvent are included in the transaction that the LinkingTool executes.)

If the server does not respond with a “valid” or “not valid” result, you’ll need to decide what to do. Presumably you have marked each new link with a “maybe valid” flag, so that you can always look to see if the app has gotten a response for that link.

Thanks for fast response.

So you do not have any possibility to send insertLink event? What I’m think is following approach.

  1. Override linkingTool mouseUp function
  • Open dialog and make ajax request in dialog close function
  • Based on validation result send insertLink event or open error dialog to give feedback for user why validation failed

With above approach the link would not be created at all if server side validation fails.

If you really want to do that, it would be easier to override the insertLink function. If you get back OK, call the base method and return its value. You could even modify the link data with any new information from your database. If you get back that it’s not OK, just return null.

The problem is what to do when for any reason you do not get back a response from your server promptly. You really should not leave your users hanging.

It is not clear to me how you would implement the server call synchronously.

I think there is no way to make synchronous server call. That is why I asked if I could send insertLink event to make asynchronous callback from ajax response function. But this rely requires that your insertLink would have event listener.

Ah, OK.

No events are needed – assuming you are using a GraphLinksModel, just call Diagram.model.addLinkData within a transaction.

Thank’s Walter I try to utilize addLinkData method. Does this sound proper way to do it?

1. Override insertLink
- save to external variable
- return null so link do not get created at this point
  1. Override mouseUp
  • open dialog for user input from there
  • dialog handles ajax call to server and based on response
    a) validation passes: link is created using addLinkData using from external variable (encapsulated in transaction)
    b) validation fails: Validation error is given for the user
    c) ajax call fails: server error is give for the user

That sounds about right.

You don’t need to override doMouseUp as well as insertLink, because the default implementation of the former calls the latter method. So you can have your override of LinkingTool.insertLink both open the dialog and return null. Of course that assumes you don’t have any other code that calls insertLink for the purpose of actually adding a link right away. Some of the samples have such calls.

Thanks Walter. The last solution is good to us.