Switching from old style layouts to Bootstrap

We are using data intensive table grids, for instance, our app has 23 fields in a row for data input ( note users have wide screen ), bootstrap layouts are all too BIG

customer does not wish to do multi-step input, single row for tabbing btwn field, speed is of ut most importance...

We also are using a lot of multi select fields, which take up a lot of space, boot strap templates make it even worse

We are cramming about 55 lines to a screen layout, when tried boot strap I can get about 30 max

Bootstrap templates are for what I will call nice pretty pics / info web

We are doing lots and lots of data input, reports, etc... not your typical web bootstrap layouts

Also, using extensive use of Master Detail relationship screens, which also take up lots of space, not sure how bootstrap template might handle
below are snap shots via JING from TECHSMITH, tis ubiquitous and works as long as have internet connection
this is field intensive row for input... which also expands a master detail relationship screen

https://screencast.com/t/89jCvqEO2
this is master detail relationship screen, just don't see any bootstrap templates out that there that can handle all the stuff on the screen

https://screencast.com/t/0KvSjShVf
Stillwater Mining

Columbus, MT 59011

Exactly same here, we too are using lots of fields in forms and reports, and in bootstrap it is not viable as we cannot align the fields, especially in forms. A typical form has 50+ fields in sections and tabs.

@heilman, thank you, makes sense. Do you mind posting a screenshot or a link to live app?

Perhaps a data intense bootstrap layout/design could be added as an option (smaller font size, less padding, expands to 100%, etc.

I too run into situations mentioned above. My solution is to add custom styles, but it would be sooo much easier if I could simply select a layout/design that did it for me <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=82614&image=1&table=forumreplies' class='bbc_emoticon' alt=':)' />

Just for the record, I never use the old layouts anymore.

Unfortunately, the app is behind two firewalls with no access to the internet...

I'd be more than happy to send you the project file, lots of screen dumps of screens, etc..etc...
you probably know our app well by now anyways since we are the DB 2 guys... we're the only one...
Let me know what can get for you
Best

Jerry
Good point, I played around with reducing the size for bootstrap templates, etc... but just don't have the time to go in-depth to it all ... I googled around for table driven bootstrap templates, found a couple simple ( i.e. 3 or 4 field tables ) but nothing compared to what we are doing.. we are about to make the jump from ASP to ASP.NET ( major effort from VB to C# etc.. ) and so I did look at doing boot strap at the same time, i.e. if going to do a major conversion like that, might as well do the boot strap as well, but concluded.. just too much and not enough boot strap templates available for what we do
Best

Mark

Here is a screen shot of my application

screen shot

I at first had trouble with bootstrap and the sizing of the list page in particular. After testing for a few months , I found if you use all the options available to you and communicate this to your users , Bootstrap UI is much cleaner . I use the optional resize columns / hide fields - show fields and custom css in style area . I would like to see a larger list of css for bootstrap as it is related to phprunner though. I also use the option to move fields on list page / drag and drop - so users can pick their own format and which fields to display and in which order left to right on screen. - ( See Pages Section for list page ) Another note on add pages , You don't have to use steps , You can still use sections or no tabs/sections at all , just use a two column bootstrap template may work better for you. I do think the field height and width on the add/edit pages are a bit too large. My overall opinion is my users raved about it when I updated to bootstrap , so I am for it . I would still allow using some basic templates for large corporate data intensive project though.

Bootstrap all the way please!
We have switched over everything entirely to bootstrap with PHP Runner... and it would be great if the visual editor received an upgrade to accommodate the bootstrap methodology. I believe a wholehearted embrace of bootstrap from the ground up would be a phenomenal upgrade to PHPRunner.
Keep up the great work Sergey & Crew

Opening version 7.2 applications in 9.8 does not cross-walk well. Don't know why, but left search bar extends over list, add and edit pages. And, db connection changes. I know this is a really old version, but anything past 7.2 has been problematic for me. May need to just sit down for a week and start fresh on each 7.2 version.

