All Products
Search
Document Center

DataV:Publish a project

Last Updated:Apr 27, 2023

You can use the PC-side visualization application publishing feature to publish a PC-side visualization application to the online environment and configure access permissions for other users to view the application online. This topic describes how to publish a visualization application on a PC.

Procedure

  1. Log on to the DataV console.
  2. On the My Visualizations page, select a visualization application and click Edit.

  3. In Canvas Editor on PC, click the Publish icon in the upper-right corner.

    image..png
  4. In the Publish dialog box, click Publish Project.

    发布大屏
    Note

    If you publish the application for the first time, the Successfully Published dialog box appears. In the dialog box, you can click Go to Snapshots to view the snapshots. If you do not need to view the snapshots, click Cancel to go to the Publish page. If a publishing failure occurs when you publish a visualization application for the first time, you can switch the DataV URL of the current page from HTTP to HTTPS and then select Publish again. image..png

  5. After the application is published, the system turns on Published and generates a sharing link and a QR code.

  6. Scan the QR code to access the visualization application on your PC.

    Click QR Code to view the QR code of the current visualization application. You can scan the QR code to access your visualization application online.

    image..png
  7. Access your PC-side visualization application online.

    Click the Copy icon next to Shared Link to open a browser and paste the copied link to the address bar. Then, you can access the visualization application on your PC.

    image..png
    Note

    After the project is published, if you want to change the sharing link, click the 重新生成链接Regenerate Link icon on the left side of the Sharing Link to generate a new sharing link. After the rebuild, the old share link will not be available. Use the new share link to access the target visualization application.

  8. Optional. After the visualization application is shared, you can configure the parameters of the Publish Snapshot parameter. You can also configure the Access Restriction, Sharing Information, and Loading Page Settings parameters.

Publish a snapshot

After you configure the sharing link, you can configure Publish Snapshot to specify the version of the visualized application that visitors can view. By default, the snapshot version is used as the published version. The contents of the screen are locked at the moment the snapshot is created. image..png

Important

After archiving, edits and modifications of the screen content are not synchronized to the historical snapshot and can be used as a backup of the stable preview version.

Follow these steps

  1. In the Publish dialog box, select an archived snapshot from the Snapshot drop-down list to publish the snapshot.

    • If the current visualization application does not have historical snapshots, the system publishes the content of the current editor as the first snapshot.

    • If the current visualization application has a snapshot, the system automatically releases the latest snapshot.

  2. Click Overwrite Published Snapshot to change the content of the application in the published snapshot to the content on the current editing page.

  3. In the lower part of the page, click Create and Publish Snapshot. In the Create and Publish Snapshot dialog box, select the new snapshot and publish it immediately.

  4. You can click Manage Snapshots in the lower part of the page to manage multiple snapshots. For more information, see Manage snapshots.

Manage snapshots

In the Publish dialog box, click Manage Snapshots. Alternatively, you can click the Manage Snapshots icon (管理快照下拉框) next to Generate Snapshots in the upper-right corner of Visual Application Editor. In the Snapshots dialog box, you can perform the following operations to manage snapshots.

Important

