Show Zendesk Garden Modal Component in middle of screen

6 댓글

  • Ahmed Zaid
    User Group Leader Community Moderator
    Zendesk Luminary

    Hi Norbert Iberer,

    You would need to trigger a secondary app location "modal" for that.

    I hope that helps.

    0
  • Norbert Iberer

    Hi Ahmed Zaid,

    thank you for your quick reply.

    I have already tried the approach of triggering a second app location as described under "Modal".

    However, the problem occurs with the key url. Here, only an absolute URL is possible or a project file that begins with /assets. However, I would like to display a PDF in the modal using the React PDF Viewer.

    Is it possible at all to combine this "Modal" with a React component?

    Many thank in advance for your efforts.

    1
  • 김소라

    I too am experiencing the same problem. Please advise.

    0
  • Ahmed Zaid
    User Group Leader Community Moderator
    Zendesk Luminary

    Hello Norbert Iberer,

    Sorry I could not reply for the past couple of weeks. You will create a new project html file specifically for this location.

    I have not developed a multi-location app with react before, but here is how I imagine it would happen assuming you are using the Zendesk react app scaffold with webpack:

    • Create a your modal component entry point e.g. /src/javascripts/locations/modal.js and configure it in webpack.config.js
      entry: {
      app: [
      './src/javascripts/locations/ticket_sidebar.js',
      './src/index.css'
      ],
      modal: [
      './src/javascripts/locations/ticket_sidebar.js',
      './src/styles/modal.css'
      ]
      },
    • Add chunks option to the HtmlWebPackPlugin and specify only the ['app'] chunk
    • Add a second HtmlWebPackPluginplugin to the plugins array. It should be identical to the existing ones except that file name would be something like modal.html and the chuncks would be ["modal"]
      new HtmlWebpackPlugin({
      warning: 'AUTOMATICALLY GENERATED FROM ./src/templates/iframe.html - DO NOT MODIFY THIS FILE DIRECTLY',
      vendorJs: externalAssets.js,
      template: './src/templates/iframe.html',
      filename: 'iframe.html',
      chunks: ['app']
      }),

      newHtmlWebpackPlugin({
      warning: 'AUTOMATICALLY GENERATED FROM ./src/templates/iframe.html - DO NOT MODIFY THIS FILE DIRECTLY',
      vendorJs: externalAssets.js,
      template: './src/templates/iframe.html',
      filename: 'modal.html',
      chunks: ['modal']
      })

    Now when you build the project you should have 2 html files with 2 separate bundles. Add the url for modal in the manifest file as assets/modal.html

    I hope that helps.

    1
  • 김소라

    Thank you. I solved the problem with your help.

    Thank you so much!

    0
  • Norbert Iberer

    Hello Ahmed Zaid,

    thank you very much for your efforts and the detailed answer. Your solution approach looks very promising. I will give it a try and hope that it is a solution to my problem.

    0

댓글을 남기려면 로그인하세요.

Zendesk 제공