Links inside custom HTML or SVG

Forum to discuss the new web client version of Servoy.

Links inside custom HTML or SVG

Postby swingman » Mon Oct 08, 2018 11:23 am

Screenshot 2018-10-08 at 09.51.07.png


Hi, I'm trying to make my own component for displaying D3.js graphics from a database table.

I can get the graphs to display, but not to get links to work. I want to execute methods when users click certain items in the graphs (D3.js executes to produce SVG graphics, so the links are on SVG nodes). I have tried adding 'svy-click' attributes and added a $compile directive to .js file of the compoent.

HTML:
Code: Select all
<div class="d3-body" style="width: 100%; height: 100%; background: white;">
    <div dynamic="model.html"></div>
</div>


JS:

Code: Select all
angular.module('samplegraphD3simple',['servoy']).directive('samplegraphD3simple', function() { 
    return {
      restrict: 'E',
      scope: {
         model: "=svyModel",
         api: "=svyApi",
         svyServoyapi: "=",
         handlers: "=svyHandlers"
      },
      controller: function($scope, $element, $attrs) {
         $scope.click = function(arg) {
            console.log('Clicked ' + arg);
         }
        
         $scope.showAlert = function(message) {
             alert(message);
             console.log("alerted!");
         };
     },
      templateUrl: 'samplegraph/d3simple/d3simple.html',
      replace: true
    }
}) .directive('dynamic', function ($compile) {
    return {
        restrict: 'A',
        replace: true,
        scope: { dynamic: '=dynamic'},
        link: function postLink(scope, element, attrs) {
          scope.$watch( 'dynamic' , function(html){
            element.html(html);
            $compile(element.contents())(scope);
            console.log("complied!");
          });
         
          scope.showAlert = function(message) {
              alert(message);
              console.log("alerted!");
            };
        }
      };
    });


I can see the "compiled!" messages in the console.

Any ideas of what may be wrong?
You do not have the required permissions to view the files attached to this post.
Last edited by swingman on Tue Oct 09, 2018 10:06 am, edited 1 time in total.
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1236
Joined: Wed Oct 01, 2003 10:20 am
Location: London

Re: Links inside custom HTML

Postby swingman » Mon Oct 08, 2018 11:26 am

Screenshot 2018-10-08 at 09.51.59.png


I can see my svy-click attribute inside the SVG graphic.
You do not have the required permissions to view the files attached to this post.
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1236
Joined: Wed Oct 01, 2003 10:20 am
Location: London

Re: Links inside custom HTML

Postby swingman » Tue Oct 09, 2018 10:05 am

Does the element I apply the "svy-click" to need to have a unique identifier?
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1236
Joined: Wed Oct 01, 2003 10:20 am
Location: London

Re: Links inside custom HTML or SVG

Postby swingman » Mon Oct 22, 2018 11:16 am

I have worked out how to do this now:
Instead of making a generic component and trying to load D3.js code into it, I'm making one component per type of graph.

The graph is built inside the link function:

Code: Select all
link: function($scope, $element, $attrs) {

         function draw_graph() {
<lots of d3.js code>
          }


When I want a link, I use a standard d3.js .on("click"

You can do things like this:
Code: Select all
                 .on("click", function(d) { $scope.handlers.gotoMethodMethodID('purchase_invoices_for_product', d.key, $scope.model.cost_type_filter); } );


In my .spec i have a handler:

Code: Select all
,"handlers":
   {
           "gotoMethodMethodID" : {
              "parameters": [
                        { "name":"destination", "type":"string"},
                        { "name":"project_id", "type":"int"},
                        { "name":"filter_id", "type":"int"}
                      ]
           }
          
   }


With this I can put a standard Servoy method on the form and attach it to the "gotoMethod" of the component in Properties.
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1236
Joined: Wed Oct 01, 2003 10:20 am
Location: London


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 1 guest