{"id":229,"date":"2020-04-10T03:46:21","date_gmt":"2020-04-10T03:46:21","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/hulk\/?page_id=229"},"modified":"2020-04-13T11:45:05","modified_gmt":"2020-04-13T11:45:05","slug":"adding-widgets","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/hulk\/adding-widgets\/","title":{"rendered":"Adding Widgets"},"content":{"rendered":"\n
Adding a new widget <\/h5>\n\n\n\n

Please follow the given steps to add a new widget in the template. We are taking an example of adding a \u201cNew Widget\u201d on the \u201cDashboard\u201d but you can add any widget on any of the dashboard in the template: <\/p>\n\n\n\n

Step 1:<\/strong> Please create a new widget file(of extension .js) in the folder src->components->Widgets<\/code>. We have created a file named NewWidget.js<\/code> in the same folder. <\/p>\n\n\n\n

Step 2: <\/strong>Now add the code in the widget file as per your requirements. For Example we have added the simple text block in the widget file as given in the code snippet below: <\/p>\n\n\n\n

  \/*\n* new widget\n *\/\nimport React, { Component } from 'react';\n \nexport default class NewWidget extends Component {\n   render() {\n      return (\n         <div className=\"new-widget\">\n            <div className=\"bg-primary p-50 mb-30\">\n               <h2 className=\"text-light\">{'This is a new widget'}<\/h2>\n            <\/div>\n        <\/div>\n      )\n   }\n}; <\/pre>\n\n\n\n
Step 3:<\/strong> Opensrc->routes->dashboard->dashboard1->index.js<\/code> file and add the NewWidget<\/code> in the paper<\/code>section                 <Paper className={classes.Paper} square><\/code> as given in the code and also import the NewWidget<\/code> at the top like other import statements already imported. <\/p>\n\n\n\n
 import React, { Component } from 'react';\n import { withStyles } from '@material-ui\/styles';\n import { Paper, Box, Container, Typography } from '@material-ui\/core';\n import IntlMessages from 'util\/IntlMessages';\n import { withTheme } from '@material-ui\/core\/styles';\n import NewWidgets from 'components\/Widgets\/NewWidgets'\n const styles = theme => ({\n     Paper: {\n         padding: '0.75rem',\n         backgroundColor: 'transparent',\n         boxShadow: 'none',\n         '&:first-child': {\n             paddingTop: '24px',\n         },\n         '&:last-child': {\n             paddingBottom: '30px',\n         }\n     }\n });\n class Dashboard1 extends Component {\n     state = {\n         ratings: [\n             { value: 885, name: 'Positive (93.4%)', itemStyle: { color: this.props.theme.palette.primary.main } },\n             { value: 215, name: 'Negative (6.6%)', itemStyle: { color: this.props.theme.palette.warning.main } }\n         ]\n     }\n UNSAFE_componentWillReceiveProps(newProps){\n         let newRatings = this.state.ratings;\n         for(let i = 0; i< newRatings.length; i++){\n             if(i === 0){\n                 newRatings[i].itemStyle.color = newProps.theme.palette.primary.main;\n             } else {\n                 newRatings[i].itemStyle.color = newProps.theme.palette.warning.main;                \n             }\n         }\n         this.setState({ratings : newRatings})\n     }\n\n     render(){\n       const { classes } = this.props;\n       return(\n         <div className=\"webanalytics-dashboard\">\n            <Container maxWidth=\"lg\">\n               <Box px={2} pt={4} pb={3}>\n                  <Typography variant=\"h3\"> \n                     <IntlMessages id=\"widgets.welcome\" \/> \n                  <\/Typography>\n                  <Typography variant=\"body2\" color=\"textSecondary\">\n                     Explore your own powerful admin panel and keep track of all activity of <span className=\"hl-text\"><IntlMessages id=\"widgets.quickStats\" \/> <\/span> \n                   <\/Typography>\n                   <Paper className={classes.Paper} square>\n                      <NewWidgets \/>\n                   <\/Paper>\n               <\/Box>\n            <\/Container>\n         <\/div>\n       );\n    }        \n  )\n}\nexport default withStyles(styles)(withTheme(Dashboard1)); <\/pre>\n\n\n\n
 Now save the file and open the browser, you will see your newly added widget on your dashboard like below screenshot: <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
 Adding an existing widget <\/h5>\n\n\n\n
 Please follow the given steps to add an existing widget in the template.  We are taking an example of adding a \u201cTask List\u201d on the \u201cDashboard1\u201d but you can add any widget on any of the dashboard in the  template: <\/p>\n\n\n\n
Step 1: <\/strong>Opensrc->routes->dashboard->dashboard1->index.js<\/code> file and add the TaskList<\/code> in the paper<\/code>section  <Paper className={classes.Paper} square><\/code>  as given in the code and also import the TaskList<\/code>at the top like other import statements already imported. <\/p>\n\n\n\n
import React, { Component } from 'react';\n import { withStyles } from '@material-ui\/styles';\n import { Paper, Box, Container, Typography } from '@material-ui\/core';\n import IntlMessages from 'util\/IntlMessages';\n import { withTheme } from '@material-ui\/core\/styles';\n import TaskList from 'components\/Widgets\/TaskList'\n const styles = theme => ({\n     Paper: {\n         padding: '0.75rem',\n         backgroundColor: 'transparent',\n         boxShadow: 'none',\n         '&:first-child': {\n             paddingTop: '24px',\n         },\n         '&:last-child': {\n             paddingBottom: '30px',\n         }\n     }\n });\n class Dashboard1 extends Component {\n     state = {\n         ratings: [\n             { value: 885, name: 'Positive (93.4%)', itemStyle: { color: this.props.theme.palette.primary.main } },\n             { value: 215, name: 'Negative (6.6%)', itemStyle: { color: this.props.theme.palette.warning.main } }\n         ]\n     }\n UNSAFE_componentWillReceiveProps(newProps){\n         let newRatings = this.state.ratings;\n         for(let i = 0; i< newRatings.length; i++){\n             if(i === 0){\n                 newRatings[i].itemStyle.color = newProps.theme.palette.primary.main;\n             } else {\n                 newRatings[i].itemStyle.color = newProps.theme.palette.warning.main;                \n             }\n         }\n         this.setState({ratings : newRatings})\n     }\n\n     render(){\n       const { classes } = this.props;\n       return(\n         <div className=\"webanalytics-dashboard\">\n            <Container maxWidth=\"lg\">\n               <Box px={2} pt={4} pb={3}>\n                  <Typography variant=\"h3\"> \n                     <IntlMessages id=\"widgets.welcome\" \/> \n                  <\/Typography>\n                  <Typography variant=\"body2\" color=\"textSecondary\">\n                     Explore your own powerful admin panel and keep track of all activity of <span className=\"hl-text\"><IntlMessages id=\"widgets.quickStats\" \/> <\/span> \n                   <\/Typography>\n                   <Paper className={classes.Paper} square>\n                      <TaskList \/>\n                   <\/Paper>\n               <\/Box>\n            <\/Container>\n         <\/div>\n       );\n    }        \n  )\n}\nexport default withStyles(styles)(withTheme(Dashboard1));<\/pre>\n\n\n\n
\"\"
 Added Task List on Dashboard 1<\/figcaption><\/figure>\n\n\n\n
 It does not matters whether you are using the seed project or the complete template, the steps remains the same for both.  <\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
Adding a new widget Please follow the given steps to add a new widget in the template. We are taking an example of adding a \u201cNew Widget\u201d on the \u201cDashboard\u201d but you can add any widget on any of the dashboard in the template: Step 1: Please create a new widget file(of extension .js) in […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/229"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/comments?post=229"}],"version-history":[{"count":27,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/229\/revisions"}],"predecessor-version":[{"id":386,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/229\/revisions\/386"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/media?parent=229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}