时间戳

首页 > 解决方案 > Vaadin 应用程序中的 pendo 或类似服务

javascript - Vaadin 应用程序中的 pendo 或类似服务

问题描述

人们如何在 Vaadin 7 应用程序中使用pendo ？以我目前的 pendo 知识，我知道以下需要做的事情：

  1. 在每个页面上嵌入 pendo JavaScript 片段。所以，由于大多数 Vaadin 应用程序都是单页应用程序，我猜这个片段需要在 UI 中加载，可能使用Page.getCurrent().getJavaScript().execute或JavaScript.getCurrent().execute. 我认为还有一个@JavaScript注释，但我已经尝试了几次并且无法使其工作（请参阅此处和此处了解我无法使其工作的地方）。
  2. 通过调用 pendo.initialize({...}); 来初始化 pendo。我想这需要在通过 登录我的应用程序（此时有用户 ID）后完成JavaScript.getCurrent().execute，但不完全确定在哪里执行此操作。此外，根据 Pendo 的说法，每次重新加载 Windows 时都需要执行此操作。我想我可以在我的 UI 类中执行此操作，仅在登录完成后发生。但是在视图之间切换时我也需要这样做吗？严格来说，这不是重新加载，所以不确定。

基本上，我认为有人在 Vaadin 应用程序中使用了 Pendo，因此寻找我能得到的任何建议，尤其是尚未包含在 pendo 文档中的建议。

标签： javascriptvaadinvaadin7

解决方案

我没有使用 Pendo 的直接经验，但使用了类似的产品 WalkMe ( https://www.walkme.com/ )。为了将其添加到页面，我们执行了以下操作

  1. 创建自定义实现com.vaadin.server.VaadinServlet
  2. 覆盖com.vaadin.server.VaadinServlet#servletInitialized，这里我们执行以下操作
@Override
    public void servletInitialized () throws ServletException {
        super.servletInitialized ();

        getService ().addSessionInitListener ( new SessionInitListener () {

            @Override
            public void sessionInit ( SessionInitEvent event ) throws ServiceException {

                event.getSession ().addBootstrapListener ( new BootstrapListener () {

                    @Override
                    public void modifyBootstrapFragment ( BootstrapFragmentResponse response ) {
                    }

                    @Override
                    public void modifyBootstrapPage ( BootstrapPageResponse response ) {

                        if ( scripts.length != 0 ) {
                            ArrayUtils.reverse ( scripts );
                            for ( String script: scripts ) {
                                if ( !script.isEmpty () ) {
                                    response.getDocument ().head ().prependElement ( "script" ).attr ( "type", "text/javascript" ).text ( script );
                                }
                            }
                        }
                    }
                } );
            }
        } );
    }
  • 附加到标头的脚本通过构造函数基于自定义 servlet 实现
  1. 使用带有 @Configuration 注释的类将 CustomServlet 注册为 VaadinServlet 类型的 bean
@Configuration
public class VaadinConfig {

    @Bean
    public VaadinServlet getVaadinServlet () {
        return new CustomServlet ( new String [] { "The actual WalkMeScript" } );
    }


}

为了让 WalkMe 了解它所在的页面以及接下来要突出显示的项目，我们在每个相关的 Vaadin 组件上引入了 id，然后在 WalkMe 脚本中使用这些

PS 值得一提的是，我们使用的是 Spring Boot，所以如何注册 Servlet 可能因您的堆栈而异

推荐阅读