Appgini SideMenu Layout Mod

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
udayvatturi
AppGini Super Hero
AppGini Super Hero
Posts: 85
Joined: 2014-06-14 03:08
Location: India
Contact:

Appgini SideMenu Layout Mod

Post by udayvatturi » 2015-04-20 12:25

Hi,
I got lot of requests for this side menu so I developed it.

Demo: http://test.spgon.in/side_menu/index.php
Username/Password: spgon/spgon
Capture.PNG
Capture.PNG (64.56 KiB) Viewed 6624 times
Please PM or Mail me for this mod.
Thanks
Uday V
uday@spgon.com
http://www.spgon.com

patsd102
Veteran Member
Posts: 79
Joined: 2013-01-15 19:59

Re: Appgini SideMenu Layout Mod

Post by patsd102 » 2015-04-20 18:07

Brilliant, well done,

udayvatturi
AppGini Super Hero
AppGini Super Hero
Posts: 85
Joined: 2014-06-14 03:08
Location: India
Contact:

Re: Appgini SideMenu Layout Mod

Post by udayvatturi » 2015-04-21 13:43

Thank You :) .
Thanks
Uday V
uday@spgon.com
http://www.spgon.com

G Gueli
Posts: 1
Joined: 2017-03-12 09:30

Re: Appgini SideMenu Layout Mod

Post by G Gueli » 2017-08-02 12:31

Hi, sorry to reopen an old post. Is there any way to get this done without much coding? I am a non-php coder, LOL.

Thank you very much in advance.

G.

Anton Mats
Posts: 4
Joined: 2017-08-26 15:40

Re: Appgini SideMenu Layout Mod

Post by Anton Mats » 2018-01-18 11:03

Hi,
I tried to send you an email, but I have not received reply. Can I know how much cost this piece of code?
For eventually customizations can I ask you a quote?
Thanks a lot,
antonmats

udayvatturi
AppGini Super Hero
AppGini Super Hero
Posts: 85
Joined: 2014-06-14 03:08
Location: India
Contact:

Re: Appgini SideMenu Layout Mod

Post by udayvatturi » 2018-02-22 11:57

Hi,
I am receiving many requests regarding this, but sorry i couldn't able to respond to all.
I decided to give it for free. This use to work with old version of appgini, not sure how it works with recent versions.

http://spgon.in/side_menu.zip
Thanks
Uday V
uday@spgon.com
http://www.spgon.com

H TARIK
Posts: 5
Joined: 2018-01-04 18:44

Re: Appgini SideMenu Layout Mod

Post by H TARIK » 2018-02-26 13:04

Thank you, Uday,
But after adding your files, some css not working,
i attached from screenshot of my work,
Attachments
appinii.JPG
appinii.JPG (26.43 KiB) Viewed 4628 times

xbox2007
Posts: 29
Joined: 2016-12-16 16:49

Re: Appgini SideMenu Layout Mod

Post by xbox2007 » 2018-03-23 17:04

look nice , need to try it

User avatar
dnaorem
Posts: 19
Joined: 2018-10-16 16:06
Location: Imphal, Manipur, India
Contact:

Re: Appgini SideMenu Layout Mod

Post by dnaorem » 2018-11-11 14:05

Uday Sir,
This looks great, I was so happy when I found this post, but, unfortunately the link is not working. Could you please suggest another way to dowload?
With regard,
Debenkumar Naorem

tvloeimans
Posts: 14
Joined: 2019-03-20 13:46

Re: Appgini SideMenu Layout Mod

Post by tvloeimans » 2019-03-20 17:14

Someone who is willing to share the code with us?
©2019 - No rights reserved

maramk
Veteran Member
Posts: 37
Joined: 2013-08-13 11:19

Re: Appgini SideMenu Layout Mod

Post by maramk » 2019-03-25 10:15

Good day tvloeimans,

Syed did create the side bar menu with the material theme, kindly see post below - if it is working with the current version, I do not know, I did not tested it.......

viewtopic.php?f=8&t=2664&p=7987&hilit=syed#p7987

The code is available https://github.com/syedskspgon/AppGini-Material-Support

Thank you,
Kind regards,

Mara
Attachments
materialsidebar.png
materialsidebar.png (39.3 KiB) Viewed 1968 times

