A list of project names is being displayed in the side bar by retrieving them from a JSON result. When a user clicks on any of the listed project names on the side bar, it will show the details of that specific project. Additionally, there is now a search box to search for projects and display their details while also selecting the project name on the side bar.
Below is the code snippet for the search box:
<input class="form-control form-control-dark w-100" type="text" id="text" placeholder="Search" aria-label="Search">The JSON result contains the following project information:
"projects": [
{
"instances": null,
"name": "decodingideas",
"projectid": "decodingideas-147616",
"projectnumber": 334691107943,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
},
{
"instances": null,
"name": "pupil-workers",
"projectid": "pupil-workers",
"projectnumber": 455648594684,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
}
In this setup, searches can be performed based on project ID, name, or instance among other criteria.
Here's a glimpse of the HTML code used:
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div id="projectlist" class="sidebar-sticky">
<ul class="nav flex-column nav-pills">
{{range .Projects}}
<li class="nav-item" >
<a name="{{.ProjectID}}" class="nav-link" href="#">
<img class="img-fluid" style="width:8%" src="static/image/generic_gcp.png">
{{.Name}}
<div>
<small>
ProjectId: {{.ProjectID}}
</small>
</div>
</a>
</li>
{{end}}
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
{{range .Projects}}
<div id={{.ProjectID}} class="d-none justify-content-between flex-wrap
flex-md-nowrap align-items-center pb-2 mb-3 border-bottom ">
<h1 class="h2">Project:{{.Name}}</h1>
This set up enables searching and displaying project details while also allowing users to select the desired project name from the side bar.