HI ALL.This experiment was developed with the intention of solving two problems I had:
- Aesthetics: Having something different from dropdown buttons or individual buttons
- Space Optimization: Default buttons took up more space than I wanted especially for mobile interfaces.
RESOURCES USED:
A) Bootstrap Icons
B) CSS
C) CodepenSTEPS 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:
- Hover event translates to a click event on mobile interfaces
- Identifiers “master_table” and “detail_table” should be replaced with the names of your respective master/detail tables
- Success function “refreshListTable” is user defined (javascript )at Client Scripts-> Global → Pages with header/footer → Global Code