Create Custom Master/Detail Links

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

Create Custom Master/Detail Links

Post by Niijimasama »

I created this as I needed to customize my interface that works on both Desktop & Mobile without display issues plus I could not change the label of the ADD Master/Detail button.

I used CSS + PHP instead of JQUERY+PHP. While Jquery works as well, it has the limitation of being executed AFTER the DOM is loaded i.e. the objects will be rendered before they are hidden, which looks off especially if the production environment isn't fast.

**NOTE*** THIS METHOD ALSO HIDES THE BUTTONS IN DETAIL TABLES OF MASTER DETAIL FORMS, EXCEPT THE ADDROW BUTTON*********

Requirements:

  1. Friconix ICON pack(Optional)

  2. In PHP -> Page Options settings, uncheck 'Use button dropdowns for links' & 'Use button dropdown in paging section'

METHOD.

1a. Go to HTML->Styles->User and add the following:


 /*MOVE MASTER/DETAIL EDIT.COPY,DELETE BUTTONS OUT OF VIEW PORT*/
  a.btn.btn-default.ew-detail-add-group.ew-detail-add,th.ew-list-option-header.text-nowrap, td.ew-list-option-body.text-nowrap{
  position: absolute;
  top: -9999px;
  left: -9999px;
  }

1b. Go to Client Scripts -> Table-Specific -> List-Page -> Startup_Script and add:

$(document).ready(function() {
// HIDE MASTER DETAIL ADD OR ANY ADD LINKS
	$('a.btn.btn-default.ew-detail-add-group.ew-detail-add').hide();
	$("th.ew-list-option-header.text-nowrap").hide();
	$("td.ew-list-option-body.text-nowrap").hide();/
});		  

1b. (Optional)Link to friconix icons by going to Server Events -> Global -> All_pages and add script link


  1. Go to Server-Events -> Table-Specific -> List-Page -> ListOptions_Load and add the following to create your link. In this example, a master/detail edit link


    $opt = &$this->ListOptions->Add("my_edit"); //
    $opt->OnLeft = TRUE; // Link on left

  2. Go to Server-Events -> Table-Specific -> List-Page -> ListOptions_Rendered and add logic for the link. In this example, a master/detail edit link

    $this->ListOptions->Items["my_edit"]->Body = "<a href='myheader_headeredit.php?showdetail=mydetail_lines&id=".urlencode($this->id->CurrentValue)."'><i
    class='fi-cwsux2-pen'></i> </a>";

  3. To add a master/detail add button, go to Server-Events -> Table-Specific -> List-Page -> Page_Render and add the following code:


    //CUSTOM MASTER DETAIL ADD BUTTON

    $this->OtherOptions["addedit"]->UseDropDownButton = FALSE;
    $this->OtherOptions["addedit"]->ShowInButtonGroup = FALSE;
    $options = &$this->OtherOptions;
    $option = $options["action"];
    $item = &$option->Add("myadd_link");
    $item->Body = "<a class=\"ewAction btn btn-success\" href=\"myheader_headeradd.php?showdetail=my_details_lines\"><i class=\"fi-cwsup2-plus-solid\" data-caption=\"Create My Details\"></i>Create My Details</a>";
    $item->Visible = TRUE;


Niijimasama
User
Posts: 85

Post by Niijimasama »

I have refined the code a bit.

replace the CSS above with:

a.btn.btn-default.ew-add-edit.ew-add,a.btn.btn-default.ew-detail-add-group.ew-detail-add,
th.ew-list-option-header.text-nowrap[data-name="edit"],td.ew-list-option-body.text-nowrap[data-name="edit"],
th.ew-list-option-header.text-nowrap[data-name="view"],td.ew-list-option-body.text-nowrap[data-name="view"],
th.ew-list-option-header.text-nowrap[data-name="copy"],td.ew-list-option-body.text-nowrap[data-name="copy"],
th.ew-list-option-header.text-nowrap[data-name="detail_tbl_name"],td.ew-list-option-body.text-nowrap[data-name="detail_tbl_name"],{
position: absolute;
top: -9999px;
left: -9999px;
}

This will allow you to specifically target the menu items using there data-name attribute and not hide the DELETE ROW icon from the detail table.
NOTE: REPLACE detail_tbl_name WITH THE data-name OF YOUR DETAIL TABLE.


alex005
User
Posts: 7

Post by alex005 »

Perfect solution. Could you tell me how to hide the buttons depending on the user's access level? Now the button is always displayed, even if the user does not have the appropriate permissions.


