Floating Action Buttons - List Options (v2021/2022)

[Niijimasama]

HI ALL.

This experiment was developed with the intention of solving two problems I had:

1. Aesthetics: Having something different from dropdown buttons or individual buttons

2. Space Optimization: Default buttons took up more space than I wanted especially for mobile interfaces.

RESOURCES USED:
A) Bootstrap Icons
B) CSS
C) Codepen

STEPS TO FOLLOW

• Using CSS or javascript, hide the default links master/detail or otherwise.

• Add the CSS below to HTML-> Styles -> User

  $primary: rgb(75, 162, 255);
  .fab-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    user-select: none;
    position: relative;
   &:hover {
      height: 10%;
      width: 100%;
      .sub-button:nth-child(2) {
          transform: translateX(60px);
      }
      .sub-button:nth-child(3) {
          transform: translateX(120px);
      }
      .sub-button:nth-child(4) {
          transform: translateX(180px);
      }
      .sub-button:nth-child(5) {
          transform: translateX(240px);
      }
      .sub-button:nth-child(6) {
          transform: translateX(300px);
      }
    }
    .fab {
      position: relative;
      height: 50px; width: 50px;
      background-color: $primary;
      border-radius: 50%;
      z-index: 2;
      &::before {
        position: absolute;
        bottom: 0; left: 0;
        height: 40px; width: 40px;
        background-color: inherit;
        border-radius: 0 0 10px 0;
        z-index: -1;
      }
      .fab-content {
        display: flex;
        align-items: center; justify-content: center;
        height: 100%; width: 100%;
        border-radius: 50%;
        .bi {
          color: white;
          font-size: 16px;
        }
      }
    }
    .sub-button {
      position: absolute;
      display: flex;
      align-items: center; justify-content: center;
       height: 40px; width: 40px;
      background-color: $primary;
      border-radius: 50%;
      transition: all .3s ease;
      &:hover {
        cursor: pointer;
      }
      .bi {
        color: white;
        padding-top: 6px;
      }
    }
  }

• Go to Server Events->Table Specific -> List Page-> ListOptions_Load and add a list item e.g.

         $opt = &$this->ListOptions->Add("my_fabs");// change my_fabs to identifier of choice
  	$opt->OnLeft = TRUE; // Link on left

• Go to Server Events->Table Specific -> List Page-> ListOptions_Rendered and define a list item e.g.

      $this->ListOptions->Items["my_fabs"]->Body ="<div class='fab-container'>
            <div class='fab shadow'>
              <div class='fab-content'>
                <i class='bi bi-chevron-right'></i>
              </div>
            </div>
            <div class='sub-button shadow'>
              <a href='master_tableedit/".urlencode($this->id->CurrentValue)."?showdetail=detail_table'>
                <i class='bi bi-pen'></i>
              </a>
            </div>
            <div class='sub-button shadow'>
              <a href='#' onclick='ew.modalDialogShow({lnk:this,url: \"master_tableview/".$this->id->CurrentValue."?showdetail=detail_table\",btn: \"ViewBtn\"});'>
                <i class='bi bi-file-earmark-text'></i>
              </a>
            </div>
            <div class='sub-button shadow'>
              <a href=\"#\" onclick=\"return ew.submitAction(event, {action: 'end', method: 'ajax', msg: 'Close " .$this->id->CurrentValue." & Refresh?', key: " . $this->KeyToJson() . ", success: refreshListTable});\"'>
                <i class='bi bi-cash-coin'></i>
              </a>
            </div>
          </div>";

In my example, I have links for the following:
A) MasterDetail Edit link
B) MasterDetail View [modal]
C) Link to perform custom ajax action (define your code in Row_CustomAction)

ENJOY.

NOTES:

1. Hover event translates to a click event on mobile interfaces
2. Identifiers "master_table" and "detail_table" should be replaced with the names of your respective master/detail tables
3. Success function "refreshListTable" is user defined (javascript )at Client Scripts-> Global -> Pages with header/footer -> Global Code

[neodaemon]

Thanks for submitting this. I was curious to try it so I copy/pasted as-is for a master/detail list page. When trying to browse, I get this error:
Warning: Attempt to read property "CurrentValue" on null in (mylist.php) line 3099
Referring to this line from your code:
<a href='master_tableedit/".urlencode($this->id->CurrentValue)."?showdetail=detail_table'>

I'm using PHPMaker 2022

[Niijimasama]

You need to change the details to match your table names and column(s).
EG. if master table = company, product = product_no & detail table = stock_count, the code would change to:
<a href='companyedit/" . urlencode($this->product_no->CurrentValue) . "?showdetail=stock_count'>