tvloeimans
Posts: 14
Joined: 2019-03-20 13:46

Re: Appgini SideMenu Layout Mod

Post by tvloeimans » 2019-03-25 17:49

Thanks Mara, will look into it!
©2019 - No rights reserved

User avatar
ronwill
Veteran Member
Posts: 101
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Appgini SideMenu Layout Mod

Post by ronwill » 2019-03-29 10:08

I'd like to know how to do this properly!

Meanwhile I have found a simple non-coding way to achieve something similar: Only change to AG files are 1 item in home.php (to set landing page image), 1 change in incCommon.php (to change link of database/app name to point to side menu page).
I created some tables as normal but they are all set to HIDE in nav menu + home page and I use my own page in hooks to create, control the side menu.

If anyone is interested, I'll tidy it up and make an AG file available and the hooks side menu file, revised home + incCommon.php files

Some images:
Attachments
side3.png
side3.png (161.37 KiB) Viewed 1885 times
side3.jpg
side3.jpg (15.69 KiB) Viewed 1885 times
side1.jpg
side1.jpg (51.95 KiB) Viewed 1885 times
Side1.png
Side1.png (46.03 KiB) Viewed 1885 times
Ron - AppGini Pro V 5.76 Rev 1058
Gloucestershire, UK

tvloeimans
Posts: 14
Joined: 2019-03-20 13:46

Re: Appgini SideMenu Layout Mod

Post by tvloeimans » 2019-04-02 15:50

ronwill wrote:
2019-03-29 10:08
If anyone is interested, I'll tidy it up and make an AG file available and the hooks side menu file, revised home + incCommon.php files
Yes please!
©2019 - No rights reserved

kbarrett
Veteran Member
Posts: 47
Joined: 2019-02-24 16:35
Location: Calgary Alberta

Re: Appgini SideMenu Layout Mod

Post by kbarrett » 2019-04-02 17:59

Yes please x 2

G Belgrado
Posts: 23
Joined: 2017-03-12 09:24

Re: Appgini SideMenu Layout Mod

Post by G Belgrado » 2019-04-03 08:02

+1
thanks

User avatar
ronwill
Veteran Member
Posts: 101
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Appgini SideMenu Layout Mod

Post by ronwill » 2019-04-05 07:04

Think it will work this way (could not upload the AppGini project file on here):

1. Use this link to my shared dropbox: https://www.dropbox.com/sh/eftcxe2hubeb ... N0iza?dl=0
2. Download/Save/Open the sidemenu.axp file in AppGini and generate to a folder called /sidemenu in your local htdocs folder.
3. Copy the dropbox files (datalist, header, home, incCommon php files) from dropbox revised files folder and overwrite those generated by AppGini in the sidemenu root folder. Note these files will be overwritten on AG generation so either mark as read only or save to revised files flder and do file compare after revisions/generation etc.
4. Overwrite all the files in the generated hooks folder with those from dropbox hooks folder.
5. Complete set-up as you normally would to view in browser.
6. Login as admin and grant anonymous full view permissions.
7. Should now all be working, I have put notes in revised files and under the demo version and made a simple home landing page and added image to signin page (better handshake pic)
8. Experiment with the menu's etc. (link to https://www.w3schools.com/howto/howto_c ... idebar.asp for more ideas, methods.

It's just a simple demo not a masterpiece lol. I did it as an experiment as I could not get my head round doing it in a coding way!

I've marked most of my in file notes with 'Ron:' to make them easier to find/search for to view changes, all hook files have edits to headers for table/detailed view to hide nav/footer in main pages viewing area (as they are presented using in page iframes and navbar/footer already present)

Let me know if any problems downloading the files etc. I will keep them on my dropbox till I need the space (at least next 4 weeks). If its gone later, message me on here and I'll upload again.
Enjoy (I hope), Ron
Ron - AppGini Pro V 5.76 Rev 1058
Gloucestershire, UK

User avatar
ronwill
Veteran Member
Posts: 101
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Appgini SideMenu Layout Mod

Post by ronwill » 2019-04-05 14:49

Image of Demo:
demoimage.jpg
demoimage.jpg (84.79 KiB) Viewed 1712 times
Ron - AppGini Pro V 5.76 Rev 1058
Gloucestershire, UK

