Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Reset the Tab Order?
#1
I'm redesigning some IW forms using Bootstrap and I couldn't figure out yet how to reset the Tab Order. I assigned at design time a certain Tab Order for each form input in the old design and now, using Bootstrap the Tab Order needs to be changed. Being lazy (and in the same time wanting to keep the old design working), I'm trying to modify all the controls on all the forms in code, depending of what style I'm using and loading the corresponding template for each style. I tried setting Tab Order to 0 and to -1 when I load the BS design, but it seems that the old Tab Order is still there, any idea why and how to fix this?

Here is my code that deals with changing the components style at run time:

Code:
procedure ApplyBSStyle(AForm: TIWAppForm);
var
 sLst: TStringList;
begin
 if (UserSession.LevelString <> 'USER') and
   (UserSession.ReceivedLevelString <> 'USER')
 then
   Exit;

 if (not UserSession.IsMobile) and (not UserSession.IsNewDesign) then
   Exit;

 sLst := TStringList.Create; // get a list of all controls, we might need to create the template
 try
   with AForm do
   begin
     for var i := 0 to AForm.ComponentCount - 1 do
     begin
       if Components[i] is TIWCustomControl then
       begin
         var curCtrl := Components[i] as TIWCustomControl;
         sLst.Add('{%'+curCtrl.Name+'%}');
         curCtrl.StyleRenderOptions.RenderSize := false;
         curCtrl.StyleRenderOptions.RenderPosition := false;
         curCtrl.StyleRenderOptions.RenderFont := false;
         curCtrl.StyleRenderOptions.RenderVisibility := false;
         // seems that RenderStatus is required for BS to work
         //curCtrl.StyleRenderOptions.RenderStatus := false;
         curCtrl.StyleRenderOptions.RenderAbsolute := false;
         curCtrl.StyleRenderOptions.RenderZIndex := false;
         curCtrl.StyleRenderOptions.RenderPadding := false;
         curCtrl.StyleRenderOptions.RenderBorder := false;
         // TabOrder doesn't seem to work...
         curCtrl.TabOrder := 0; //<--???

         if curCtrl is TIWButton then
         begin
           // first digit is the btn style and the second digit is 1 = btn-block, 0=none
           var first_digit := StrToIntDef(curCtrl.Tag.ToString[1], 0);
           var second_digit := StrToIntDef(curCtrl.Tag.ToString[2], 0);
           case first_digit of
             1: curCtrl.Css := 'btn';
             2: curCtrl.Css := 'btn btn-default';
             3: curCtrl.Css := 'btn btn-primary';
             4: curCtrl.Css := 'btn btn-success';
             5: curCtrl.Css := 'btn btn-info';
             6: curCtrl.Css := 'btn btn-warning';
             7: curCtrl.Css := 'btn btn-danger';
           else
             curCtrl.Css := 'btn btn-primary'
           end;
           if second_digit = 1 then
             curCtrl.Css := curCtrl.Css + ' btn-block';
         end
         else if curCtrl is TIWLabel then
           curCtrl.Css := 'control-label'
         else if curCtrl is TIWComboBox then
           curCtrl.Css := 'form-control'
         else if curCtrl is TIWEdit then
           curCtrl.Css := 'form-control'
         else if curCtrl is TIWText then
           curCtrl.Css := 'form-control'
         else if curCtrl is TIWMemo then
           curCtrl.Css := 'form-control'
         else if curCtrl is TIWCheckBox then
           curCtrl.Css := 'checkbox-inline'
         else if curCtrl is TIWRadioGroup then
           curCtrl.Css := 'radio'
         else if curCtrl is TIWRadioButton then
           curCtrl.Css := 'radio'
         else if curCtrl is TIWListbox then
           curCtrl.Css := 'form-control'
         else if curCtrl is TIWImageFile then
           curCtrl.Css := 'img-responsive'
         else if curCtrl is TIWDBGrid then
           curCtrl.Css := 'table-hover table-striped table-bordered';
       end
       else if Components[i] is TIWTemplateProcessorHTML then
       begin
         // for now, keep the jQueryMobile style for the mobile version of the page
         if UserSession.IsMobile then
         begin
           (Components[i] as TIWTemplateProcessorHTML).Templates.Default := 'mobi'+AForm.Name+'.htm';
           StyleSheet.Filename := '';
         end
         // use the BS style if the user wants the new design
         else if UserSession.IsNewDesign then
         begin
           (Components[i] as TIWTemplateProcessorHTML).Templates.Default := 'BS'+AForm.Name+'.htm';
           StyleSheet.Filename := '';
         end;
         (Components[i] as TIWTemplateProcessorHTML).RenderStyles := false;
         (Components[i] as TIWTemplateProcessorHTML).Enabled := true;
       end;
     end;
   end;
   // if there isn't already a template for this page, save all the controls into a text file
   // with the name of the expected template to which the BS head can be added
   if not FileExists(WebApplication.ApplicationPath + 'Templates' + PathDelim + 'BS'+AForm.Name+'.htm') then
     sLst.SaveToFile(WebApplication.ApplicationPath + 'Templates' + PathDelim + 'BS'+AForm.Name+'.htm');
 finally
   sLst.Free;
 end;
end;
Reply
#2
Hi Ioan,

Setting Tab order at run time usually works fine (I don't have any recollection of issues in that area and I've done it myself in several projects).
You are using a template which uses boostrap, correct (not IWBootstrap components)? Does your template contain any tab order information (i.e. there's no tabindex attributes there)?
Reply
#3
Hi Alexandre,

I'm using templates that use bootstrap, I'm not using the IWBootstrap. My template doesn't have any tab order information, but the IW components are rendered with the TabOrder that I configured at design time, even if I try to replace the value with 0 or -1 at run time.
Here is an example from one form's page source of a rendered control, even if, at run time, I set the TabOrder := 0:

Code:
<input CLASS="form-control" ID="ESUBJECT" NAME="ESUBJECT" STYLE="" TabIndex="8" TYPE="TEXT">

The question is, is there a way to not render the TabIntex, or to force it to be 0 for all rendered controls?
Reply
#4
(05-28-2019, 10:10 AM)ioan Wrote: Hi Alexandre,

I'm using templates that use bootstrap, I'm not using the IWBootstrap. My template doesn't have any tab order information, but the IW components are rendered with the TabOrder that I configured at design time, even if I try to replace the value with 0 or -1 at run time.
Here is an example from one form's page source of a rendered control, even if, at run time, I set the TabOrder := 0:

Code:
<input CLASS="form-control" ID="ESUBJECT" NAME="ESUBJECT" STYLE="" TabIndex="8" TYPE="TEXT">

The question is, is there a way to not render the TabIntex, or to force it to be 0 for all rendered controls?

The tab order can be a real pain.  I think you have to set all of the tab orders in the onrender of the form to get it to work.   However, it would really help if you could force the tabindex to be 0.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)