TutorialsEngineering

Build in-app collaboration and chat Using Weavy and Syncfusion ASP.NET MVC UI

Apr 14, 2021

Johan Jeppson
You can use the publicly available Weavy showcase project if you don't want to set up your own Weavy backend. In that case, you should replace {weavyurl} in the script blocks with showcase.weavycloud.com
However, it is recommended that you set up your own instance of the Weavy backend somewhere in your infrastructure. Then you would use that URL as the {weavyurl} in the script blocks in the tutorial.
That will give you a greater understanding of what's going on and allow you to customize Weavy far better.

Note: this tutorial was written for Weavy v8, which uses a different codebase than the current version of Weavy.

 

Add the script

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.

TIP! Syncfusion has a great Visual Studio extension for creating a new Syncfusion MVC Web project.

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>

Add a container

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.

Add the apps

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.

Authentication

Authentication is handled via JWT tokens and explained in depth in the Single Sign-On tutorial. You can also find more information about creating the JWT token in the Complete project tutorial.
If you are using the publicly available Weavy showcase project you can use the token below to "fake" the JWT authentication:

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>

Try it out!

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.
Weavy