User avatar
ronwill
Veteran Member
Posts: 101
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Appgini SideMenu Layout Mod

Post by ronwill » 2019-04-11 04:39

Have done another temporary and very easy to do example, minor changes to incCommon.php and some code to copy/paste into hooks header-extras only. Simply moves your 'Jump to' menu list items to a sidenav push (off canvas). Suitable when not showing too many tables!
sidemenu.jpg
sidemenu.jpg (43.35 KiB) Viewed 1563 times
Cheers, Ron
Ron - AppGini Pro V 5.76 Rev 1058
Gloucestershire, UK

lectura
Posts: 12
Joined: 2015-01-10 13:29

Re: Appgini SideMenu Layout Mod

Post by lectura » 2019-04-14 14:48

this is wonderful

User avatar
ronwill
Veteran Member
Posts: 101
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Appgini SideMenu Layout Mod

Post by ronwill » 2019-04-15 15:57

Code, changes needed etc. for the above side menu (sidenav push off canvass, using your already set AppGini nav menu list) are as follows:

First here is entry to place in your hooks/header-extras file:

Code: Select all

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 50px;
  left: 0;
  background-color: #f7f6f6;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 100px;
}

.sidenav a {
  padding: 5px 5px 5px 5px;
  text-decoration: none;
  font-size: 16px;
  color: #000000;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #374bff;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 16px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="mySidenav" class="sidenav hidden-xs">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><h2><small>Close Menu &times;</small></h2></a>
			
				<ul class="nav navbar-nav hidden-xs scrolling="no"">
					<?php if(!$home_page){ ?>
						<?php echo NavMenus(); ?>
					<?php } ?>
				</ul>
</div>

<div id="main">
<!-- RON: Don't add a closing div to above to allow all page content to move to side to accommodate
the menu when visible. If you don't want content to move accross for menu, delete above <div id="main" or add </div> --> 



<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}
</script>
Next changes needed to your incCommon.php file are shown below (don't forget to save copy or set as read only etc. as gets overwritten) This is the start of html section (my file approx line 340 changes after the toggle button code):

Code: Select all

		<nav class="navbar navbar-default navbar-fixed-top hidden-print" role="navigation">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				
<!-- RON: Add below line -->				
  <span class="navbar-brand hidden-xs" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
<!-- RON: If you don't want it to appear left of navbar-brand then just remove navbar-brand from above class --> 							

				<!-- application title is obtained from the name besides the yellow database icon in AppGini, use underscores for spaces -->
				<a class="navbar-brand" href="<?php echo PREPEND_PATH; ?>index.php"><i class="glyphicon glyphicon-home"></i> SB Menu Home</a>
			</div>
			
<!-- RON: Amend below to allow menu on xs home page screens -->
<!-- RON: FINALLY scroll down to "$menu_wrapper" around line 1036 in my file and change as shown-->		

			<div class="collapse navbar-collapse">
				<ul class="nav navbar-nav hidden-sm hidden-md hidden-lg">
						<?php echo NavMenus(); ?>
				</ul>
Then near end of same file (incCommon.php) under section "$menu_wrapper" change as shown here:

Code: Select all

/* Ron: changes made here, copy below and replace existing/standard Smenu wrapper entry */

		$menu_wrapper = '';
		for($i = 0; $i < count($menu); $i++){
			$menu_wrapper .= <<<EOT
				<li class="nav navbar-nav hidden-xs"> 
					<ul class="nav navbar-nav" role="menu">{$menu[$i]}</ul>
				</li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle hidden-sm hidden-md hidden-lg" data-toggle="dropdown">{$table_group_name[$i]} <b class="caret"></b></a>
					<ul class="dropdown-menu" role="menu">{$menu[$i]}</ul>
				</li>
EOT;
		}

		return $menu_wrapper;
	}

	#########################################################

That's it (hope I didn't forget to add/show anything), works ok on the 3 projects I've made the same changes to, serves my needs till an integrated solution is done within AppGini. Try it out, feedback appreciated (to know if it's worth sharing stuff like this!). This keeps the standard AG menu for small screens without change.

Cheers, Ron
Ron - AppGini Pro V 5.76 Rev 1058
Gloucestershire, UK

Post Reply