Questions tagged [react-admin]

Introducing A cutting-edge Framework for developing responsive admin apps that operate directly in the browser, leveraging the power of REST and GraphQL APIs. Featuring advanced features such as ES6 compatibility, React integration, and a stylish Material Design aesthetic. Formerly known as admin-on-rest, this software is now freely available and continuously supported by the dedicated team at marmelab.

Achieve a two-column layout in react-admin by leveraging the fullWidth property in SimpleForm or TabbedForm

My goal is to create an edit form with two columns. While I know that it can be done using a custom form, I am curious if there is a simpler way to achieve this using the existing SimpleForm or TabbedForm components. I have managed to display the data in ...

What is the correct way to reuse sub-dependencies using NPM?

This inquiry primarily centers around the usage of react-admin, as indicated by the tags, but could also be applicable in other scenarios. In our case, we are utilizing react-admin which relies on @material-ui/core. This grants us the ability to incorpora ...

React-admin CheckboxGroupInput automatically selects certain checkboxes upon loading

How can I set some checkboxes to be checked by default? <CheckboxGroupInput source="my_junction_table" choices={choices} optionText={<KioskCheckbox />} initialValue={[{ id: 4, checked: true }]} // no effect defaultValue={[{ id: 4, check ...

What are some ways to delay the response time of my Express server in order to accommodate the functionality of the react-admin getOne() method?

I've implemented VetCreate and VetEdit functions to handle creating and editing records in my application. The issue I'm facing is that although the creation response is successful, the new record's ID is not populated when trying to fetch it. Even though ...

Keeping calculated values in the React state can cause issues

