I need support to change all code i used to substitute grids with lists. I tried to install v3.0.0 beta6 and all forms with grids doesn't work... Here is an example of code i used...

lparameters void_parameter_reminder_implement_your_Refresh_code_in_this_method

if !(lProperty(this, 'wcIdBs') and ga_Type_IsChar(this.wcIdBs, .T.))
	return
endif

Local abSelect, abRecno, abPoint, abSep, cTxtID, cChkID, cHTML, cScript, nTabIndex

cHTML = ''
nTabIndex = 10
If Used("tCosop")
	Select tCosop
	Go Top
	abRecno  = abRecno('tCosop') && restores recno() automatically
	abSelect = abSelect('tCosop') && restores select() automatically
	abPoint = abSet('point', '')
	abSep = abSet('separator', '')
	cTxtID = wcID(this.column7.txt)
	
	Scan && always starts at BOF(); you can use SCAN FOR to filter
		TEXT to cHTML textmerge additive noshow flags 3
			<div class="col-sm-12 panel panel-default" data-rowid="<<Recno("tCosop")>>">
				<div class="riga" role="tab">
	                <div class="col-sm-1 btn-group btn-group-main-apps " data-rowid="<<Recno("tCosop")>>">
                        <button class="btn btn-default btn-list-select" id="<<wcId(This.Column8._CommandButton1)>>">
                        <span class="fa fa-minus-circle fa-1x" aria-hidden="true"></span>
                        </button>
					</div>
	                <div class="col-sm-1 btn-group btn-group-main-apps " data-rowid="<<Recno("tCosop")>>">
                        <button class="btn btn-default btn-list-select bt2_class" id="<<wcId(This.Column4._CommandButton1)>>">
                        <span class="fa fa-search fa-1x" aria-hidden="true"></span>
                        </button>
					</div>
					<div class="lead col-sm-3 list-title"><<allTrim(tCosop->Des1)>></div>
					<div class="lead col-sm-3 list-title"><<allTrim(tCosop->Ddip)>></div>							
					<div class="lead col-sm-2 list-title" style="text-align:right;"><<tCosop->Qta>></div>
					<input type="number" step="1.00" class="lead col-sm-2 list-title border <<m.cTxtID>>" value="<<tCosop->N_ore>>" step="1.00" tabindex="<<m.nTabIndex>>">
				</div>
			</div>
		EndText
		nTabIndex = m.nTabIndex + 2

	EndScan
Endif

TEXT to cScript textmerge noshow flags 3
	jQuery("#<<This.wcIdBs>>").html(<<cLitteralJS(m.cHTML)>>)

	jQuery("button.bt2_class").on('click', function() {
				let rowId = jQuery(this).parent().attr("data-rowid");
				jQuery.proxy(FoxInCloud.DOMEvent,FoxInCloud)(rowId,false,event);
			});

	var EventRequest = jQuery.proxy(FoxInCloud.EventRequest, FoxInCloud);
	jQuery("#<<This.wcIdBs>> div.panel").each(function(idx, elem){elem.addEventListener('click', function(event) {EventRequest(
			  "DOMEvent"
		  , event
		  , this
		  , jQuery(this).data("rowid")
		  , "<<this.wcID>>"
			)}, true);});

	var mousedown = false;
	jQuery("#<<This.wcIdBs>> .<<m.cTxtID>>")
		.mousedown(function(){
    	mousedown = true;
		})
		.focus(function(event) {var row = this.parentElement.parentElement; !mousedown && EventRequest(
			  "DOMEvent"
		  , 'click'
		  , row
		  , jQuery(row).data('rowid')
		  , "<<this.wcID>>"
			);
			mousedown=false;
			})
		.blur(function(event) {EventRequest(
			  "DOMEvent"
		  , event
		  , this
		  , jQuery(this).val()
		  , "<<m.cTxtID>>"
			);});
ENDTEXT

thisForm.wcScriptJSadd(m.cScript)

I know thta boostrap 5 is not compatible with previous versions as Thierry has written in message that was sent with new version, but i need some help...

Thanks

"not working" without detail does not help about what you get compared to what you expect.

Again and again, when asking questions about code, please provide screenshots, developer tools views, something that we can work upon to understand what needs a fix.

In How To Ask Questions The Smart Way

Don't ask others to debug your broken code without giving a hint what sort of problem they should be searching for. Posting a few hundred lines of code, saying "it doesn't work", will get you ignored. Posting a dozen lines of code, saying "after line 7 I was expecting to see , but occurred instead" is much more likely to get you a response.

The most effective way to be precise about a code problem is to provide a minimal bug-demonstrating test case. What's a minimal test case? It's an illustration of the problem; just enough code to exhibit the undesirable behavior and no more. How do you make a minimal test case? If you know what line or section of code is producing the problematic behavior, make a copy of it and add just enough supporting code to produce a complete example (i.e. enough that the source is acceptable to the compiler/interpreter/whatever application processes it). If you can't narrow it down to a particular section, make a copy of the source and start removing chunks that don't affect the problematic behavior. The smaller your minimal test case is, the better (see the section called “Volume is not precision”).

Generating a really small minimal test case will not always be possible, but trying to is good discipline. It may help you learn what you need to solve the problem on your own — and even when it doesn't, hackers like to see that you have tried. It will make them more cooperative.

If you simply want a code review, say as much up front, and be sure to mention what areas you think might particularly need review and why.

I am sure you have already encountered the problem i am having. The code i use is the same suggested by Foxinloud team to make our app responsive and bootstrapped, but with previous versions.... In next days i'll post a screencast for older version, working fine, and new version, not working....