If you click Create Snapshot or Modify Snapshot on the Snapshots page and the Failed to Add or Modify Snapshot message appears, you can switch the URL of DataV on the current page from HTTP to HTTPS.

  • View quota: In the upper-right corner of the Snapshots dialog box, you can view the remaining quota on the Snapshots page. Once the number of snapshots reaches the upper limit, you cannot add snapshots. You must delete the snapshots that you no longer need.

    Note

    The number of snapshot quota varies for different versions.

    • Basic Edition: up to one.

    • Enterprise Edition: up to three.

    • Professional Edition: No more than 10.

  • Add Snapshot: In the Snapshots dialog box, click Add Snapshot to add a snapshot.

  • Overwrite Published Snapshot: Click Overwrite Published Snapshot. The content of the editor overwrites the original content of the snapshot on the publish page. The update takes effect in real time. The configuration of Canvas Editor, Data Source, and Blueprint Editor are updated. 覆盖快照

  • Publish or Disable Snapshot: Select a snapshot in the Management section and click the 发布快照icon on the right to quickly publish the application or switch to the published snapshot. After you switch the snapshot, the content of the publishing page changes to the content of the corresponding snapshot. Click the icon again to disable the snapshot.

  • Lock Snapshot: Click the 锁定快照icon next to a snapshot to lock the snapshot. After the snapshot is locked, it cannot be deleted or overwritten.

  • Batch Delete: Select multiple or all snapshots and click the Batch Delete icon in the lower part of the page to delete multiple snapshots at a time. The batch deletion feature cannot delete published and locked snapshots.

    Note

    Published snapshots cannot be deleted.

    批量删除
    Important

    Currently, you can only switch snapshots and do not have the rollback feature. After a snapshot is deleted, it cannot be restored. Procure with caution.

  • Annotation Snapshot: Click the 编辑注释icon to customize the annotation content of the snapshot. 注释图标

Access limits

The release feature of DataV provides four ways to share visual applications:

  • Public sharing (default).

  • Password to access sharing.

  • Share by token verification.

  • IP address whitelist access sharing.

Important

The Access Restriction feature is supported only for the Enterprise edition or a higher edition.

Password authentication

  1. In the Publish dialog box, turn on Password. image..png

  2. In the Access Password field, enter your password.

    The password must be more than 6 characters in length and must meet the following three conditions:

    • It must contain at least one capital letter A to Z.

    • The name must contain at least one lowercase letter a to z.

    • Contains at least one digit from 0 to 9.

    After the password is set, the system prompts Access Restrictions Set.

  3. Optional: Validation period.

    Important

    You can configure the Validity Period parameter only after you set a password or enable token verification.

    • Select Validity Period to specify the validity period of the password. The maximum validity period is 32 hours. After the visitor enters the password for the first time and successfully accesses the visualization application, the visitor can access the visualization application without entering the password within the specified validity period.

    • Select Validity Period and enter a password for each access.

    After the password is set, when you access the sharing link of the visualization application again, the system prompts you to enter the password. 密码访问大屏页面

Use Token Verification

You can use token authentication to integrate the access permissions of a visualization application with your permission system.

In the Publish dialog box, turn on Pass Token Verification to enable token verification. After token verification is enabled, you can perform the following operations:

  • Obtain a token verification code.

    After you turn on Pass Token Verification, DataV generates a token, as shown in the following figure. You need to record this token for later use. 获取Token验证码

  • Optional. Configure Validation Period.

    • If you select Validity Period, you can set the validity period to 32 hours. After a visitor performs token verification for the first time and successfully accesses the visualization application, the visitor can access the visualization application without the need for further verification within the specified validity period. 设置TOKEN有效期限

    • Select Validity Period. Each access must pass the verification.

After token verification is enabled, open the sharing page of the visualization application again, and you will receive an Access Denied message indicating that your access is denied. If you want to open your page, you need to complete the following steps.

Important

