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

Portal Documentation

Full Documentation

Please email [email protected] to create a support ticket if there are technical issues.