We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Vue
  4. UML class diagram add attributes

UML class diagram add attributes

Hello,


is it possible to generate the UMLclasses with datas from a mysql database dynamically and save the Classdata into a database? 
also i want to know is it possible to add some more Attributes to a Class from an external button like your component "datagrid ? 

4 Replies
RT Ramya Thirugnanam Syncfusion Team May 10, 2019 11:54 AM UTC

Hi Nurhan,  
 
Thanks for contacting Syncfusion support. 
 
We have created a simple UML class diagram. We can create a database with class method and attributes value in a table and retrieve the same from database and append it in UMLclassifier shape attributes and methods collection.  We will share the sample with database and DataGrid on May 14th, 2019. 
 
 
 
 
Regards, 
Ramya T 


RT Ramya Thirugnanam Syncfusion Team May 14, 2019 12:06 PM UTC

Hi Nurhan,   
We have created a vue sample in which we have loaded the class diagram by retrieving the data from the database. Also, we have created a sample based on the following scenario.   
Server side:   
·        We have created a webApi sample in which we have created a database with table ClassDiagram. 
·        In the table, we have included UML class object value in the ClassObject column. 
·        Please refer to the code example below in which we have shown how to retrieve the data from database in the web API controller. 
 Code example:   
       [AcceptVerbs("Get")]  
        [HttpGet]   
        [Route("GetData")]   
        public List<ClassDiagram> GetData()  
        {  
            DiagramEntities entity = new DiagramEntities();  
            List<ClassDiagram> classData = entity.ClassDiagrams.ToList();  
            return classData;  
        }  
  
  
Client Side:     
·        In Vue sample, we have used Axios to retrieve data from server side to client side. 
·        We have created a node by retrieving class object from database and set that it in node class property.   
Code example:   
mounted() {  
    //retrieve server side API  
     .then(response => {  
        if(response.data.length > 0) {  
          //iterate the database class object  
            for( var i = 0; i < response.data.length; i++) {   
               var data = response.data[i];  
               var classData = JSON.parse(data.ClassObject);  
               // create a node  
               this.nodes.push({  
                 id: classData.name, offsetX: 400, offsetY: 200 * i,  
                  shape: {  
                    type: 'UmlClassifier',  
                    class: classData,  
                    classifier: 'Class'  
                  }  
               })  
            }  
        }   
     })  
  }  
  
We don’t have layout support for UML diagram. So, we have manual created and position the nodes and connectors. 
From external button like “datagrid”. 
Could you please confirm your requirement whether the data for the uml diagram from datagrid with add and delete option? This will help u to serve you better, 
 
Regards, 
Ramya T 


NA Nurhan Aydogdu May 15, 2019 12:11 PM UTC

Hi Ramya, 

many thanks you for your reply. i will explain my situation.
I want to continue my project with your datagrid component or Umlclassdiagram. 
I think datagrid is the best way but actually i ask for support.  

In Uml i have properties like name type and scope. But i want to add a third custom propertie. Is it possible?   

With my requirement: "also i want to know is it possible to add some more Attributes to a Class from an external button like your component "datagrid ? "
I want handle the new attributes or methods, also classname dynamically at realtime. In Datagrid i have the option toolbar with editsettings (buttons add, delete, update..). How can i do the same for umlclassdiagram. 


I have try to run the sampleUml in vs code and the samplewebapi in visual Studio. 
I get the exception from webapi:


System.Web.HttpException

The resource cannot be found.

Description: HTTP 404.The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.

Details: No virtual path information available.

