Discussion on Dandelion Pro - React Admin Dashboard Template

Discussion on Dandelion Pro - React Admin Dashboard Template

Cart 1,492 sales
Well Documented

ilhammeidi supports this item

Supported

This author's response time can be up to 1 business day.

443 comments found.

Hi! I’m trying to import an mp3 file

import mp3File from ’../../assets/sounds/beep.mp3’

but it throws an error on webpack

ERROR in ./app/assets/sounds/beep.mp3 1:0 Module parse failed: Unexpected character ‘�’ (1:0) You may need an appropriate loader to handle this file type.

Hi actatrax,

Thanks for purchasing,

You need to register .mp3 file type in /internals/webpack/webpack.base.babel.js

{
        test: /\.(/\.(ogg|mp3|wav|mpe?g)$/i)$/,
        use: {
          loader: 'file-loader',
          options: {
            limit: 10000,
           name: '[path][name].[ext]'
          }
        }
      }

Hope this can help. Feel free if you have any further queries.

Regards.

Mas ini ada import … “dan-components” ... “dan-actions” itu kemana sih file nya ?

Hi suzukidca,

Itu adalah alias path, bisa dilihat di docs: https://ilhammeidi.github.io/dandelion-docs/#code_basic > Directory Alias

Terimakasih.

Mas mau tanya mas ini kok di running gak bisa sih

gw coba npm run build ada error banyak, kalau yang starter pagenya aman” aja. tapi tutorial dicobain error juga

boleh kontakan via WA/TELEGRAM ? 081381333385

Ok udah bisa mas makasih

Mas ada refferensi konek ke API routingnya sesuai template ini ?

HI, I have a question, how can I to integrate MaterialDropZone in Redux Form? because I use the MaterialDropZone and values are not included in the submit form.

Hi jjorgewill,

You check this example code https://codesandbox.io/s/8kywn8q9xl

And for DropzoneField component, since this template use react-dropzone v10, please use the standard syntax same as in /app/components/Forms/MaterialDropZone.js

Feel free if you have any further queries.

Kind regards.

Hello,

I would like to buy your admin dashboard template, but my actual solution use TypeScript, is it a problem for your template ? Will it works ?

Thanks you,

Staan

Hi staan,

Thanks for visiting our portfolio.

This template use javascript with ES6 and jsx format. And not support for TypeScript.

Regards.

I have 2 questions: How to enable Server Side Rendering for the template? How to customise the template to have bottom navigation bar on mobile site and left side bar on desktop site?

Hi Lokll,

Thanks for purchasing.

Here’s our answer bellow:

1.About the SSR, this template framework (react boilerplate) not support for SSR. If want to use SSR you try razzle https://github.com/jaredpalmer/razzle or next js. But you have to migrate all components, containers and style to new framework

2. For bottom navigation docs please take a look http://dandelion.ux-maestro.com/app/ui/tabs and https://material-ui.com/components/bottom-navigation/#bottom-navigation

Then control the visibility on mobile and desktop screen by use <Hidden /> component https://material-ui.com/components/hidden/#hidden or JSS media query https://material-ui.com/customization/breakpoints/#breakpoints

Hope this can help. Feel free if you have any further queries.

Kind regards.

Thanks for timely reply. On point 2 – “Then control the visibility on mobile and desktop screen by use <Hidden /> component” – Can you help me locate the exact file in the theme in which we have to apply this logic? We are using left sidebar for our desktop site.

Hi Lokll,

First we suggest to create dedicated custom bottom-navigation as your requirement like the Sidebar component. Then in /app/containers/Templates/layouts/LeftSidebarLayout.js you can add it bellow <main /> element.

Regards.

Hello! I have a problem with redux-form. When i have data loaded in the initial state and try delete the input until be blank, it fill the textifeld again. http://dandelion.ux-maestro.com:3000/app/forms/reduxform Demo has this problem too.

Hi gtijr

Thanks for the reported issue.

To fix this in /app/components/Forms/ReduxFormMUI.js please change the TextFieldRedux components like this

export const TextFieldRedux = ({ meta: { touched, error }, input, ...rest }) => ( <TextField {...rest} {...input} error={touched && Boolean(error)} /> ); The props/attribute order must be same as above.

And in app/redux/modules/initForm.js change the set value to Map()
case CLEAR:
      return state.withMutations((mutableState) => {
        mutableState.set('formValues', Map());
      });

We will make a patch for this issue soon.

Hope this can help. Fell free if you have any further queries.

Regards.

thx

Hello, I purchaised Your dandelion pro theme.

Looks pretty awesome!

I have a existing app created by npx create-react-app How shall I integrate downloaded zip so I can use Your components and the theme? Which folders shall i copy and where…?

Thanks!

Hi sapek00,

Thanks for purchasing and the appreciation.

Dandelion Pro template has been created with react boilerplate (https://github.com/react-boilerplate/react-boilerplate). And actually it has a different architecture with createreactapp. But if you want to migrate it to createreactapp, you need some adjustment.

First you need take out the components/, containers/, public/ and styles/ in app folder then put it in CRA. Then actions/ api/ and redux/ as well if necessary.

In dandelion-pro we use absolute path to call the components, containers, etc to make it easier. So then in CRA please adjust the alias path settings by customize webpack configuration.

NOTE: In dandelion-pro the alias path setting is in /internals/webpack/webpack.base.babel.js To configure webpack from CRA by eject it npm run eject If you have ejected you can set the alias in the Webpack configuration in config/webpack.config.dev.js files and be able to import like you want:

Feel free if You have any further queries.

Kind regards.

Hello, I’ve a problem with the redux form component, when I try the following flow: 1. Load sample data 2. Clean and after that if you clic on a Select or in the radios the behavior is wierd http://dandelion.ux-maestro.com:3000/app/forms/reduxform

Hi jjorgewill

Thanks for purchasing and the reported issue.

To fix this in /app/components/Forms/ReduxFormMUI.js please change the TextFieldRedux components like this

export const TextFieldRedux = ({ meta: { touched, error }, input, ...rest }) => (
  <TextField
    {...rest}
    {...input}
    error={touched && Boolean(error)}
  />
);

The props/attribute order must be same as above.

We will make a patch for this issue soon.

Hope this can help. Fell free if you have any further queries.

Regards.

Hi, I’m interested to purchase this template, but I’d like to know first, is this theme have a built version / html for rapid demo purpose? Thanks

Hi saptonoar,

Thanks for visiting our portfolio.

This template is use react boilerplate and not support ssr and static site built.

Regards.

Hi there. I see you have a widget, “my task” a to-do function > Personal Dashboard view. How do I actually create the task to do?

Hi jeremysoca,

Thanks for purchasing.

For task widget it’s a static view, you can add more items in app/components/Widget/TaskWidget.js by add the array manually.

Feel free if you have any further queries.

Regards.

Hello I have tried working with the starter file but it’s just hard because the structures are not the same and I am struggling to achieve the same pages as is in the pro file. Please do you have documentation on how to change the landing page and clean up the other pages that I don’t need, or how exactly do I go about that?

Then what is the easy way to access you? Do we have to wait over 20hrs?

Hi Muyakane,

Thanks for purchasing.

To modify the landing page components are in /app/components/LandingPage/ and the container /app/containers/LandingPage/HomePage.js

You can clean up the rest component/container folders in /app/components/ /app/containers/ except:

- app/components/LandingPage/ - app/components/CardPaper/ - app/components/Sidebar/

Our response time can be up to 12hours – 1 day.

Regards.

Is it possible to use dandelion with an entire backend in PHP/MySQL?

Hi waquinocreativeweb,

Thanks for visiting our portfolio.

This template use react.js and node.js. The common way to integrate with php/mysql is by use separated server for backend API (php/mysql) and frontend-side (react, node.js).

Regards.

Hello, I am using your template and I am wondering if there is a chance to use a Redux configuration of mine instead of the one you have set up on the template. If so, can you please provide me some assistance on how to do it? Thanks in advance.

Hi wm34,

Thanks for purchasing.

Basically all redux structure put the reducers in store. So it should be ok as long as the reducer has a correct path to import.

Here’s dandelion redux diagram structure. https://ilhammeidi.github.io/dandelion-docs/#code_basic > Template Architecture > slide 4

Feel free if you have any further queries.

Regards.

Hi , so i’m stuck with changing DateTimePicker language to FR using MomentUtils. //import import MomentUtils from '@date-io/moment'; import moment from "moment"; import "moment/locale/fr"; moment.locale("fr"); const DateTimePickerRow = props => { const { showErrorsInline, dispatch, input: {onChange, value}, meta: {touched, error}, ...other } = props; /**/ const showError = showErrorsInline || touched; return ( <MuiPickersUtilsProvider utils={MomentUtils} moment={moment} locale="fr"> <DateTimePicker error={!!(showError && error)} helperText={showError && error} value={value || new Date()} onChange={onChange} ampm={false} label="DateTimePicker" {...other} /> </MuiPickersUtilsProvider> ); };

I try to fix that with date-fns package by using this sample https://material-ui-pickers.dev/localization/date-fns but i got this error : rangeError: Format string contains an unescaped latin alphabet character `n`.

By the way i’m using Version 1.5.0 , i know that you have already fix this issue in Version 1.6.0 but how can i update the template without losing my project ?

Best regards, Malik

Hi Malik,

Please try to use @date-io/date-fns version 1.3.11. For localization setting http://dandelion.ux-maestro.com/app/forms/date-time-picker Then click view source.

Hope this can help.

Regards.

Hi,

so @date-io/date-fns version 1.3.11 was the solution.

Again you save me, thank you so much :D.

Best regards, Malik

My pleasure and youre welcome

Hi, just a quick question. Can this be used with Gatsbyjs please? Thanks!

Hi Laxmin,

Thanks for purchasing.

Yes you can use with Gatsby. You can take out the react components and attach to gatsby project.

Here’s the main components: Components: app/components Containers: app/containers Styling: app/styles. For alias config (dan-components, dan-api, etc): /internals/webpack/webpack.base.babel.js

Feel free if you have any further queries.

Regards.

We are experiencing images path issue when we create build of project, These paths are working during the development but in the build these paths are not working. Images are stored in the public directory (Even the images that are previously came with template are not showing up in build). Please help on this issue. Thanks!

Happy New Year! Jenny

Hi Jenny,

May we know what the images url that are previously came with template are not showing up in build? It will make us easier to investigate.

Some possibility about this issue mostly from server(build/production) there are:

- if the build run in linux system, please make sure the file name case sensitive

- Public folder is blocked by CORS. https://serverpilot.io/docs/how-to-enable-cross-origin-resource-sharing-cors/

- Public folder is blocked by HTTPS. https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content

We suggest to use CDN to store dynamic assets(images) if your production use https.

Hope this can help.

Regards.

The images/patterns around “Contact us” are different from the template. (http://dandelion.ux-maestro.com:3000/) I replied to your response with attachment. Please take a look. We would like to have the original template design on our app. Thanks!

Hi jennywang2k16,

We didn’t get your reply with attachment. I think what you mean is this public/assets/bgFooterLight.svg and public/assets/bgFooterDark.svg Those images are exist, but when you open it directly via browser it seems invisible, because the fill color is white (dark-grey for dark mode)

Regards.

Hi, I would like to use our APIs for CRUD. I can’t see any API example, using Redux-Saga for CRUD operations.

Can you advise with a sample example?

Hi ervishu83,

Thanks for purchasing.

Here’s the sample project redux-saga for CRUD https://github.com/r-park/todo-redux-saga. And for the redux-saga configuration you follow this project: https://github.com/ilhammeidi/enlite-starter/tree/master/app/redux It has same structure as Dandelion Pro.

Feel free if you have any further queries..

Kind regards.

Can you provide me the complete sketch files? otherwise can i have the exact gradient codes used for the different color schemes, when changing in dark mode.

Hi javedikram,

For sketch files we only have 2 Landing Pages, Card, Table and Form components, which is included in this item. And about gradient color combination you can see in:

- dark: /app/api/palette/darkPalette.js - light: /app/api/palette/lightPalette.js

The color scheme itself base on material-ui https://material-ui.com/customization/color/#color

Feel free if you have any further queries.

Regards.

Hi There,

I would like to know if we can disable redux in theme.

Hi ervishu83,

Thanks for purchasing.

To disable redux, first you have to find out where the components or container use it. You can search in whole project with keyword ‘mapStateToProps’.

After that just change all the states from reducer to local state and actions to local method.

Feel free if you have any further queries.

Kind regards.

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey