How to acces data in listView like in editView with useCMEditViewDataManager?

Community Packages Plugins
1

I want create a button in the viewList page and make a bulk action but the problem is i can’t have the data from the items selected like in editView page with useCMEditViewDataManager() hook .

Can anyone help me ?

thank you

sorry for my bad english.

2

you can watch Strapi End of Year Community Hangout 2021 - YouTube specifically at minuet 32 he will show example of creating new plugin and explain the usage of useCMEditViewDataManager()

3

I saw this video and I am successful in recovering the data in the edit page but not in the view page I would like to select for example elements and be able to recover the data of these elements and do an action with a button

4

I would like to know if this feature is available as well. In particular, having a way to access something like the data stored in the layout object of useCMEditViewDataManager. This would allow us to (easily) apply conditional logic based on apiID.

@Louai_Kelani, if you are attempting to do something similar (conditional parameters on a button), the following workaround serves as a temporary solution: retrieve the apiID by destructuring the window.location.pathname.

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const MyInjectedComponent = (props) => {
  const [apiID, setApiID] = useState(null)
  const [responseData, setResponseData] = useState({})

  useEffect(() => {
    // eslint-disable-next-line no-undef
    const apiIDFromUrl = window.location.pathname.split('::')[1].split('.')[0]

    setApiID(apiIDFromUrl)

    ;(async () => {
      try {
        // NOTE: Many collection-types are pluralized, so you may need to
        // transform the apiID to work for your purposes
        const { data } = await axios.get(`${process.env.API_URL}/${apiID}s`)

        setResponseData(data)

      } catch (error) {
        console.error(error)
      }
    })()

    return () => {
      // ... Cancel axios request
    }
  }, [])

  return <button onClick={() => console.log(responseData)}>{apiID}</button>
}

export default MyInjectedComponent
1 Like
5

Actually right now I’m writing a plugin that do the exact same thing (a button to export and import the data in the layout). I simply used the useSelector hook provided by redux and it will simply supply you with all the states you need and more.

Here how I use it:

import { useSelector } from "react-redux";

const MyInjectedComponent = () => {
    // it has all the info you need
    const state = useSelector()
}

Notice that you can access the redux provided by strapi because you are in the injection zone which is located under the list view page that is mapped with redux and you will not be able to use it in plugin pages that you’ve created or plugins injection zones other than content-manager plugin.

1 Like
6

@Louai_Kelani, that is a much more elegant solution. Thanks!

1 Like