I like bootstrap but can't fit nearly enough data in both desktop and Mobile layouts. Both grids, edit, add etc.
If we could choose more bootstrap designs that would be great, particularly a compact one.
Thanks.

Yes smaller font size and less padding!!

Same as heilman...
Bootstrap layouts uses too much space on screen for our use..

May be smaller font size and less padding would help..

All the systems that we have have the same jayout and the users are accustomed to it. When we extend functionality or design a new application for these users we maintain the same interface to which they are accustomed.
All new features that are not passed to old layout can not be used.
Customizing the bootstrap layout is not easy and should be facilitated in a tutorial.

Regarding Bootstrap layouts and the wish for smaller font sizes and less padding - that is not senseful if you work with highres/retina screens and touch devices. Fonts get unreadable and elements untouchable. We already make the icons for editing, viewing etc. bigger on small screens, so that they can be touched.
Perhaps it would be an idea, to add a fourth view: smartphone, tablet, desktop full hd and then BIG screen view of Bootstrap layouts. This should use the space of larger than full hd screens.
Furthermore, following suggestions:

• smaller field length for number fields, so that it would be possible to put two number fields in one row on edit and view screens. Same for only on/off checkboxes.
  
• optional smaller field length for little text fields, this would make it possible to put for example a zipcode and a town field in one row on edit and view screens.
  
• draggable menu entries on the welcome screen and draggable parts on dashboars (both optional), so that users can create their welcome screens and dashboards
  
• option to let us create more screens (view, edit) for one table or view without creating view after view. Each "screen" should have it´s own rights in admin area.
  
• option to use views or tables with custom query additons on dashboards, so that we need less separate views
  
• WHERE tabs shown on list lookups with search or even better custom definable list lookup views
  
• swipe actions in list view and double click/double tap actions
  
• set variables in queries
  Sergey, you make it :-)

I would just back up the general consensus - I like bootstrap but just can't get enough on screen. For me the applications are back office systems that are very complicated - mobile accessibility is actually not very important at all. I guess as higher def monitors are coming out it might be less of an issue going forward.
I would suggest an option specifically targeted at super rich dense UIs for high value complicated processes that don't need to be accessed by phone.
and bootstrap for everything else:)
That would probably cover me in 99% of cases. For me the big win is delivery through browsers to anywhere in the world and linking to professional grade databases.

https://www.xlinesoft.com/livedemo/phprunner/livedemo81/salesman_edit.php?editid1=1#1
1st..., on any more complex ADD/EDIT issues, PHPR offers the MULTISTEP feature as per URL and live demo above (seen under TOTALS in the menu) and I just been testing by creating 16 steps under BOOTSTRAP and that gave still enough more space for more steps and of course plenty of space underneath each step for whatsoever fields etc pp too. Before BOOTSTRAP came into PHPR we had limitations on the mobile template which had then been eliminated, in short, the ever loved RESPONSIVE SCREEN came to life, whether Ipad, 7 inch gadget, smartphone, just to name a few. As a marketer in first instance it is vital for me to provide the best optical result on any screen, hence as for me no way out rather than BOOTSTRAP. For those, who do NOT use the generated code for a wider, if not say, global audience, and only run office based data processing such arguments can't really take grip at all. And imagine, in a more and more faster world to present things on even big screen in some cases, 84 inch or up, to a local audience of e.g. 50 or 100 people in a meeting room, BOOTSTRAP is what makes people to view things clearly, even from the last seat. THUMBS UP for BOOTSTRAP!
P.S. On my WISHLIST for next version: To see the solution as per http://asprunner.com/forums/topic/24575-bootstrap-theme-with-responsive-images/ as to as well enter e.g. the spare parts catalogue oriented global community at a glance and with no headache on optimal picture size at all (while coming "v3 of DocManager is fully Bootstrap based", if once equipped with a solution to provide responsive screen based sizing of pictures, would make the global crowd to defunitely vote Sergey and his team into USA presidency anyway ...).