In an attempt to develop a component resembling a transferlist, I have simplified the process substantially for this particular issue. Consider the following example: the react-admin component receives two inputs - a subset of selected items record[source ...

Limit the character count for form fields in React Admin

Is it possible to restrict the number of characters a user can input into a field in a SimpleForm component within React-Admin? According to the documentation, React-Admin does not have a built-in feature for limiting character input. Although there is va ...

Apply the styles attribute to a Card component within the Create View

Within the Create view using a TabbedForm, an autocomplete component is located at the bottom. The dropdown list is currently hidden due to the parent Card component having its overflow property set to hidden. Is there a method to apply a custom style pr ...

What is the fastest method for applying a Material-UI theme?

Exploring the custom theming possibilities in react-admin has been fascinating to me. Is there a way in react-admin to easily incorporate a custom theme without manually applying it component by component? I'm thinking along the lines of Material Ui premi ...

React-Admin: The <MenuItemLink> component is consistently displayed as 'active' in the interface

I am currently working with the react-admin framework. I recently swapped out the <DashboardMenuItem> component for <MenuItemLink> (overview). Unfortunately, the "overview" tab always appears as if it is active. Does anyone have an idea on h ...

A custom-designed Material UI TextField featuring a specific date and time picker capable of displaying seconds

Currently, I am facing an issue while using react-admin and trying to modify the date and time, specifically including seconds with the help of DateTimeInput. Unfortunately, my attempts have been unsuccessful so far. Here is what I have tried: Approach 1: ...

I kept encountering errors when trying to implement a confirm dialog before deleting

How can I implement a confirmation message in react-admin for actions like deletion? I attempted to use the <DeleteButton /> with undoable={false} option and also explored the <DeleteWithConfirmButton /> component, but encountered errors with ...

Expanding Row Feature in React-Admin Data Grid (Version 3.19)

I'm currently exploring how to implement react-admin 3.19 using the customized datagrid example. I'm facing some difficulties getting the expand feature to function properly. In the code snippet below, I manually added an expand button but am st ...

Tips for customizing React-admin MuiTableCell and other Mui components

I'm currently developing an Admin panel using React-Admin, but I've encountered some difficulties with customizing the table grid and other components. Specifically, I'm looking to adjust the padding of the MuiTableCell element. Here's how it looks at the ...

Tips for customizing the appearance of the Alert Dialog in React-admin?

React-admin alert dialog example I'm currently working on a React-admin project and I am looking to customize the alert dialog that displays errors, warnings, and success messages on the page. Specifically, I want to apply CSS styles like z-index and back ...

Ways to customize the TextInput component in React-Admin

I am facing a challenge with overriding specific fields in my custom theme. It seems that setting the custom theme also overrides other fields unintentionally. I attempted to use useStyles to resolve this issue, but unfortunately, it did not work as expec ...

Create a dynamic AppBar Toolbar in React Admin that changes based on the current page

Recently delving into the world of React, I've been facing some challenges when it comes to loading IconButtons onto the toolBar of an AppBar (from Material UI). For instance, I'm looking to have two specific IconButtons displayed on pageA and different o ...

Implement the newest @material-ui/icons in react-admin seamlessly without any clashes

Is there a recommended approach for incorporating new icons from the latest version of @material-ui/icons into react-admin? I am interested in using icons that are not available in the bundled 1.0.0 version included with ra-ui-materialui. Upon attempting ...

Error: The dataProvider function toJSON is not recognized

import restProvider from 'ra-data-simple-rest' const dataProvider= process.env.REACT_APP_API+'/api/link' <Admin dataProvider={restProvider(dataProvider) }> <Resource name='endpoint' options={{label:'MyLab ...

Having trouble adding a custom font with override to MuiCssBaseline in react-admin, the @global @font-face seems

I am attempting to integrate the NotoSansSC-Regular.otf font from Google into my react-admin application as the default font for simplified Chinese text. I have managed to make it work by including the fonts in the root HTML file using CSS, like this: ty ...

Create a personalized message for the DeleteWithConfirmButton component in react-admin

Is there a way to send my message to DeleteWithConfirmButton only for one specific instance, not globally? If I want to change the message globally, I can do it like this: const messages = { en: { ra: { message: { delete_contents: 'HEL ...

What is preventing MenuItemLink from being displayed in the menu?

I have created a unique page for users to purchase subscriptions, but I am having trouble accessing that page because the button is not appearing in the menu. I followed the steps outlined in the official guide, but only the dashboard and resources buttons ...

Steps for building a react-admin app using the tutorial

Currently, I am using Ubuntu and attempting to develop a react-admin application. The command I executed was "yarn create react-admin test-admin", selecting JSON Server as the data provider and None as the authentication provider. I did not add any resour ...

Is there any way to deactivate the saved query in react-admin without having to develop a new component?

The latest version of react-admin, version 4, introduced a new feature that allows saving filters. I'm curious about how to disable this functionality without having to create an additional filter button. https://i.stack.imgur.com/uTrUe.gif ...

How can I transform <TabbedShowLayout> into an editable interface?

Our project requires us to implement an edit view instead of a show view in a tabbed show layout, similar to the image below. https://i.stack.imgur.com/sJM52.png The react-admin documentation clearly states that The Show view displays a record fetched fro ...

How to integrate the BackButton component into a React-admin application

I am looking to add a <BackButton /> feature in my use of react-admin. For instance, when viewing a show page for a resource, I want to be able to navigate back to the list page easily. Can someone provide me with guidance on how to achieve this? I ...

Ensure that the MUI icon color is set accurately

I created a functional component to set default values for react-admin's BooleanField. Here is the code: import ClearIcon from '@mui/icons-material/Clear' import DoneIcon from '@mui/icons-material/Done' import get from 'lodash/get' import { ...

Is it feasible to utilize the resulting value from a ReferenceField externally?

const MyComponent = (props) => { //how can I access the user.fullName here? //console.log(user.fullName) return ( <ReferenceField reference="users" source="userId" record={props.record} ...

Using conditional rendering to set an icon in a ChipField component in React Admin

One feature in my React Admin App is a Datagrid with a ChipField displaying a text property. I want to enhance this by adding an icon to the ChipField using the icon prop, which should change based on the text value. This is my current approach: expor ...

What causes the "Invalid hook call" error to occur when the useQuery function is invoked?

Encountering an issue while trying to use the useQuery() function from react-admin within a custom component. Despite the clear error message, I'm struggling to determine the right course of action. Visiting the provided website and following the inst ...

Expand all rows by default in React-admin Datagrid: simplifying user experience

I am using a react-admin (3.14.1) List component with a Datagrid, where each row can be expanded. Is there a way to expand all rows by default? Or is it possible to programmatically expand a specific row? I have looked into the Datagrid code in node_mod ...

"Enhance your admin dashboard with the powerful combination of React

I am currently developing an application using React with Nextjs. I am keen on utilizing react-admin for my Back Office. I experimented with a test example and it worked perfectly with react. However, when attempting to integrate it into Next.js, I encoun ...

Tips for planning a showcase arrangement in React Admin with the help of a Material UI Grid

In my new React-Admin project, I have set up several Show views. Instead of having the fields in a single column layout, I want to use Material UI's Grid component to create a more efficient and user-friendly arrangement. However, when I try to implem ...

The BooleanField component in V4 no longer supports the use of Mui Icons

In my React-Admin v3 project, I had a functional component that looked like this: import ClearIcon from '@mui/icons-material/Clear' import DoneIcon from '@mui/icons-material/Done' import get from 'lodash/get' import { BooleanF ...