Apr 14, 2021
{weavyurl}
in the script blocks with showcase.weavycloud.com
{weavyurl}
in the script blocks in the tutorial.
In this tutorial, we are adding the Weavy client to a Syncfusion ASP.NET MVC template project. The steps involved can differ depending on which Syncfusion product you are embedding Weavy into, MVC, .Net Core, etc, but as long as it is web-based the basic steps are the same.
Locate a .cshtml
where you want to add Weavy, for example, Index.cshtml. Open it and add the script block below to the section @section scrips {}
:
<script src="https://{weavyurl}/javascript/weavy.jquery.min.js"></script>
<script>
var weavy = new Weavy();
</script>
Weavy can be inserted on your page exactly where you want it to be. In this example, we are going to add a Weavy files app and a Weavy tasks app to a Syncfusion Dashboard control. But remember, you can add Weavy to a page in a number of different ways.
First, add the Dashboard definition and the Weavy containers:
@Html.EJS().DashboardLayout("defaultLayout").Columns(3).AllowResizing(true).CellSpacing(new double[] { 20, 20 }).ContentTemplate(
@<div>
<div id="panel1" class="e-panel" data-row="0" data-col="0" data-sizeX="2" data-sizeY="1">
<span id="close" class="e-template-icon e-clear-icon"></span>
<div class="e-panel-container">
<div>Place any content or other Syncfusion controls here...</div>
</div>
</div>
<div id="panel3" class="e-panel" data-row="0" data-col="2" data-sizeX="1" data-sizeY="3">
<span id="close" class="e-template-icon e-clear-icon"></span>
<div class="e-panel-container">
<div id="weavy-tasks-container" style="height:100%"></div>
</div>
<div id="panel2" class="e-panel" data-row="1" data-col="0" data-sizeX="2" data-sizeY="2">
<span id="close" class="e-template-icon e-clear-icon"></span>
<div class="e-panel-container">
<div id="weavy-files-container" style="height:100%"></div>
</div>
</div>
</div>
</div>)
In the dashboard layout above we have three columns and three rows. The tasks app is placed to the right and spans tree rows. The files app is placed on row two and spans two columns.
Weavy comes with several built-in apps. Every app needs to be associated with a Space. You can think of the Space as a container for one or more apps.
Update the script block you added earlier so that it now contains the space and app declarations found below. This piece of code will load the Weavy client, create a space and load the apps in the containers you specified.
<script src="https://{weavyurl}/javascript/weavy.jquery.min.js"></script>
<script>
var weavy = new Weavy();
var space = weavy.space({ key: "syncfusion-space", name: "Syncfusion Demo Space" });
space.app({ key: "my-files", name: "Files", type: "files", container: "#weavy-files-container" });
space.app({ key: "my-tasks", name: "Tasks", type: "tasks", container: "#weavy-tasks-container" });
</script>
Every space and app needs at least a key
when created. The key
is how you control what should be displayed from Weavy in your app. Think of it as an association between the context in your app and what content to show from Weavy. Let's say you have a customer page showing Customer X. You probably have an internal id or guid of that customer in your app. Use that unique id when creating the key
for spaces and apps in Weavy.
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJvbGl2ZXIiLCJuYW1lIjoiT2xpdmVyIFdpbnRlciIsImV4cCI6MjUxNjIzOTAyMiwiaXNzIjoic3RhdGljLWZvci1kZW1vIiwiY2xpZW50X2lkIjoiV2VhdnlEZW1vIiwiZGlyIjoiY2hhdC1kZW1vLWRpciIsImVtYWlsIjoib2xpdmVyLndpbnRlckBleGFtcGxlLmNvbSIsInVzZXJuYW1lIjoib2xpdmVyIn0.VuF_YzdhzSr5-tordh0QZbLmkrkL6GYkWfMtUqdQ9FM
Configure the Weavy client to use the token by setting the jwt
parameter when declaring the Weavy instance:
<script src="https://{weavyurl}/javascript/weavy.jquery.min.js"></script>
<script>
var weavy = new Weavy({ jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJvbGl2ZXIiLCJuYW1lIjoiT2xpdmVyIFdpbnRlciIsImV4cCI6MjUxNjIzOTAyMiwiaXNzIjoic3RhdGljLWZvci1kZW1vIiwiY2xpZW50X2lkIjoiV2VhdnlEZW1vIiwiZGlyIjoiY2hhdC1kZW1vLWRpciIsImVtYWlsIjoib2xpdmVyLndpbnRlckBleGFtcGxlLmNvbSIsInVzZXJuYW1lIjoib2xpdmVyIn0.VuF_YzdhzSr5-tordh0QZbLmkrkL6GYkWfMtUqdQ9FM" });
var space = weavy.space({ key: "syncfusion-space", name: "Syncfusion Demo Space" });
space.app({ key: "my-files", name: "Files", type: "files", container: "#weavy-files-container" });
space.app({ key: "my-tasks", name: "Tasks", type: "tasks", container: "#weavy-tasks-container" });
</script>
Navigate to the page in your Syncfusion MVC project where the Dashboard layout is displayed. The files and tasks app should load and be draggable, just like any other dashboard panel.