Thanks in advance

As mentioned earlier, we also need to see the CSS panel from browser developer tools

Here is the correct form with fic 2.31 and here after i expand the row and here is the same form with fic 3.0 where i can't expand the single row

and where i have also problems with all buttons in the top of the form

This is the code of the grid

Lparameters toHTMLgen As awHTMLgen Of awHTML.prg, tlInnerHTML && {en} doc in Parent Code {fr} doc dans le code parent

If Thisform.wBSlHTMLgen
	Local cScript

	This.AddProperty("wcIdBs",This.wcID + "_bs")
	This.wcHTML = [<div class="panel-group" id="] + This.wcIdBs + [" role="tablist" aria-multiselectable="true">]
	*This.wcHTML = [<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">]
	If Used(This.RecordSource)
		nRow = 0
		Scan
			nRow = nRow + 1
			cRow = Padl(nRow,3,"0")

			cCli = Iif(!Empty(Apps->dCli),[<p class="lead list-subtext">] + Alltrim(Apps->dCli) + [</p>],[])
			cCan = Iif(!Empty(Apps->dCan),[<p class="lead list-subtext">] + "Cantiere: " + Alltrim(Apps->dCan) + [</p>],[])
			cDea = Iif(!Empty(Apps->Dea),[<p class="lead list-subtext">] + "Appuntamento: "  + Alltrim(Apps->Dea) + [</p>],[])
			cDco = Iif(!Empty(Apps->_Dsd),[<p class="lead list-subtext">] + "Commessa: " + Alltrim(Apps->_Dsd) + [</p>],[])
			cSta = Iif(!Empty(Apps->_AttSta),[<p class="lead list-subtext">] + "Stato: " + Alltrim(Apps->_AttSta) + [</p>],[])
			cBtn = Iif(Apps->_Tip=1,Textmerge([<button class="btn btn-default" id="<<wcId(This.Column12.bt1)>>"><span class="fa fa-sitemap fa-1x" aria-hidden="true"></span></button>]),[])

			TEXT to This.wcHTML textmerge additive noshow flags 1

				<div class="panel panel-default">
					<div class="panel-heading" role="tab" id="<<This.wcIdBs>>heading<<cRow>>">
							<a class="collapsed panel-title" role="button" data-toggle="collapse" data-parent="#<<This.wcIdBs>>" href="#<<This.wcIdBs>>collapse<<cRow>>" aria-expanded="false" aria-controls="<<This.wcIdBs>>collapse<<cRow>>">
								<p class="lead list-title"><b>dalle <<Apps->Dalle>> alle <<Apps->Alle>></b></p>
								<<cCli>>
							</a>
					</div>
					<div id="<<This.wcIdBs>>collapse<<cRow>>" class="panel-collapse collapse panel-body" role="tabpanel" aria-labelledby="<<This.wcIdBs>>heading<<cRow>>">
							<<cCan>>
							<<cDea>>
							<<cDco>>
							<<cSta>>
					                <div class="col-xs-12 col-sm-6 btn-group btn-group-main-apps" data-row="<<Apps->Id>>">
					                        <button class="btn btn-default btn-main-apps" id="<<wcId(This.Column5._Commandbutton1)>>">
					                        <span class="fa fa-clock-o fa-1x" aria-hidden="true"></span>
					                        </button>
					                        <button class="btn btn-default btn-main-apps" id="<<wcId(This.Column6._Commandbutton1)>>">
					                        <span class="fa fa-industry fa-1x" aria-hidden="true"></span>
					                        </button>
					                        <button class="btn btn-default btn-main-apps" id="<<wcId(This.Column7._Commandbutton1)>>">
					                        <span class="fa fa-pencil fa-1x" aria-hidden="true"></span>
					                        </button>
					                        <button class="btn btn-default btn-main-apps" id="<<wcId(This.Column11._Commandbutton1)>>">
					                        <span class="fa fa-file fa-1x" aria-hidden="true"></span>
					                        </button>
					                        <button class="btn btn-default btn-main-apps" id="<<wcId(This.Column13._Commandbutton1)>>">
					                        <span class="fa fa-print fa-1x" aria-hidden="true"></span>
					                        </button>
					                        <button class="btn btn-default btn-main-apps" id="<<wcId(This.Column14._Commandbutton1)>>">
					                        <span class="fa fa-android fa-1x" aria-hidden="true"></span>
					                        </button>
											<<cBtn>>
					                </div>
					</div>
				</div>

			EndText
		EndScan
	Endif
	This.wcHTML = This.wcHTML  + [</div>]

	TEXT to cScript textmerge noshow flags 1
		jQuery("#<<This.wcIdBs>> button").click(function(event) {
			var rowId = jQuery(this).parent().data("row");
			jQuery.proxy(FoxInCloud.DOMEvent,FoxInCloud)(rowId,false,event);
			})
	ENDTEXT
	If Vartype(toHTMLgen) = "O" &&Intial HTML generation
		toHTMLgen.cScriptJsAdd(cScript)
	Else
		toHTMLgen = cScript
	EndIf
	
	
Endif

Ciao Michele,

1- Your list/grid uses .panel, .panel-default and .panel-heading that Boostrap 4 has deprecated

Please see how the V 3.0 dashboard implements a similar list

2- For your .btn-group at top of page, add this CSS rule :

flex-wrap: wrap;

Is it possible to have, as an example, your dashboard grid code ? To see not only the html section, but even where you intercept clicks on buttons....

modify command awServer.prg lines 6887 to 6926