add a custom view to JHipster app - jhipster

Is there a Yeoman way of creating all the necessary templates required when adding a new view in a JHipster app? I want a simple static page, or a page that doesn't require a new entity. Let's say I want to add an "About" page, I believe I would need to do the following:
Add the "About" link to src/main/webapp/app/layouts/navbar/navbar.html:
<li ui-sref-active="active">
<a ui-sref="about" ng-click="vm.collapseNavbar()">
<span class="glyphicon glyphicon-wrench"></span>
<span class="hidden-sm" data-translate="global.menu.about">About</span>
</a>
</li>
Create the following new files:
src/main/webapp/app/about/about.controller.js
src/main/webapp/app/about/about.html
src/main/webapp/app/about/about.state.js
src/main/webapp/i18n/en/about.json, and any other language...
... and add the following lines in webapp/index.html:
<script src="app/about/about.state.js"></script>
<script src="app/about/about.controller.js"></script>
... and any necessary content to src/main/webapp/i18n/en/global.json.
Am I forgetting something?
Does this need to be done manually? Is there a Yeoman command for creating a new view that is independent of an entity? I know that this question has been asked, but I'm hoping that things have changed since then.

The jhipster module Nav Element do it automatically for us. In addition it creates an angular component too for the new item in the menu.

Here is instruction how to add static page:
https://codefitter2.blogspot.com/2016/09/how-to-add-new-menu-and-static-page-in.html

You may try creating an entity without any fields or relations and with "--skip-server" option.
yo jhipster:entity about --skip-server

Related

i want to create dynamic sidebar in mern stack which render another component when they clicked

for your understanding i attached w3school screenshot.
enter image description here
if u have ever visited w3school website u will understand my requirement easily.
i want to create these html sidebar dynamic from my admin dashboard. first i will create one sidebar title name then insert content according to title name and so on..... for best understanding you can assume that i want to create w3school clone dynamic from where i can dynamic create sidebar and content. i read about react router dom and many more but not able to create like this.
You can use react-router for navigation and then render according to the route
https://codesandbox.io/s/c2zs4
here is the example I found, it used react-router for navigation and render components according to the route.
add in _app.js file
you can put a header here
<div className="flex">
<div className="W-2/6>
<Sidebar/>
</div>
<div className="w-4/6">
page component here
</div>
</div>
and footer here
I used tailwind CSS

Magento - Change links in header

I just started with magento. I try to replace the header links on the default page. I need to replace the text "My Cart" with the following font-awesome icon.
<i class="fas fa-shopping-cart"></i>
But I have no clue where I can change this, the documentation is complicated and not very beginner friendly.
I figured it out. You have to create your own design and assign it in the backend . Then you have to create the following folder structure if it does not exist yet.
\app\design\frontend\yourDesign\default\template\page\template
Now create a file called links.phtml with the following content:
<ul class="links"<?php if($this->getName()): ?> id="<?php echo $this->getName() ?>"<?php endif;?>>
//insert links here
</ul>

Footer in Liferay

I need to make a footer in Liferay and use theme for it. What's the simpliest way to do it?
I have created new theme, filled _diffs folder with other folders, but it's empty and I couldn't find relevant docs about this. Should I copy all basic files there? What should I change to create footer?
In Liferay, theme's portal_normal.vm serves as the template to
construct HTML structure of the page. There you define your header,
body and footer includes.
When you will look at the portal_normal.vm of classic theme, you will observe following HTML snippet:
<footer id="footer" role="contentinfo">
<p class="powered-by">
#language ("powered-by")
Liferay
</p>
</footer>
This is the footer of the page. This is what you need to implement. However, it's not necessary to use footer tag at all, as you can simply use div or table based structure with bootstrap or customized CSS classes for your footer, it's upto your requirement.
Remember! Classic theme is just like a sample provided by Liferay, so, it's not good idea to directly customize it.
Everybody needs a whole customized view of the site, and for this the best idea is to create a custom theme (that's what you are doing!), that will give you full control over your look-n-feel.
To kick-start, you can initially copy required folders from classic theme to your customized theme's (_diffs folder) and start changing bit by bit.

dropdown menu link to specifict section in a page

I have index.html and the catalog.html, in this page I have some Id in order to move throw diferents sections in that page.
I have a menu, with Hone and Catalog, this option it´s a dropdownmenu, so, what I need is if I´m index and clic on catalog can go to specific section (named "canal-prisma") of cataglo page, I have this code but didn´t work, thank you for your help
<li class="dropdown">
Catálogo<span class="caret"></span>
<ul class="dropdown-menu">
<li>CANAL PRISMA</li>
</ul>
Are you trying to go to a section on the page with the id or name attribute set as canal-prisma? If you set the id attribute, you should change that to the "name" attribute. Otherwise, more code is really needed to determine the answer to your question.
For example, in order to create a section of the page called canal-prisma:
Go to the Canal Prisma section
And in catalog.html:
<a name="canal-prisma">#</a>

Override part template Orchard

I starting with orchard. I want to override MenuWidgetPart to render as i want. I've created Parts.MenuWidget-MenuWidget.cshtml into Views folder of current theme. But i do not know, how to i can get list menu from Model. Please look my code below:
<nav>
<ul>
#foreach(var m in listMenu){
<li>#m.Text</li>
}
</ul>
</nav>
How to i can get listMenu from Model ?
Templates for Menu and MenuItem are Menu.cshtml and MenuItem.cshtml. You can start by copying those files from /Core/Shapes/Views/ directory to your theme directory. You can modify them as you wish afterwards.
This will, actually modify all your menus on the site. If you want it to be specifically for your widget (Parts.MenuWidget-MenuWidget.cshtml) you can start by copying the contents from Menu.cshtml to your widget template and continue with modifications from there.
EDIT:
To iterate over items you can use the following syntax:
#foreach (var item in Model.Menu.Items){
#Display(item)
}

Resources