---
layout: default
title: "Advanced Tutorials"
---

# Advanced Tutorials

## Creating a Record Related to the Current One

This tutorial explains how to add a button on a show or edit page to create a new resource related to the one displayed.

![Screencast](https://marmelab.com/images/blog/react-admin/react-admin-tutorials-form-for-related-records.gif)

* [Article](https://marmelab.com/blog/2018/07/09/react-admin-tutorials-form-for-related-records.html)
* [Codesandbox](https://codesandbox.io/s/2393m2k5rj)

## Custom Forms and UI for related records

This tutorial explains how to have a create, show or edit view of a referenced resource inside a modal or a sliding side panel.

![Screencast](https://marmelab.com/images/blog/react-admin/react-admin-tutorials-custom-forms-related-records-quick-preview.gif)

* [Article](https://marmelab.com/blog/2018/08/27/react-admin-tutorials-custom-forms-related-records.html)
* [Codesandbox](https://codesandbox.io/s/ypp9ljxqlj)

## Build a Timeline as a replacement for a List component

This tutorial shows how to use pure react to implement a custom component replacing react-admin default List.

![Screencast](https://marmelab.com/storybook_App5-d9b4cf0e7faf3ed208c102f8b2334409.gif)

* [Article](https://marmelab.com/blog/2019/01/17/react-timeline.html)
* [Repository](https://github.com/marmelab/timeline-react-admin)

## Creating and Editing a Record From the List Page

This tutorial shows how to display Creation and Edition forms in a drawer or a dialog from the List page.

![Screencast](https://marmelab.com/end-result-07b25da5494055c4306dd7e7a48fd010.gif)

* [Article](https://marmelab.com/blog/2019/02/07/react-admin-advanced-recipes-creating-and-editing-a-record-from-the-list-page.html)
* [Codesandbox](https://codesandbox.io/s/lrm6kl00nl)

## Add a User Profile Page

This tutorial explains how to create a profile page based on an `<Edit>` component, and accessible as a standalone page.

![Screencast](https://marmelab.com/end_result-668056e9d8273ff5ce75dfc641151a90.gif)

* [Article](https://marmelab.com/blog/2019/03/07/react-admin-advanced-recipes-user-profile.html)
* [Codesandbox](https://codesandbox.io/s/o1jmj4lwv9)

## Supplying your own Defaults to React Admin

This article shows how you can customize many parts of the framework without repeating yourself.

![Screencast](https://marmelab.com/react-admin-edit-defaults-54d42faced9043f7933df212cbda0f1b.gif)

* [Article](https://marmelab.com/blog/2019/03/27/supplying-your-own-defaults-to-react-admin.html)
* [Codesandbox](https://codesandbox.io/s/qzxx4mjl59)

## OpenID Connect Authentication with React Admin

![OpenID Connect on React Admin with a button "Login With Google"](./img/openid-connect-example.png)

* [Live Example](https://marmelab.com/ra-example-oauth)
* [Code Repository](https://github.com/marmelab/ra-example-oauth)