I have tried various bootstrap layouts. However whilst cosmetically might look nice, I find it difficult to manage with data intensive screens. If/when I move to bootstrap it will have to be all or nothing otherwise it is confusing to the user if the look & feel of screens are all different.

@timh - Well, the keyword "cosmetically" is touching another theme when it comes to sell an app to biz people who are used to appear with "cosmetical" uplift or say, as registered user since PHPR v1.0 (16 years ago now ...) I can really write books on top generated apps for larger companies, yet all of them gave the "non-cosmetical" looking shape a thumbs down, simply as it is human nature to first look what is in front of the eyes rather than to look what is happening below the engine hood, commercially speaking. Of course it is and shall remain a constant tango dancing whether BOOTSTRAP or not, depending on the targeted clientel, yet as for me over the long run behind, I have to say THANK YOU to the developer team to had been paving the way for BOOTSTRAP as for my targeted clientel I first need to present an eye-catching UI to get even heard and only in second row the happenings under the engine hood are a point of discussion. Only one example out of numerous else ones: On a simple practical solution, here to implement the signature pad into a power of attorney letter (vital doc for that very USA forwarding agent and thousands of cars and trucks shipment), to fix it all online, my presented app (which I did in just one hour) was NOT accepted at all, though 100% perfect by functionality, simply by its "non-cosmetical" look. So, if I would have had BOOTSTRAP option at that time, I'm sure off to have gotten the order at that time. In very shortcut terms: BOOTSTRAP is the optical life-saver for my biz with large companies.

@walktofly
The introduction of Bootstrap was the reason for me to start developing with phpRunner.
Without Bootstrap you can´t really produce modern web apps. People expect responsiveness, touch-ability and at least currently "flat design".
And looking at the "old style" screens posted here, I wonder who can look and scan that many fields at the same time - perhaps less would be more. And with bootstrap you have tabs and sections and you could show more details with popovers which appear by a click on the grid.

switch completely to bootstrap is a must

Seriously, with a little effort, you can tweak the styles of bootstrap to pretty much accommodate all these concerns about a lot of data on one page.
If we as developers want to stay relevant, we need to embrace the modern responsive web. I fully support Xlinesoft to do a strong push to move away from the old layouts and put all their effort into enhancing the bootstrap/responsive layouts.
Just my opinion.

Jerry might you have a sample of table grid bootstrap custom css you use... an example would go a long ways in deciphering what's what

Thanks

Mark

I am actually working on one now.
My customer wants a lot of fields as the default on the list pages (with ability to have users decide what to show). He also does not want wrapping to occur. He said he wants it more excel-like.
So here is what I did.
Version 9.8

Layout: Bootstrap1

Theme: Simplex

Add/Edit/View pages layout: Bootstrap_Menu
Custom CSS:
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {

padding: 2px;

line-height: 1.42857143;

vertical-align: top;

border-top: 1px solid #ecf0f1;

white-space: nowrap;

}
[data-brick=grid] {
font-size: 12px;
}
.panel-info > .panel-heading {

color: #c00009;

background-color: #029acf;

border-color: #333333;

}

.panel-info {

border-color: #333333;

}