To prevent replay attacks, ensure that your server time is East 8 Standard Time. DataV only provides an error of 1 minute. If the error exceeds 1 minute, the verification fails.

  1. Publish the visualization application and record the encoding of the visualization application (the last segment of the URL).

  2. Connect the code to the current time in milliseconds, separated by a | (vertical bar).

  3. Use the token through HMAC-SHA256 base64 to encrypt the token verification code obtained in the previous step.

  4. The time and the encrypted signature are respectively named _datav_time and _datav_signature.

  5. Put them in turn into URL querystring.

    Important

    If you need to use GET to pass parameters in the URL of your visualization application, we recommend that you use the token parameter provided by DataV to verify the signature for security purposes. For more information, see Verify the signature of the token parameter on the DataV sharing page.

    Sample code:

    • PHP:

      <?php
        $token = "kBwoX9rFX9v4zbOT0Gjd_wr65DZ****";
        $screenID = "03d1b68faeb09671046d1ef43f58****";
        $time = time()*1000;
        $stringToSign = $screenID.'|'.$time;
        $signature = urlencode(base64_encode(hash_hmac('sha256', $stringToSign, $token, true)));
        $url = "http://datav.aliyuncs.com/share/".$screenID."?_datav_time=".$time."&_datav_signature=".$signature;
      ?>
      <iframe width=100% height=100% src="<?=$url?>"/>
    • Node.js:

      const crypto = require('crypto');
      var token = "Ev97wOUSAtJusc3Vsd9O2ngr_vfV****";
      var screenID ="14c5448c00ecde02b065c231d165****";
      var time = Date.now();
      var stringToSign = screenID +'|'+ time;
      var signature = crypto.createHmac('sha256', token).update(stringToSign).digest().toString('base64');
      var url="http://datav.aliyuncs.com/share/"+ screenID +"?_datav_time="+time+"&_datav_signature="+ encodeURIComponent(signature);
    • Java:

      package com.company;
      import java.security.*;
      import java.util.Date;
      import javax.crypto.*;
      import javax.crypto.spec.SecretKeySpec;
      import org.apache.commons.codec.binary.Base64;
      import java.net.URLEncoder;
      public class TokenTest {
          public static String getSignedUrl(String screenID, String token){
              Date date = new Date();
              Long time = date.getTime();
              String stringToSign = screenID + "|" + time;
              String signature = HMACSHA256(stringToSign.getBytes(), token.getBytes());
              String url = "http://datav.aliyuncs.com/share/"+ screenID +"?_datav_time="+time+"&_datav_signature="+ signature;
              return url;
          }
          /**
           * Use the Java native digest to implement SHA256 encryption. 
           * @param str The encrypted packet. 
           * @return
           */
          public static String HMACSHA256(byte[] data, byte[] key)
          {
              try  {
                  SecretKeySpec signingKey = new SecretKeySpec(key, "HmacSHA256");
                  Mac mac = Mac.getInstance("HmacSHA256");
                  mac.init(signingKey);
                  return URLEncoder.encode(byte2Base64(mac.doFinal(data)));
              } catch (NoSuchAlgorithmException e) {
                  e.printStackTrace();
              } catch (InvalidKeyException e) {
                  e.printStackTrace();
              }
              return null;
          }
          private static String byte2Base64(byte[] bytes){
              return Base64.encodeBase64String(bytes);
          }
          public static void main(String[] args) throws Exception {
              System.out.println(getSignedUrl("screenId", "token"));
          }
      }
    • C#:

      using System;
      using System.Security.Cryptography;
      using System.Text.RegularExpressions;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using System.Text;
      
      namespace datavToken
      {
          class Program
          {
              static void Main(string[] args)
              {
                  var dic=new Dictionary<string, string>(); // Custom parameters. 
                  dic.Add("datav_sign_no", "123998"); // The name must start with datav_sign_. A signature is required. 
                  dic.Add("datav_sign_lo", "kk");
                  dic.Add("datav_sign_ao", "xx");
      
                  dic.Add("name", "123"); // No signature is required. 
                  // The prefix of the shared page, the ID and token of the shared screen, and the custom parameter dictionary. 
                  Console.WriteLine(GenerateUrl("https://datav.aliyun.com/share/", "ca74bea5e45503070d607795e0****", "66DsL2qjrXRHluSJScv_flOUhn****", dic));
              }
              private static string GenerateUrl(string datavBase, string screenId, string token, Dictionary<string, string> customeParams)
              {
                  string pattern = @"^datav_sign_.*";
                  string timestamp = GetTimeStamp();
      
                  // Sort the parameters. 
                  Dictionary<string, string>.KeyCollection keyCol = customeParams.Keys;
                  List<string> signKeys = new List<string>();
      
                  foreach (var item in keyCol.ToList())
                  {
                      if (Regex.IsMatch(item, pattern))
                      {
                          signKeys.Add(item);
                      }
                  }
      
                  // Sort by key. 
                  signKeys = signKeys.OrderBy(k => k).ToList();
      
                  string paramsSignStr = signKeys.Aggregate("", (total, key) =>
                  {
                      if (total != "")
                      {
                          total += "&";
                      }
                      total += key + "=" + customeParams[key];
                      return total;
                  });
                  // No parameter authentication exists.
                  string signStr = screenId + "|" + timestamp;
                  // Parameter authentication exists.
                  //string signStr = screenId + "|" + timestamp + "|" + paramsSignStr;
                  
      
                  var encoding = new System.Text.ASCIIEncoding();
                  byte[] keyByte = encoding.GetBytes(token);
                  byte[] messageBytes = encoding.GetBytes(signStr);
                  string signature;
                  using (var hmacsha256 = new HMACSHA256(keyByte))
                  {
                      byte[] hashmessage = hmacsha256.ComputeHash(messageBytes);
                      signature = Convert.ToBase64String(hashmessage);
                  }
      
      
                  var paramDic = new Dictionary<string, string>();
                  paramDic.Add("_datav_time", timestamp);
                  paramDic.Add("_datav_signature", signature);
      
                  foreach (var item in customeParams)
                  {
                      paramDic.Add(item.Key, item.Value);
                  }
                  return datavBase + screenId + "?" + ParseToString(paramDic);
              }
              public static string GetTimeStamp()
              {
                  TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);
                  return Convert.ToInt64(ts.TotalMilliseconds).ToString();
              }
              static public string ParseToString(IDictionary<string, string> parameters)
              {
                  IDictionary<string, string> sortedParams = new SortedDictionary<string, string>(parameters);
                  IEnumerator<KeyValuePair<string, string>> dem = sortedParams.GetEnumerator();
      
                  StringBuilder query = new StringBuilder("");
                  while (dem.MoveNext())
                  {
                      string key = dem.Current.Key;
                      string value = dem.Current.Value;
                      if (!string.IsNullOrEmpty(key) && !string.IsNullOrEmpty(value))
                      {
                          query.Append(key).Append("=").Append(HttpUtility.UrlEncode(value)).Append("&");
                      }
                  }
                  string content = query.ToString().Substring(0, query.Length - 1);
      
                  return content;
              }
          }
      }

