{"id":27807,"date":"2022-03-23T22:37:52","date_gmt":"2022-03-23T22:37:52","guid":{"rendered":"http:\/\/Creating-Custom-User-Reports-with-Redwood"},"modified":"2022-03-23T22:37:52","modified_gmt":"2022-03-23T22:37:52","slug":"creating-custom-user-reports-with-redwood","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/","title":{"rendered":"Creating Custom User Reports"},"content":{"rendered":"

Sometimes you need to generate reports that show users certain metrics around what they do in an app. A report can include anything from images to specific user data and they can give your users meaningful ways to monitor their behavior.<\/p>\n

That\u2019s why we\u2019re going to make some custom user reports with Redwood. This little app will let users see their information in a table and then print it to a PDF if they need it offline. They\u2019ll get a product list with quantities and prices included with pictures. We\u2019ll be hosting our images on Cloudinary so we don\u2019t have to worry about keeping them in a local directory.<\/p>\n

Setting up the Redwood app<\/h2>\n

In a terminal, run the following command to create a new Redwood app.<\/p>\n

yarn create redwood-app user-reports\n<\/code><\/span><\/pre>\n
This will generate all of the files we need to create a robust front-end and back-end connected to a database. The back-end is contained in the api<\/code> folder and the front-end is in the web<\/code> folder.<\/p>\n
We\u2019ll start by making the model for this app. It\u2019s usually a good idea to have the business model defined for an app before jumping into very much code.<\/p>\n
Setting up the database model<\/h2>\n
The first thing we\u2019ll do is update the connection string to our database instance. We\u2019re using a local Postgres instance to handle our operations. So we need to update the .env<\/code> file.<\/p>\n
You can uncomment the DATABASE_URL<\/code> line and update it to the connection string for your instance. Here\u2019s an example of what one might look like.<\/p>\n
DATABASE_URL=postgres:\/\/postgres:admin@localhost:5432\/user_reports<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
If you need to set up a local instance of Postgres to get your connection string, check out their docs<\/a>.<\/p>\n
Adding models<\/h3>\n
Next, go to api > db<\/code> and open up the schema.prisma<\/code> file. We need to update the provider<\/code> to postgresql<\/code> since that\u2019s the database we\u2019re working with. Now we can delete the example model and replace it with our own.<\/p>\n
model User {\n  id       Int       @id @default<\/span>(autoincrement())\n  email    String<\/span>    @unique\n  name     String<\/span>\n  products Product[]\n}\n\nmodel Product {\n  id       Int    @id @default<\/span>(autoincrement())\n  name     String<\/span>\n  imageUrl String<\/span>\n  price    Float\n  quantity Int\n  User     User?  @relation(fields: [userId], references<\/span>: [id])\n  userId   Int?\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
There is one foreign key relationship between these two models. One user can have multiple products associated with it. That\u2019s why we have the userId<\/code> and User<\/code> on the Product<\/code> table. It\u2019s the reference to the User<\/code> table.<\/p>\n
With the models in place, we can run a database migration.<\/p>\n
yarn rw prisma migrate dev\n<\/code><\/span><\/pre>\n
Seeding your database<\/h3>\n
When you have relations in your models, it\u2019s usually a good idea to add default values to your database to prevent any errors in the app when you start it. You\u2019ll see a lot of production database seed data like dropdown options, user roles, or initial users.<\/p>\n
In the seed.js<\/code> file, in api > db<\/code>, you can delete all of the commented out code in the main<\/code> function because we\u2019ll be adding our own calls.<\/p>\n
await<\/span> db<\/span>.user<\/span>.create<\/span>({\n  data<\/span>: { name: 'Mochi'<\/span>, email: 'mochi@test.com'<\/span> },\n})\n\nawait<\/span> db<\/span>.product<\/span>.create<\/span>({\n  data<\/span>: {\n    name: 'Jugs'<\/span>,\n    imageUrl: 'example.com\/jhon.png'<\/span>,\n    price: 7.88<\/span>,\n    quality: 25<\/span>,\n    userId: 1<\/span>,\n  },\n})\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Now run this command to seed the database.<\/p>\n
yarn rw prisma db seed\n<\/code><\/span><\/pre>\n
With the database ready to go, we can move to the back-end and front-end.<\/p>\n
Generating the GraphQL and React code with Redwood<\/h2>\n
Redwood does a lot of work for us once the model has been migrated. We can get the CRUD for both the front-end and back-end with these two commands.<\/p>\n
yarn rw g scaffold user\nyarn rw g scaffold product\n<\/code><\/span><\/pre>\n
These two let us add users and products in this app. That way we can add new products to different users and create those custom reports for them.<\/p>\n
You\u2019ll find all of the generated code for the GraphQL server in the api > src<\/code> folder. The types and resolvers are in the graphql<\/code> and services<\/code> folders respectively. All of the front-end code will be in web > src<\/code>. There are quite a few new files and folders for the front-end, so we\u2019re going to focus on just one.<\/p>\n
To see what these new pages look like, go ahead and run the app with:<\/p>\n
yarn rw dev\n<\/code><\/span><\/pre>\n
Then go to localhost:8910\/users<\/code> in the browser. You should see something like this.<\/p>\n
\"users<\/p>\n
If you go to localhost:8910\/products<\/code>, you\u2019ll see something like this.<\/p>\n
\"products<\/p>\n
Add some pictures to Cloudinary<\/h2>\n
Since we\u2019re going to host our images on Cloudinary, we need to upload a few images. To that, create<\/a> or login<\/a> to your Cloudinary account.<\/p>\n
When you log in, you\u2019ll be taken to the dashboard. At the top, navigate to the \u201cMedia Library\u201d. This is where you can upload images and videos. It\u2019ll look similar to this.<\/p>\n
\"Cloudinary<\/p>\n
Use the \u201cUpload\u201d button to upload some product images or any other images you like. None of the images I\u2019ll be using are for any type of product.<\/p>\n
Making the report<\/h2>\n
In web > src > components > User > Users<\/code> folder, we\u2019ll open the Users.js<\/code> file because this is where we\u2019ll add the report and a button that will download it for users.<\/p>\n
First thing we need to do is add the react-pdf<\/code> package to the web<\/code> directory. So in the web<\/code> directory in your terminal, run:<\/p>\n
yarn<\/span> add<\/span> @react-pdf<\/span>\/renderer\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Then we\u2019ll need to import that some components from the package at the top of Users.js<\/code>, like this:<\/p>\n
import<\/span> {\n  Page,\n  Image,\n  Text,\n  View,\n  Document,\n  PDFDownloadLink,\n  StyleSheet,\n} from<\/span> '@react-pdf\/renderer'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now that we have all of the components imported, we\u2019ll start by adding the styles for the report pages. So right above the UsersList<\/code> component, add this:<\/p>\n
const<\/span> styles = StyleSheet.create({\n  page<\/span>: {\n    flexDirection<\/span>: 'row'<\/span>,\n    backgroundColor<\/span>: '#E4E4E4'<\/span>,\n  },\n  section<\/span>: {\n    margin<\/span>: 10<\/span>,\n    padding<\/span>: 10<\/span>,\n    flexGrow<\/span>: 1<\/span>,\n  },\n})\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
It won\u2019t be the fanciest looking report, but feel free to play with the styles as you see fit. Now we should make the actual report. For now, we\u2019ll just show the user\u2019s name. Right below the styles we just created, add the following:<\/p>\n
const<\/span> UserReport = ({ user }<\/span>) =><\/span> (\n  <Document<\/span>><\/span>\n    <Page<\/span> size<\/span>=\"A4\"<\/span> style<\/span>={styles.page}<\/span>><\/span>\n      <View<\/span> style<\/span>={styles.section}<\/span>><\/span>\n        <Text<\/span>><\/span>Name: {user.name}<\/Text<\/span>><\/span>\n      <\/View<\/span>><\/span>\n    <\/Page<\/span>><\/span>\n  <\/Document<\/span>><\/span><\/span>\n)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This makes the content that will show in the pdf. We\u2019ll expand this in a bit to return all of the product info associated with a user. First, let\u2019s go ahead and make our download button.<\/p>\n
Download the report with a button click<\/h3>\n
People with access to this table should be able to download a pdf for any of the users on the table. So we\u2019re going to add a \u201cDownload\u201d button right after the \u201cDelete\u201d button in the table row for each user.<\/p>\n
To do that, add the following code below the last <a><\/code> element in the UsersList<\/code> component.<\/p>\n
<PDFDownloadLink\n  document={<UserReport user={user} \/>}\n  fileName={`user_report_${user.id}`}\n>\n  {({ blob, url, loading, error }) =>\n    loading ? 'Generating report...'<\/span> : 'Download'<\/span>\n  }\n<\/PDFDownloadLink>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
We\u2019re using the PDFDownloadLink<\/code> component to handle the actual download. We specify the document component we want to use which is UserReport<\/code> and we\u2019re passing in the user data for that row. Then we handle the pdf\u2019s download state inside the component so that we know if the pdf is still being generated.<\/p>\n
Now when you run the project in the browser, you\u2019ll see a new button on the row.<\/p>\n
\"added<\/p>\n
Add a new resolver to get user products<\/h3>\n
Now that we have the front-end downloading a PDF, we need to create the resolver that will return the products associated with a user. Open users.js<\/code> in api > src > services > users<\/code>. This is where we\u2019ll add the query to get a user\u2019s products. Right below the deleteUser<\/code> mutation, add this query:<\/p>\n
export<\/span> const<\/span> getUserProducts = ({ id }<\/span>) =><\/span> {\n  return<\/span> db.product.findMany({\n    where<\/span>: {\n      userId<\/span>: id,\n    },\n  })\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This queries the product<\/code> table for any products that have the user ID we pass in. We also need to add a type to users.sdl.js<\/code> in api > src > graphql<\/code>. This will make the query available on our server. Let\u2019s add the new type below the user<\/code> query definition.<\/p>\n
Note: The users.js<\/code> and users.sdl.js<\/code> files were automatically generated when we ran the scaffold<\/code> command. We\u2019re just adding these couple of things to them.<\/em><\/p>\n
getUserProducts<\/span>(id<\/span>: Int<\/span>!): [Product]<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
That\u2019s all for the back-end! All that\u2019s left is using this query on the front-end and a quick update to the document we made.<\/p>\n
Using the product data in the document<\/h3>\n
We\u2019ll need to update Users.js<\/code> in the web > src > User > Users<\/code> folder. The first thing we\u2019ll do is import the useQuery<\/code> hook. You can add this to the existing import from \u2018@redwoodjs\/web\u2019.<\/p>\n
import<\/span> { useMutation, useQuery } from<\/span> '@redwoodjs\/web'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With this import, we can add the query we need to get our data. We\u2019ll do that right below the DELETE_USER_MUTATION<\/code>.<\/p>\n
const<\/span> GET_USER_PRODUCTS = gql`\n  query GetUserProductsQuery($id: Int!) {\n    getUserProducts(id: $id) {\n      quantity\n      name\n      imageUrl\n      price\n    }\n  }\n`\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
This will return an array of products associated with the given user ID. The next thing we\u2019ll do is update the UserReport<\/code> so that we can show the product data. Note that we changed the name of the prop we\u2019re passing in.<\/p>\n
const<\/span> UserReport = ({ products }<\/span>) =><\/span> (\n  <Document<\/span>><\/span>\n    {products.map((product) => (\n      <Page<\/span> size<\/span>=\"A4\"<\/span> style<\/span>={styles.page}<\/span>><\/span>\n        <View<\/span> style<\/span>={styles.section}<\/span>><\/span>\n          <Text<\/span>><\/span>Name: {product.name}<\/Text<\/span>><\/span>\n          <Text<\/span>><\/span>Price: {product.price}<\/Text<\/span>><\/span>\n          <Text<\/span>><\/span>Quantity: {product.quantity}<\/Text<\/span>><\/span>\n        <\/View<\/span>><\/span>\n        <View<\/span> style<\/span>={styles.section}<\/span>><\/span>\n          <Image<\/span> src<\/span>={product.imageUrl}<\/span> \/><\/span>\n        <\/View<\/span>><\/span>\n      <\/Page<\/span>><\/span>\n    ))}\n  <\/Document<\/span>><\/span><\/span>\n)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We\u2019re in the last steps now! All that\u2019s left is to fetch the product data for each user row and generate a report that will be downloadable. Inside of the <tbody><\/code>, where we map over the users, add this bit of code above the return<\/code> statement.<\/p>\n
const<\/span> { loading, data } = useQuery(GET_USER_PRODUCTS, {\n  variables<\/span>: { id<\/span>: user.id },\n})\nif<\/span> (loading) {\n  return<\/span> <div<\/span>><\/span>...<\/div<\/span>><\/span><\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This is how we will get the product data to pass into our reports. We add a check to see if the data is still loading or else it return prematurely and the app will crash because there\u2019s no data to use.<\/p>\n
We need to update the prop we pass to the UserReport<\/code> in the \u201cDownload\u201d button.<\/p>\n
<UserReport<\/span> products<\/span>={data.getUserProducts}<\/span> \/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Now when you run your app and click the download button for your user, you should get a PDF that displays all of the products you create for them!<\/p>\n
Finished code<\/h2>\n
You can check out the finished code in this repo on GitHub in the user-reports<\/code> folder<\/a>. You can also see the front-end code in this Code Sandbox<\/a>.<\/p>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
Conclusion<\/h2>\n
Giving users an easy way to see their data is a common task. Generating dynamic PDFs in JavaScript is a useful skill to have in your toolbox, so feel free to look at approaches that may be better for performance.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27808,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,177,246,371],"class_list":["post-27807","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-javascript","tag-react","tag-under-review"],"acf":[],"yoast_head":"\nCreating Custom User Reports<\/title>\n<meta name=\"description\" content=\"Users expect to be able to see their data in a format that's easy for them to read. When you allow them to download custom reports as PDFs, it gives them something they can use to see their data quickly. In this tutorial, we'll make a new Redwood app that stores user data and generates reports for them.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Custom User Reports\" \/>\n<meta property=\"og:description\" content=\"Users expect to be able to see their data in a format that's easy for them to read. When you allow them to download custom reports as PDFs, it gives them something they can use to see their data quickly. In this tutorial, we'll make a new Redwood app that stores user data and generates reports for them.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-23T22:37:52+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926209\/Web_Assets\/blog\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Creating Custom User Reports\",\"datePublished\":\"2022-03-23T22:37:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/\"},\"wordCount\":4,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926209\/Web_Assets\/blog\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Javascript\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/\",\"name\":\"Creating Custom User Reports\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926209\/Web_Assets\/blog\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3.jpg?_i=AA\",\"datePublished\":\"2022-03-23T22:37:52+00:00\",\"description\":\"Users expect to be able to see their data in a format that's easy for them to read. When you allow them to download custom reports as PDFs, it gives them something they can use to see their data quickly. In this tutorial, we'll make a new Redwood app that stores user data and generates reports for them.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926209\/Web_Assets\/blog\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926209\/Web_Assets\/blog\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3.jpg?_i=AA\",\"width\":6720,\"height\":4480},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Custom User Reports\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating Custom User Reports","description":"Users expect to be able to see their data in a format that's easy for them to read. When you allow them to download custom reports as PDFs, it gives them something they can use to see their data quickly. In this tutorial, we'll make a new Redwood app that stores user data and generates reports for them.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/","og_locale":"en_US","og_type":"article","og_title":"Creating Custom User Reports","og_description":"Users expect to be able to see their data in a format that's easy for them to read. When you allow them to download custom reports as PDFs, it gives them something they can use to see their data quickly. In this tutorial, we'll make a new Redwood app that stores user data and generates reports for them.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-23T22:37:52+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926209\/Web_Assets\/blog\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/"},"author":{"name":"","@id":""},"headline":"Creating Custom User Reports","datePublished":"2022-03-23T22:37:52+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/"},"wordCount":4,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926209\/Web_Assets\/blog\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3.jpg?_i=AA","keywords":["Guest Post","Image","Javascript","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/","name":"Creating Custom User Reports","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926209\/Web_Assets\/blog\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3.jpg?_i=AA","datePublished":"2022-03-23T22:37:52+00:00","description":"Users expect to be able to see their data in a format that's easy for them to read. When you allow them to download custom reports as PDFs, it gives them something they can use to see their data quickly. In this tutorial, we'll make a new Redwood app that stores user data and generates reports for them.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926209\/Web_Assets\/blog\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926209\/Web_Assets\/blog\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3.jpg?_i=AA","width":6720,"height":4480},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-custom-user-reports-with-redwood\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating Custom User Reports"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926209\/Web_Assets\/blog\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3\/49c61c5a752237f029ae20e9eb254c89d6a56a38-6720x4480-1_278086d0c3.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27807"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27807\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27808"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}