.btn-info, .btn-info:hover {

background-image: linear-gradient(#333333, #333333 100%, #333333);
border: 1px solid #333333;

}
.btn-info.active, .open > .dropdown-toggle.btn-info {

color: #ffffff;

background-color: #000000;

border-color: #000000;

}
.panel-info > .panel-heading {

color: white;

background-color: #c00009;

border-color: #333333;

}

.rnr-bl a {

color: #ffffff;

}
.rnr-bl a:hover {

color: #ffffff;

text-decoration: underline;

}

Thank you Jerry I spent a few hours yesterday using your CSS and it did greatly improve the amount of information on the List pages. Just need to figure out how to do the same in the modal add / edit and view pages.
I did note that the responsive design of bootstrap makes the form designer in ASPRunner.net surplus. (Possibly just me)

Hi all,
I would like to have more control over layout in desktop and mobile bootstrap. Maybe seperate templates...
All the best,
Jack

For those of us who are not as knowledgeable as experts who have posted comments, can someone explain:

1. What is 'bootstrap' ?
   
2. What are the benefits of using bootstrap?

Bootstrap is a framework offering CSS and Javascript elements plus glyphicons for designing responsive Websites.

PHPRunner is integrating this framework for the new layout styles and can this way create responsive database solutions.

@jadach
Many thanks for sharing yours. As time goes by and as seen always in the past on any eye-catching web presentation technology: Lots of partially free templatess are appearing in the market, e.g. I think the following free one:
http://demo.themewagon.com/preview/html5-css3-bootstrap-responsive-template-free-download
would be ideal to become the first on wihtin an initial PHPR collection of free templates to choose from in future, moreover it already contains of what counts within the automobile sales industry, e.g. search by category, age etc pp and so, let me just guess, somewhere in 2018 we shall have most probably forgotten MANUAL modifications of bootstrap, but just take "preety clothes" from the built-in ward. And while bootstrap 4.0 is still in ALPHA 6 phase, yet so far uncommon terms like SASS and FLEX shall become our daily bread and butter somewhere in 2018 too and so ..., PHPR users still continue to have more fun (than others on else products).

We went thru the same heartache... we had to redo the screens, but the source code all came over. It's well worth the effort, and if going to go thru with it, and since screens will need to be re-worked, going to bootstrap for sure the way to go in the process...
Mark @ Stillwater Mining

Jerry
I was able to make the buttons small by modifying all buttons with the btn-xs modifier ( see below )
https://screencast.com/t/ZCVaff6bPw ( screen shot ) JING by TECHSMITH ubiquitous as long as have internet connection
I was able to reduce the table padding by 1/2 using the < table class="table-condensed class vs < table class="table ....
I was then in runtime mode in FireFox using Developer tool able to get the table down to size I could use modifying the css for the padding from 5px to 1px and the font size from 14px to 10px
https://screencast.com/t/AyGhXTe1ABqX ( screen shot )
Then concluded, since I was only able to mod ( nor wish to ) mod the css in runtime for the bootstrap template that having a "SMALL" version of a bootstrap would be best
Not sure how / what mods you are using to make a bootstrap usable for highly field / row tables?
Best

Mark

Stillwater Mining

Just to be clear. Most all my projects do not need to be tweaked like this. It's only once in awhile where you need to jam a whole lot of stuff onto one screen. Only then I add this type of custom css. To me, the appearance of a modern design is very important, so that is why I ONLY use Bootstrap layouts.
It would be a good idea for Xlinesoft to add a layout for data intense screens. But even if they don't, you have control to do it yourself.
One thing I am learning is, how to use less visible data while giving users what they need.

Using the latest version of ASPR. I switched to Bootstrap because of the better-rendered graphics and more modern layout. As far as text-size is concerned, I've simply trained my users to use ctrl-wheelmouse. And if you use a Mac, well then it's some other combination of buttons and strokes.
However, the first thing I noticed is that not all widgets work with IE11, in particular the inline calendar widget, and they worked fine in the non-bootstrap version, in IE11. It's strange, because this issue was last brought up in 2011. I haven't resolved the issue. Here is the unresolved post:
http://www.asprunner.com/forums/topic/16573-time-picker-on-internet-explorer-ie/
The other odd behaviour is that I can't "shrink details" from another sub-tab other than from the tab for which the number of records is indicated.
If anyone has any insight or advice on these issues, I thank you in advance.

Just did a test. I only use the popup calendar, but that works fine in IE11 on Windows 10, Creators Update.

Thanks for the check. This must be an Azure issue. My web apps are all in Azure.

I am doing more with bootstrap and the responsiveness is nice BUT it advertises itself as a mobile first development framework.
I do think you should have an option optimized for desktop first web applications. Mobile first development platforms advertising better way to do contact forms are legion.

In the light of many comments related to creating a new scheme that is more suitable for large amount of fields and large forms check this:

http://demo.asprunner.net/kornilov_gmail_com/Northwindv90v96v971v98/orders_list.php
Is this a step in the right direction?
What specific changes are still required to make it useful?

I can only speak for myself but yes this is very good

What specific changes are still required to make it useful?

a)Masters Detail forms in the same vein (I couldn't see an example)

b)Ability to select centred - container-fluid layout so people on wide screens don't have left over space either on sides or on one side

c)Data rich Modals that can make use of screens wider than 1170 and if possible master details in centred data rich modals.
Apologies only getting into bootstrap so only say sorry if I am asking for things that fundamentally conflict with the framework.

@admin - Optimal work around at fixed 12 font size display in LIST page, good readable under 22 inch monitors. Question remains: Would/could it finally become a special BOOTSTRAP Template to choose from in the STYLE menu, covering all over outside LIST mode (say e.g. ADD, EDIT, VIEW)? I look specifically at DASHBOARD design where quite a number of tabled content needs to find "readable" space on 22+ inch monitor.

Yes it is very good.

@admin
Perhaps it would be a good idea to offer some very basic options for changing the CSS in a gui like way.
I guess many people would be pleased to see
Standard font and font size

Background color of menu

Color for standard buttons
as GUI entries in the style screen.

Looks very good and I agree with mbintex - a few basic gui options would be good.

...for the moment perhaps helpful?
[img]https://greenapp.nl/gav9/images/Edit CSS of Bootstrap Style.jpg[/img]
*

Make a copy of a Style.

C:\Program Files\PHPRunner9.8\styles\bootstrap\yetirw\css
(yetirw is the copy)
Change the CSS.

1. bootstrap-theme.min (a.o. the font-size)
   
2. tweaks (a.o. the color of the breadcrump, sidebar-menu...)
   Simple example of an application based on the changed yeti style: http://www.fvrt.nl/favorieten/
   
   You can login as a demo user.

Thank you Ruud

This is awesome! Bootstrap is a must to go forward and phpr is in a very good direction.

i upgraded to 9.6 due to bootstrap theme.
I also took pain to migrate the old themes, reset all the pages and redo the manual edits.
It is 120% worth the effort.
But with a smaller fonts, it will be fantastic.
On the side note:
Please consider possibility of generating REST APIs for the PHPR app. i.e. we not only can generate

the PHP scipts, but also can select a table or 2 to receive API calls, which can open to 3rd party to send REST request

and have events to manipulate the API calls. This will also make it native mobile app ready.
Thank you.

ACP

i am 100% with you on that. Plus bootstrap makes mobile device friendly - very important factor for business -

Nowadys they first see if the site work friendly on mobile, if it does not, they will turn their head away,

no matter how many bells and whistles you have.
Any site that is not mobile friendly, especially involving data entry, it is a pain and customer hates that.
ACP

Hi Sergey,
It is very good. It will be good if you can put this up as a blog, so we can use it as a guideline.

i am sure all of us will celebrate for this.
Also, if you can make the top header bar sticky, currently, if there are many fields,

when you scoll to the right, the header menu bar is not shown, this look un-mobile-friedly.

In fact, all the template have the same issue, when there are many fields and when we scoll right, it break the fluid mobile look.

Try using your mobile and scroll to the right to see.
Many thanks for a wonderful product.
ACP

We love the Bootstrap support, and we will be using it for new development going forward.
My request would be to improve Bootstrap with the use of the Free Form editor. We have a case where it doesn't work for us.
But, again, we love that Bootstrap was added.