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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Confused how to run some samples in documentation mixed TS and ES

Thread ID:

Created:

Updated:

Platform:

Replies:

143904 Apr 10,2019 06:21 AM UTC Apr 17,2019 06:18 AM UTC Vue 3
loading
Tags: Diagram
Hani Yasin
Asked On April 10, 2019 06:21 AM UTC

Dear Support
I am confused on how to run some sample codes in your documentation for example i received the following sample from you ( attached) , and it runs perfectly
but one i tried to combine the sample code present in the symbol palette section (appended) it turns out that it contains TS code
what should i do to be able to make it work

-----------------------------------------------------------------------------------------------------------


Add palettes to SymbolPalette


.......
...
let connectorSymbols: ConnectorModel[] = [{
...
let palette: any;
...

Attachment: erddiagram301321552_bd6443d9.zip

Ramya Thirugnanam [Syncfusion]
Replied On April 12, 2019 07:15 AM UTC

Hi Hani, 
We can create a Vue CLI app with TypeScript config using the following steps.  
  1. Create a vue app using following command in command prompt.
vue create {app-name}   
  1. Select typescript alone in the features needed for your project. 
     
   
  1. Configure the App.vue in the src folder .In the  App.Vue file add the symbol palette component and include necessary code snippet and styles for symbol palette. 
  2. In the script section set language as ts. So that you can include a ts code in the file
<script lang="ts">  
  1. Run the app using the following command.
npm run serve   
   
 We have created a sample for your requirement. Please find the sample in below link  
  
  
Regards, 
Ramya T 
 


Hani Yasin
Replied On April 16, 2019 08:21 AM UTC

Thank you for the snippets , it is clear now 
i do not know if i have to open a new thread or it is acceptable to append , the issue is related and goes like this
from the code you have attached i tried to edit and add the UmlClassifier shapes to the Pallete
but did not succeed
i tried to follow the documentation and saw the NodeModel can accept UmlClassifierShapeModel, but the shape does not show in the pallete instead the pallete is broken,in order to make sure i tried with the swimlane and it shows , but for the UMLclass not
can you please help


let basicShapes1: NodeModel[] = [{
id: "Patient",
//Position of the node
offsetX: 200,
offsetY: 200,
shape: {
type: "UmlClassifier",
//Define class object
class: {
name: "Patient",
//Define class attributes
attributes: [{ name: "accepted", type: "Date" }],
//Define class methods
methods: [{ name: "getHistory", type: "getHistory" }]
},
classifier: "Class"
}
}];

Ramya Thirugnanam [Syncfusion]
Replied On April 17, 2019 06:18 AM UTC

Hi Hani, 
Currently, we don’t have support to add Uml Class Shapes in symbol palette. We have logged “Support to add UML shapes in symbol palette” as a feature request. We will implement this feature in any of our upcoming release. Please find the feature description below. 
 
Feature description: 
In Uml class shape, class, members, interface and separator will be rendered as an individual shape in symbol palette. So that you can drag the shapes from palette onto the diagram and create as an Uml class shapes. 
 
 
Now, you can now track the status of your request, review the proposed resolution timeline, and contact us for any further inquiries through below link.   
 
Regards, 
Ramya T 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon