Hi vinayk076,

Thanks for purchasing.

Please try to use http-proxy-middleware. Example in server/index.js

const proxy = require('http-proxy-middleware');
const apiProxy = proxy('/api', { target: 'http://localhost:3000' });
app.use('/api', apiProxy);

Here’s the docs for http-proxy-middleware. https://github.com/chimurai/http-proxy-middleware

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

Kind regards

Hi adriano_soares,

1. To add more field you can insert form input in <CrudTableForm> then add new table columns in anchorTable (/app/containers/Tables/demos/sampleData.js). And for grouping columns It need to modify the components directly in app/components/Tables/tableParts/TableHeader.js But maybe will be complex, so please take a look this plugin https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/MultiRowHeadersBands/React/Light/

2. This case need one more attribute. You can add in crudTbFrmReducer.js in initialState.dataInit In example for error status:

dataInit: List([
    {
     // rest code
     error: false
    }
  ]),

Then once submit data case `${branch}/${SUBMIT_DATA}`: and

if (invalidData) {
  mutableState
          .update('dataTable', dataTable => dataTable
            .setIn([index, 'error'], true)
          )
}

For styling you can use error attribute from dataTable reducer implement in component /app/components/Tables/tableParts/RowReadOnly.js

For complex table and more flexibility customization, I recommend to use devextreme and devextreme-react. It free for Non-Commercial project.

https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/DataValidation/React/Light/

Hope this can help.

Regards.

Hello Ilhammeidi,

The crud I’m working on is based on /app/containers/Tables/demos/EditableCellFrmDemo.js; I have a user record with the redux saga framework working, the listing is ok, I just display the most important attributes, so in that sense the crudtableForm is serving me well, my question is regarding the form that is opened when clicking “Add” or “Edit” a record, this is where I I would like to put two inputs per line and increase the modal size to, for example, 80% of the screen when the user clicks the “expand” button.

Example: I have the fields first name, last name, date of birth and email, in the form that is displayed I want to display two fields per line, with first and last names in the first line and birth date and email in the second line.

If it is not possible using CrudTableForm, I would like you to tell me which components I can use for:

- List backend data with action buttons - What components can I use to build a form with multiple fields.

Regards

Hi adriano_soares,

To add 2 input/field per line You can use <Grid> component http://dandelion.ux-maestro.com/app/layouts/grid

<div>
  <Grid container>
    <Grid item xs={6}>
      <Field
              name="text" 
              component={TextFieldRedux}
              placeholder="First Name" 
            />
      </Grid>
      <Grid item xs={6}>
       <Field
              name="text" 
              component={TextFieldRedux}
              placeholder="LastName" 
            />
     </Grid>
   </Grid>
</div>

And for Popup-Form, the component and stye are in app/components/Panel/ To increase size to 80% in panel-jss.js line: 26 floatingForm

floatingForm: {
  width: 80%,
 // ...rest code
}

Hope this can help.

Regards.

Hi puneeta2,

The full version pages and components like live demo only available for Dandelion Pro version. And here’s the license detail https://themeforest.net/licenses/standard

Regards.

Thank you. It’s only react.js version. For react native, I just start learning. I’m not sure will make it in future.

now it’s working can remove this post

how to add additional npm packages as while adding exisisting code stop working is there any procedure for the same

It’s working thanks bro needed to remove cache great theme btw

Your’e welcome, and thanks for the appreciation.

Hi thevikas,

Thanks for purchasing.

To make new API configuration is in server: /server/index.js for example:

app.use('/api/newapi', (req, res) => {
  res.json({
    records: [
      { source: rawdocs(req.query) }
    ]
  });
});

If you have API from another system or platform, you can skip the step above. Then you can fetch the data from API in components or container

fetchUsers() {
  // Where we're fetching data from
  fetch(`yourapi-url/data`)
    // We get the API response and receive data in JSON format...
    .then(response => response.json())
    // ...then we update the users state
    .then(data =>
      this.setState({
        data,
        isLoading: false,
      })
    )
    // Catch any errors we hit and update the app
    .catch(error => this.setState({ error, isLoading: false }));
}

Mostly app use this method, because commonly setting is server api and front end are separated.

Feel free if you have any further queries.

Regards.

Hi vishsid73,

Thanks for visiting my portfolio.

By default this template use node server and cannot build as static site. To build as static site need to be migrated to another framework like next.js or CRA. Feel free to try with starter-project (please check in item description to get it) and move the components, containers, reducers and styles to another environment project.

Regards.

Hi Kris-I,

The breadcrumbs path designed to get value from page url. To customize it, I suggest can create new breadcrumbs component by copy from app / components / BreadCrumb / BreadCrumb.js Then change the location props to the string or anything you need, or even add more props.

Hope this can help.

Regards.

Hi jobmanagement.

This issue about offline-access feature. So after deploy, please close the browser tab and re-open again, the code should be updated. If not please check in your htaccess (by default is in build/.htaccess). Please make sure to do not cache the sw.js

<IfModule mod_headers.c>
  # Do not cache sw.js, required for offline-first updates.
  <FilesMatch "sw\.js$">
    Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform" 
    Header set Pragma "no-cache" 
  </FilesMatch>
</IfModule>

You can also disable the offline cache. Please follow this https://github.com/react-boilerplate/react-boilerplate/blob/master/docs/general/remove.md

And here’s article about how service worker works https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps

Regards.

Hi team, Unfortunately none of your given solutions worked. And this now has become a major issue for our company as we used your theme for one of our projects which has more than 200 users. Each time we release an update majority of our users face this issue. You used web-pack instead of “Create-React- App”. We really need to have a Zoom call with you and your team to fix this issue in your theme, otherwise our client might sue us. Please help us here…....

Hi jobmanagement,

This case If the code already delivered to the users. Please inspect element in sample user and check like this https://developers.google.com/web/fundamentals/primers/service-workers/images/waiting.png

Once any update in server the yellow-dot (next update) will waiting. Try to close the tab or browser, then open the web again. Normally the yellow-dot state should be replaces the green-dot as the newest update.

If not, it also can be hardcoded in build/sw.js.

- First don’t stop your server. Just keep running.

- Find self.addEventListener('install', function (event) And add self.skipWaiting(); and disable the rest code.

self.addEventListener('install', function (event) {
    console.log('[SW]:', 'Install event');
    self.skipWaiting();
    //    var installing = undefined;
    //
    //    if (strategy === 'changed') {
    //      installing = cacheChanged('main');
    //    } else {
    //      installing = cacheAssets('main');
    //    }
    //
    //    event.waitUntil(installing);
  });

- Check your client browser again in service-worker menu, and also need attention for the updated date-time.

- If still not working you can restart the server then reset the changes sw.js file, and continue follow above step until last update activated.

If your website still not deliver the updates, maybe it because every built result has a different hash code which is called in index.html. So you can try to uncache the index.html only. Here’s an article to guide by using nginx https://www.zeolearn.com/magazine/setting-caching-headers-for-a-spa-in-nginx-cache

FYI: I don’t have team and working alone. And sorry I’m not available for call, so for further queries please reply or message via my profile.

Regards.

Hi, Just try your project and it works https://drive.google.com/file/d/1gqQQRXOSAdCIDPi7F8pocFaGVIoxlioH/view?usp=sharing

Maybe your previous prod build still cached. The problem isn’t form the code, please try in incognito/private tab, different browser or even different machine.

Regards.

Make me crazy. I tried Incognito table from chrom, Edge, Firefox same problem, look the result https://drive.google.com/file/d/1TWtFKtwk7Dc3k1J2R-R7vedXKWzJslt4/view?usp=sharing

I found the problem there was routing problem <Route path=”/app/pages/ customers” component={Customers} /> instead of <Route path=”/app/customers” component={Customers} />

Hi supunbh,

Thanks for purchasing and the reported issue.

About chart container issue, to fix it in <ResponsiveContainer />please add attribute minWidth={500} width="100%" height="100%" Example for localhost:3000/app/crm-dashboard in /app/components/Widget/SalesChartWidget.js

  <ResponsiveContainer minWidth={500} width="100%" height="100%">
{/* rest code */}
</ResponsiveContainer>

We will update this for next update.

And for DevTools, you can ignore this because that a warning sourceMap from node_modules. This warning can be hidden in DevTools setting (Click gear icon) then in Preferences tab uncheck “Enable JavaScript source maps”

Feel free if you have nay further queries.

Regards.

Hi breinergonza,

Thanks for purchasing and the reported issue.

You can use the value directly without state:

const submitForm = values => {
    setTimeout(() => {
      console.log(`You submitted:\n\n${values}`);
    }, 500); // simulate server latency
  };

And use the result Map { "email": "johndoe@mail.com", "password": "12345678", "remember": false } as api parameter. Here’s the example API integration https://github.com/cornflourblue/react-hooks-redux-registration-login-example/blob/master/src/_services/user.service.js

To map form values, it uses redux-form plugin. Basically it need Field component and custom Material UI Input from /app/components/Forms/ReduxFormMUI.js Put the attribute name in every Field component and once submit the result will generated like above JSON format.

Here’s detail about redux-form setup and usage https://redux-form.com/8.3.0/examples/simple/

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

Regards.

Hi breinergonza,

Thanks for purchasing and the reported issue.

You can use the value directly without state:

const submitForm = values => {
    setTimeout(() => {
      console.log(`You submitted:\n\n${values}`);
    }, 500); // simulate server latency
  };

And use the result Map { "email": "johndoe@mail.com", "password": "12345678", "remember": false } as api parameter. Here’s the example API integration https://github.com/cornflourblue/react-hooks-redux-registration-login-example/blob/master/src/_services/user.service.js

To map form values, it uses redux-form plugin. Basically it need Field component and custom Material UI Input from /app/components/Forms/ReduxFormMUI.js Put the attribute name in every Field component and once submit the result will generated like above JSON format.

Here’s detail about redux-form setup and usage https://redux-form.com/8.3.0/examples/simple/

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

Regards.

Hi vinayk076,

Thanks for purchasing.

To solver In package.json change the license from “Envato Regular License” to “ISC” and NPM init again.

Feel free if you have any further queries.

Regards.

Hi Kris-I,

Thanks for purchasing.

Yes it’s possible. You need to remove the rest of containers, routes and menu link in:

- Containers: /app/containers/Pages/ : Routes: app/containers/App/Application.js - Menu link: app/api/ui/menu.js

Feel free if you have any further queries.

Regards.

Hello,

To resume you say “yes it’s possible” but “no do it yourself”. I will try again for the last time.

Regards,

Hi Kris-I

Sorry for the misunderstanding, maybe this one you mean https://github.com/ilhammeidi/dandelion-starter/tree/blank-page

Regards

Hi Envato_2021,

Thanks for purchasing.

For user profile page this template uses static data form app\api\dummy\dummyContents.js. It’s created by hard coded.

Feel free if you have any further queries.

Regards.

Hi Kris-I,

Thanks for visiting our portfolio and the appreciation.

All main components of this template already implement Hooks, but some demo for UI components still using Class. Mostly page demo can be seen the source by click show-code button.

Feel free to try the Sample Project, please check in description for github link.

Regards.

Hi,

Thanks for visiting our portfolio.

This template support not including installation and customization.

For more detail https://themeforest.net/item_support/what_is_item_support/22890261?url_name=dandelion-pro-react-admin-dashboard-template

Regards.

how much extra would you charge to install, on firebase backend

Hi kburkay,

Thanks for purchasing.

For react ionicons we recommend to use v2.1.6, because version 3+ has different API with this template. https://www.npmjs.com/package/react-ionicons/v/2.1.6

For the latest iocnicons library, please You can use css font. In app/index.html the ionicons has been loaded, but you can change the version. Then for the usage please check here https://ionicons.com/v4/usage/ > “Using the Font Icon” section.

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

Regards.

hi, it is ok to use v2 but “ion-heart” or any other available icons are not shown in the menu. they suppose to be there.

Hi kburkay,

The react-ionicons has two type md-icon and ios-icon. For heart icon you can use “md-heart”, “ios-heart”, or “ios-heart-outline”

You can see reference from https://ionicons.com/v2/ and ionicons code /node_modules/react-ionicons/src/icons.js

The android icon start with “md-[icon-name]” and ios start with “ios-[icon-name]” For example usage: - For android : ion-android-cart change to md-cart - For ios: ion-ios-cart-outline change to ios-cart-outline

We still migrating to css font-icons, because more flexible. And will update soon.

Hope this can help.

Regards.