Home JSON File
Disclaimer: Portals require a license. These documents are to get you started with your portals. By no means is this the only way to make your portal, nor is this the only way to edit a json file.
Overview of the home.json file
this .json file will edit the home screen.
You can add different sections, links, projects, etc into the json file
You can also set a banner for the home page
If you have questions about how to use a json file, please view this section
Overview of the Sections of a portal and matching json files:
Example of the home.json file
{
"order": ["banner_image", "template_projects", "academy_links", "dnanexus_links"],
"components": {
"banner_image": {
"type": "image",
"id": "banner_image",
"src": "#banner_image.png"
},
"template_projects": {
"type": "project",
"id": "template_projects",
"title": "Template Projects",
"query": {
"tags": "Template Course",
"limit": 5
},
"columns":[
{
"property": "name",
"label": "Name"
},
{
"property": "level",
"formatter": "capitalize",
"label": "Access"
}
],
"viewMore": "/communities/academy_curriculum/projects",
"minWidth": "400px"
},
"academy_links": {
"type": "link",
"id": "academy_links",
"title": "DNAnexus Academy Links",
"links": [
{
"name": "Academy Documentation",
"href": "https://academy.dnanexus.com"
}
],
"minWidth": "400px"
},
"dnanexus_links": {
"type": "link",
"id": "dnanexus_links",
"title": "DNAnexus Links",
"links": [
{
"name": "DNAnexus Website",
"href": "https://www.dnanexus.com"
},
{
"name": "DNAnexus Documentation",
"href": "https://documentation.dnanexus.com"
}
],
"minWidth": "400px"
}
}
}Sections in your home.json file
In your home.json file, you have to have this as the beginning of the json:
{
"order": [ #LIST #HERE ],
"components": {
#FILL WITH SECTIONS HERE
}
}After that, you can customize exactly what you are wanting.
Walk-through of Each Section:
Banner Image:
"banner_image": {
"type": "image",
"id": "banner_image", #keep the ids lower case and with no spaces
"src": "#banner_image.png" #you will need an image when you upload, chnange this name to whatever you want to call it, but leave the # in front of it
},Items Under the Banner Image:
There can be as many of these as you would like
You can also add in tables, images, and footers
Code For Template Projects Section:
"template_projects": {
"type": "project",
"id": "template_projects", #keep the ids lower case and with no spaces
"title": "Template Projects", #this is what will show up on the portal as the name
"query": {
"tags": "Template Course", #this is the tag for my template course projects
"limit": 5 #this is how many of the courses I want to show up
},
"columns":[ #these are the columns you want viewable as part of your table. I picked name and access level.
{
"property": "name",
"label": "Name"
},
{
"property": "level",
"formatter": "capitalize",
"label": "Access"
}
],
"viewMore": "/communities/academy_curriculum/projects", #this sets the parameter for a list of the rest of the projects with the tag that I have selected.
"minWidth": "400px" #this sets the width on the portal home page for this section. If you want them to take up the whole page, you do not have to have this. I set it to 400 so that I could add multiple columns. If you do not set this, you will have these as rows, one table after another.
}, Code for Academy Links Section:
"academy_links": {
"type": "link",
"id": "academy_links", #keep the ids lower case and with no spaces
"title": "DNAnexus Academy Links", #title that shows up on the home page
"links": [
{
"name": "Academy Documentation", #name that shows up for the link
"href": "https://academy.dnanexus.com" #link I want used
}
],
"minWidth": "400px" #this sets the width on the portal home page for this section. If you want them to take up the whole page, you do not have to have this. I set it to 400 so that I could add multiple columns. If you do not set this, you will have these as rows, one table after another.
}, Code for DNAnexus Links Section:
"dnanexus_links": {
"type": "link",
"id": "dnanexus_links", #keep the ids lower case and with no spaces
"title": "DNAnexus Links", #title that shows up for the home page
"links": [
{
"name": "DNAnexus Website", #name that shows up for the link
"href": "https://www.dnanexus.com" #link I want used
},
{
"name": "DNAnexus Documentation", #name that shows up for the link
"href": "https://documentation.dnanexus.com" #link I want used
}
],
"minWidth": "400px" #this sets the width on the portal home page for this section. If you want them to take up the whole page, you do not have to have this. I set it to 400 so that I could add multiple columns. If you do not set this, you will have these as rows, one table after another.
}
}Examples for Other Items to Add (not included in my example image)
EXAMPLE: Code for Images (not banner image):
"example_image": {
"type": "image",
"id": "example-image", #id for order purposes
"src": "https://example.com/image.png", #you can set the source for this as a public link or with a "#" if you have the image locally.
"alt": "Alt text" #text
},EXAMPLE: Code for Tables:
"table-example": {
"type": "markdown", #format for the table
"id": "table_example", #id for the order of content
"title": "Table Example",
"content": "LIST MARKDOWN CONTENT HERE FOR TABLE", #this will need to be your code for a table
"minWidth": "100px"
},EXAMPLE: Code for footer:
"footer": {
"name": "DNAnexus Help",
"href": "https://www.dnanexus.com/help"
},
"minWidth": "300px"Please note that when you are done with your json, to please ensure it is the right format.
Resources
Please email [email protected] to create a support ticket if there are technical issues.
Last updated
Was this helpful?