Floating Action Buttons - List Options (v2021/2022)

Tips submitted by PHPMaker users
Post Reply
Niijimasama
User
Posts: 85

Floating Action Buttons - List Options (v2021/2022)

Post by 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
User
Posts: 61

Post by 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
User
Posts: 85

Post by 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'>


Post Reply