How to hide grid action buttons(Edit, Delete) from "sw-entity-listing" listing in shopware 6?
If you want to hide the whole actions column you can do this with the prop showActions. This would be the most simple way.
<sw-entity-listing
:showActions="false">
</sw-entity-listing>
If you only want to hide the "edit" or "delete" button and not the whole actions column you can override the slots delete-action or detail-action with an empty tag or something else:
<sw-entity-listing>
<template #delete-action>
My content
</template>
</sw-entity-listing>
<sw-entity-listing>
<template #delete-action>
<span></span> <!-- No action here -->
</template>
</sw-entity-listing>
The sw-entity-lising component is an extension of the sw-data-grid component. So in general you can use all props from sw-data-grid as well.
Related
I want to use custom templates for the tree nodes as shown here on their website
https://angular2-tree.readme.io/docs/templates
But I also need the checkbox tri-state functionality as demonstrated here
https://angular2-tree.readme.io/docs/tri-state-checkboxes
In this custom treeNodeFullTemplate example they have a checkbox as part of the template but it doesn't have the tri-state relationship between the parents and children. Is there a way to have a custom checkbox and keep all the correct event listeners etc.? I can't seem to find any documentation on the checkboxes API if there is one.
<tree-root id="tree" [focused]="true" [nodes]="nodes">
<ng-template #treeNodeFullTemplate let-node let-index="index" let-templates="templates">
<div class="tree-node">
<input type="checkbox" [checked]="node.isActive" (change)="node.toggleActivated(true)" />
<tree-node-expander [node]="node"></tree-node-expander>
<div
class="node-content-wrapper"
[class.node-content-wrapper-active]="node.isActive"
[class.node-content-wrapper-focused]="node.isFocused"
(click)="node.toggleActivated(true)">
<span [class]="node.data.className + 'Index'">{{ index }}</span>
<span [class]="node.data.className" [class.title]="true">{{ node.data.title }}</span>
</div>
<tree-node-children [node]="node" [templates]="templates"></tree-node-children>
</div>
</ng-template>
</tree-root>
I can see that the (change) method on the checkbox is not right but do I need to write my own one to get the parent and children and determine state on click? It seems strange that I can't just tap into an existing API.
I want to change button text which is generated by "Send to Messenger" plugin using javascript facebook SDK.
Fortunately, you can change the button texts! Unfortunately, you can't use arbitrary text. You can only choose from the pre-defined button texts by facebook.
Here's the list of button texts that you can use
GET_THIS_IN_MESSENGER
RECEIVE_THIS_IN_MESSENGER
SEND_THIS_TO_ME
GET_CUSTOMER_ASSISTANCE
GET_CUSTOMER_SERVICE
GET_SUPPORT
LET_US_CHAT
SEND_ME_MESSAGES
ALERT_ME_IN_MESSENGER
SEND_ME_UPDATES
MESSAGE_ME
LET_ME_KNOW
KEEP_ME_UPDATED
TELL_ME_MORE
SUBSCRIBE_IN_MESSENGER
SUBSCRIBE_TO_UPDATES
GET_MESSAGES
SUBSCRIBE
GET_STARTED_IN_MESSENGER
LEARN_MORE_IN_MESSENGER
GET_STARTED
You can change the text by setting cta_text attribute to one of the preceding
options. In this example, I used KEEP_ME_UPDATED option:
<div class="fb-send-to-messenger"
cta_text="KEEP_ME_UPDATED"
messenger_app_id="<APP_ID>"
page_id="PAGE_ID"
data-ref="<PASS_THROUGH_PARAM>"
color="<blue | white>"
size="<standard | large | xlarge>">
</div>
The easiest way I know to do it is by placing the send-to-messenger div inside another div & formatting the parent div & a sibling div.
The trick is to pass the click event through an element.
This requires position first div as absolute.
Here's my code
<div style='height: 32px;width: 148px;display: inline-block;overflow: hidden;color: #fff;'>
<div style='background-color: #5ac7ec;pointer-events:none;position:absolute;width:148px;z-index:2;line-height:36px;>
CONNECT
</div>
<div class="fb-send-to-messenger"
messenger_app_id="123456789"
page_id="987654321"
data-ref="some_data"
color="blue"
size="large">
</div>
You can use the cta_text option but you cannot write anything there, only couple of predefined texts.
Read more here
I'm having a hard time trying to connect SUI modal with SilverStripe to generate them dynamically.
I want to achieve something like this:
I have button (attach events) to trigger modal with some content. I wanted to loop that elements (GridField) to generate everything dynamically. But the only thing I can achieve is multiple modals with the same "trigger class" and it doesn't matter which button I have clicked (first, last or whatever). I only have one modal (the last in hierarchy). Without SUI the solution is easy - put "this" to fetch the closest element and I can have as many different modals as I want, but SUI seems to complicate things.
I think the best solution will be to generate a class/id with SilverStripe and pass it to the JavaScript to use with modal or use one class for every modal and to "somehow inform" that this button triggers this modal.
Basically I need one code snippet to handle many modals, not many snippets to handle many modals. I hope it's clear enough what the the problem is.
Here is my code:
HTML/SS
(without specific SilverStripe tags)
<% loop SomeName %>
<div class="job-offers">
<a class="ui right floated button job-application">Click here</a>
</div>
<div class="ui basic modal job-application">
<div class="job-application-sheet">
(...)
<div class="job-application-sheet-content">
<div class="ui grid">
(...)
<div class="ui center aligned container job-application-action">
<p>Lorem ipsum</p>
<button class="ui primary button">Click here</button>
</div>
</div>
</div>
</div>
</div>
<% end_loop %>
JavaScript
$('.ui.basic.modal.job-application')
.modal({
autofocus : false,
observeChanges: true
})
.modal('attach events', '.job-application', 'show');
As you can see "job-application" class is a trigger for modal, so is this possible to change it to "(this)" so I don't have to write "specific" class for each button/modal. Or maybe there is a different/easier solution?
first i generated a data-type attribute for each of my elements that are going to display a modal when they are clicked, and in send as a local the same index to the modal this way:
<% #relateds_array.each.with_index do |related,i| %>
<div class="card custom" data-id="<%=i%>">
<%= render partial: 'my_modal', locals: {index: i} %>
</div>
<% end %>
the i put the modal in the partial that i called my_modal for this example and used the index that i sent as a local to create an unique id for each my modals, like this:
<div class="ui modal" id="modal-<%=index%>">
<p>blabla things inside this modal.</p>
</div>
and then with javascript, simply get the data-id of the element clicked and select the element that contain the id for that data-id, like this:
$('.element_that_you_want_to_open_moda_on_click').click(function(event){
var card_clicked = $(this).attr('data-id');
$('#modal-' + card_clicked).modal('show');
});
Hope this was useful for you.
Note that i used Ruby on Rails for this example, but the behaviour that you should use should be something similar to this, no matter what framework you use.
Answer based on Sebastian's solution. I did some minor tweaks to meet my needs, like I've used ID variable to automatically get DataObject ID which is generated dynamically.
Basically to dynamically add Semantic UI (SUI) modal in SilverStripe, first you should add "data-id" in a modal trigger, for example:
Template.ss
<a class="ui button custom-trigger" data-id="my-item-$ID">Click here</a>
then inside modal container add an "id" tag, for example:
<div id="modal-my-item-$ID" class="ui basic modal">
(...)
</div>
Finally in JavaScript file:
$('.custom-trigger').click(function(event){
var triggerItem = $(this).attr('data-id');
$('#modal-' + triggerItem).modal('show');
});
I meet problem with SUI autofocus, so after a modal opens, screen went to the bottom and button placed there was highlighted.
I tweaked original snippet adding SUI settings:
$('.custom-trigger').click(function(event){
var triggerItem = $(this).attr('data-id');
$('.ui.modal')
.modal({
autofocus: false,
observeChanges: true
})
$('#modal-' + triggerItem).modal('show');
});
If someone wants to write "data-id trigger" manually using fields in CMS, then change $ID to $SomeField variable. Then normally add that field in .php file and in Page Controller add something like this:
public function init() {
parent::init();
Requirements::javascriptTemplate($this->ThemeDir().'/js/script.js', array(
'SomeField' => $this->SomeField
));
}
Hope this helps someone.
I have added a custom set of buttons for adding simple grids to the editor. These have the following structure;
<div class="grid">
<div class="col-1-2"><p>Column 1</p></div>
<div class="col-1-2"><p>Column 2</p></div>
</div>
A custom CSS assigned displays the grids correctly. However as soon as the user goes to edit the text..understandably by deleting it all or highlighting and trying to replace, TinyMCE immediately removes the empty tags so if the user deletes the text Column 1 we end up with this;
<div class="grid">my new text<br />
<div class="col-1-2"><p>Column 2</p></div>
</div>
I have tried adding;
extended_valid_elements : 'div[id|class|style]'
but it had no effect.
How can I stop TinyMCE from removing these empty tags or am I going about this the wrong way..?
Thanks
I have a problem to add and delete html div dynamically. Below is the simplified code that I am working on:
<input type="button" value="+ Add More Division" name="add_div" id="add_div">
<div id="div_1">
<input type="button" value="+ Delete Div A" name="del_a" id="del_a">
</div>
<div id="div_2">
<input type="button" value="+ Delete Div B" name="del_b" id="del_b">
</div>
<div id="div_3">
<input type="button" value="+ Delete Div C" name="del_c" id="del_c">
</div>
This is the situation, div_1, div_2 and div_3 can be added and removed dynamically. div_1 will always be associated with button id del_a, div_2 with del_b and div_3 with del_c. It is only 3 divs maximum can be added.
I need jquery that can add and remove the div and reuse div_1, div_2 and div_3 along with the associated button ids.
For example, if the user delete the div_2, and the user want to add more division (which is only 1 more can be added), the jquery will try to find the existing divs, and somehow remember it. Since div_2 is not exist, div_2 will be added, does not matter the order. div_3 can go first before or after the other divs.
I just want to give freedom for the user to edit the form, since this massive form. I do not know how to do this in jQuery using .each().
Thanks for your help.
Edited:
By default, only div_1 is exist on the form. The user can have the freedom to add another 2 divs to add more divs. The user is also have the capability to delete div_1 when either div_2 or div_3 exist. One div must be exist.
you can use detach() function....it will simply remove the div and if you want to add it again have, a reference of that div and add it again..something like this
suppose, user deleted the first div like this...
var div
$('#del_a').click(function(){
div= $('#div_1').detach();
});
...
and when user click on add button you can do something like this...
$('#add_div').click(function(){
$(div).appendTo('where you want to append')
});
i think this might help you..
If you want to delete div dynamically den use it:
$('#mydiv').empty();
Add /Remove dynamically HTML element with jQuery plz see below
Add /Remove dynamically HTML element with jQuery
You can have three variables acting as flags for the divs present. When the add div button is clicked, check for the first flag which is not set, add that div and set the flag for that particular div. If all three flags are set, then disable the add more divs button. Hope this helps.
Its working fine (Plz optimized this code) :)
<script type="text/javascript" >
$(document).ready(function(){
$('#add_div').click(function(){
if(($('#del_a').is(":hidden"))){$("#del_a").show(); return; }
if(($('#del_b').is(":hidden"))){$("#del_b").show(); return; }
if(($('#del_c').is(":hidden"))){$("#del_c").show(); return; }
});
$('#del_a').click(function(){
if($('#del_b').is(":hidden") && $('#del_c').is(":hidden") )
return;
$('#del_a').hide();
});
$('#del_b').click(function(){
if($('#del_a').is(":hidden") && $('#del_c').is(":hidden") )
return;
$('#del_b').hide();
});
$('#del_c').click(function(){
if($('#del_a').is(":hidden") && $('#del_b').is(":hidden") )
return;
$('#del_c').hide();
});
});