Exception stack trace:
at System.Web.Mvc.DefaultControllerFactory.GetControllerInstance (System.Web.Routing.RequestContext requestContext, System.Type controllerType) [0x00049] in <1bc1086d33d84331be159596882bcf5b>:0 at System.Web.Mvc.DefaultControllerFactory.CreateController (System.Web.Routing.RequestContext requestContext, System.String controllerName) [0x00044] in <1bc1086d33d84331be159596882bcf5b>:0 at System.Web.Mvc.MvcHandler.ProcessRequestInit (System.Web.HttpContextBase httpContext, System.Web.Mvc.IController& controller, System.Web.Mvc.IControllerFactory& factory) [0x00067] in <1bc1086d33d84331be159596882bcf5b>:0 at System.Web.Mvc.MvcHandler.BeginProcessRequest (System.Web.HttpContextBase httpContext, System.AsyncCallback callback, System.Object state) [0x0000d] in <1bc1086d33d84331be159596882bcf5b>:0 at System.Web.Mvc.MvcHandler.BeginProcessRequest (System.Web.HttpContext httpContext, System.AsyncCallback callback, System.Object state) [0x00007] in <1bc1086d33d84331be159596882bcf5b>:0 at System.Web.Mvc.MvcHandler.System.Web.IHttpAsyncHandler.BeginProcessRequest (System.Web.HttpContext context, System.AsyncCallback cb, System.Object extraData) [0x00000] in <1bc1086d33d84331be159596882bcf5b>:0 at System.Web.HttpApplication+<Pipeline>d__225.MoveNext () [0x008d4] in /Users/builder/jenkins/workspace/build-package-osx-mono/2018-08/external/bockbuild/builds/mono-x64/mcs/class/System.Web/System.Web/HttpApplication.cs:1335 at System.Web.HttpApplication.Tick () [0x00000] in /Users/builder/jenkins/workspace/build-package-osx-mono/2018-08/external/bockbuild/builds/mono-x64/mcs/class/System.Web/S



SG Shyam G Syncfusion Team May 17, 2019 10:39 AM UTC

Hi Nurhan, 
 
Query 
Response 
many thanks you for your reply. i will explain my situation. 
İ want to continue my project with your datagrid component or Umlclassdiagram.  
İ think datagrid is the best way but actually i ask for support.   
 
İn Uml i have properties like name type and scope. But i want to add a third custom propertie. İs it possible?    
 
With my requirement: "also i want to know is it possible to add some more Attributes to a Class from an external button like your component "datagrid ? " 
İ want handle the new attributes or methods, also classname dynamically at realtime. İn Datagrid i have the option toolbar with editsettings (buttons add, delete, update..). How can i do the same for umlclassdiagram. 
  
We have checked your query and you can achieve your requirement by using the below way. We have prepared a sample in datagrid where the attribute is set initially by using customAttributes property and it is set dynamically by using the setAttribute method. Please refer the following code snippet, sample link and documentation link.  
  
[App.vue]  
<template>  
  <div id="app">  
    <ejs-button v-on:click.native="show">Add Attribute</ejs-button>  
    <ejs-grid  
      id="Grid"  
      ref="grid"  
      :dataSource="data"  
      :allowPaging="true"  
      :editSettings="editSettings"  
      height="270"  
      :toolbar="toolbar"  
    >  
      <e-columns>  
        .  .  .  .   
        <e-column  
          field="ShipCity"  
          headerText="Ship City"  
          width="120"  
          :customAttributes="customAttributes"       
        ></e-column>  
      </e-columns>  
    </ejs-grid>  
  </div>  
</template>  
  
<script>  
import Vue from "vue";  
import { GridPlugin, Page, Edit, Toolbar } from "@syncfusion/ej2-vue-grids";  
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";  
import { data } from "./datasource";  
  
Vue.use(GridPlugin);  
Vue.use(ButtonPlugin);  
export default {  
  data() {  
    return {  
      data: data,  
      editSettings: {  
        allowEditing: true,  
        allowAdding: true,  
        allowDeleting: true  
      },  
      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"],  
      customAttributes: { class: "customcss" }       // add attribute initially  
    };  
  },  
  methods: {  
    show: function(event) {  
      var header = document.getElementsByClassName("e-headercell")[0];  
      header.setAttribute("id", "demo");                 // add attribute dynamically  
    }  
  },  
  provide: {  
    grid: [Page, Edit, Toolbar]  
  }  
};  
</script>  
  
  
 
 
İ have try to run the sampleUml in vs code and the samplewebapi in visual Studio.  
İ get the exception from webapı: 
 
System.Web.HttpException 
The resource cannot be found. 
Description: HTTP 404.The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly. 
Details: No virtual path information available. 
Exception stack trace: 
 
We fetch class diagram data from database in GetData method. Once you have run the webApi sample, please navigate to http://localhost:57270/api/home/getdata.  
 
 
Regards, 
Shyam G 


Loader.
Up arrow icon