Niijimasama
User
Posts: 85

Post by Niijimasama »

Niijimasama wrote:
I have refined the code a bit.

replace the CSS above with:

a.btn.btn-default.ew-add-edit.ew-add,a.btn.btn-default.ew-detail-add-group.ew-detail-add,

th.ew-list-option-header.text-nowrap[data-name="edit"],td.ew-list-option-body.text-nowrap[data-name="edit"],

th.ew-list-option-header.text-nowrap[data-name="view"],td.ew-list-option-body.text-nowrap[data-name="view"],

th.ew-list-option-header.text-nowrap[data-name="copy"],td.ew-list-option-body.text-nowrap[data-name="copy"],

th.ew-list-option-header.text-nowrap[data-name="detail_tbl_name"],td.ew-list-option-body.text-nowrap[data-name="detail_tbl_name"],{
position: absolute;
top: -9999px;
left: -9999px;
}

This will allow you to specifically target the menu items using there
data-name attribute and not hide the DELETE ROW icon from the detail table.
NOTE: REPLACE detail_tbl_name WITH THE data-name OF YOUR DETAIL TABLE.

Update 14th January 2020
Found that the custom master detail add button does not appear when a table is empty i.e. the list page.
As I find a solution, I have provided code to append the button to the toolbar: (tested on phpmaker 2020.0.9)

Go to Client_Scripts->Table Specific->List Page-> Startup Script and add the following line of code:

$(".btn-toolbar.ew-toolbar").append('<a id="md_add" class="btn btn-light" href=myheader_headeradd.php?showdetail=my_details_lines"><i class="fi-cwsux2-plus-solid" data-caption="YOUR CAPTION"> </i> YOUR LABEL</a>');


Niijimasama
User
Posts: 85

Post by Niijimasama »

alex005 wrote:
Perfect solution. Could you tell me how to hide the buttons depending on
the user's access level? Now the button is always displayed, even if the
user does not have the appropriate permissions.

Hi,

you can hide the add button conditionally by editing the code as below:

if(CurrentUserLevel() == ){ // represents the user level
$item->Visible = FALSE;
}else{
$item->Visible = TRUE;
}

To hide the edit button:

if(CurrentUserLevel() == **){  //** represents the user level
$this->ListOptions->Items["my_edit"]->Body = "<a href='myheader_headeredit.php?showdetail=mydetail_lines&id=".urlencode($this->id->CurrentValue)."'><i

class='fi-cwsux2-pen'></i> </a>";
}else{
$this->ListOptions->Items["my_edit"]->Body = "";
/* OPTIONAL CODE
$this->ListOptions->Items["my_edit"]->clear();
*/
}


Niijimasama
User
Posts: 85

Post by Niijimasama »

Niijimasama wrote:
alex005 wrote:
Perfect solution. Could you tell me how to hide the buttons depending on
the user's access level? Now the button is always displayed, even if the
user does not have the appropriate permissions.

Hi,

you can hide the add button conditionally by editing the code as below:

if(CurrentUserLevel() == ){ // represents the user level
$item->Visible = FALSE;
}else{
$item->Visible = TRUE;
}

To hide the edit button:

if(CurrentUserLevel() == **){  //** represents the user level
$this->ListOptions->Items["my_edit"]->Body = "<a

href='myheader_headeredit.php?showdetail=mydetail_lines&id=".urlencode($this->id->CurrentValue)."'><i
class='fi-cwsux2-pen'></i> </a>";
}else{
$this->ListOptions->Items["my_edit"]->Body = "";
/* OPTIONAL CODE
$this->ListOptions->Items["my_edit"]->clear();
*/
}

ALTERNATIVELY, you can use the Security() function to hide the buttons:

To hide the edit button:

if(Security()->canEdit()) {  //has edit permission
$this->ListOptions->Items["my_edit"]->Body = "<a

href='myheader_headeredit.php?showdetail=mydetail_lines&id=".urlencode($this->id->CurrentValue)."'><i
class='fi-cwsux2-pen'></i> </a>";
}else{
$this->ListOptions->Items["my_edit"]->Body = "";
/* OPTIONAL CODE
$this->ListOptions->Items["my_edit"]->clear();
*/
}


bline5000
User
Posts: 115

Post by bline5000 »

How can I hide a link to a table on the master/detail button in a modal view screen?

Niijimasama
User
Posts: 85

Post by Niijimasama »

Hi,

Haven't tried this yet (Sorry for the late reply).

Is it not working on modal windows?

Post Reply