IP address whitelist access

After you enable an IP address whitelist, the published visualized application can be accessed only from the IP addresses in the whitelist.

  1. In the Publish dialog box, turn on IP Whitelist.

    image..png
  2. In the IP Whitelist field, enter your IP address and separate the whitelists with commas (,).

    After the IP address whitelist is configured, when you access the shared link of the visualization application again, if you use an IP address that is not in the whitelist to access the current visualization application, access to the visualization application page will be denied. image..png

Share information

The DataV visualization application allows you to modify the content of shared information when you share and publish a link in the DingTalk client. The following table describes the parameters.

Figure 1. Sample sharing information configuration image..png

Figure 2. DingTalk client sharing link sample display image..png

Parameter

Description

Title

You can customize the title name of the shared link of the visual application to be published. By default, the title name is displayed when the visual application is created.

Descriptions

You can describe the content of the upcoming visual application sharing link.

Image

You can enter a custom image URL or drag a local image to the right-side image column to set a sharing link for a visual application that is about to be published.

Important

Static or dynamic images can be added here, but they are all static images in the shared link display.

Important

If the shared card does not take effect, the shared information may be modified multiple times due to the cache mechanism of the DingTalk client. We recommend that you restart the DingTalk client and then share the link.

Load Page Settings

The DataV visualization application allows you to customize the loading page content when you share a publishing link. The following table describes the parameters.

Important

Professional Edition onlyThe Load page configuration feature is supported.

Figure 3. Sample load page configuration content image..png

Figure 4. Load page sample display image..png

Parameter

Description

Background information

You can customize the background color of the loading page of the visual application to be released. Solid color and gradient color are supported.

Logo

You can specify a Logo image on the loading page of a visual application to be published. You can enter the URL of the image or drag a local image to the right-side image column to specify a Logo image.

Important

You can add static or dynamic images. If you specify a dynamic image, the image is dynamically displayed on the loaded page.