I have 2 PnP Taxonomy picker control in SharePoint online in my page. I initialize these control as below
$('#taxPickerKeywords_' + p).taxpicker({
isMulti: false,
allowFillIn: true,
useKeywords: true,
termSetId: 'GUID'
}, context);
Now I need to set the value of second control with first control value. I can get the value from first control but unable to set second control value using .val() in jQuery.
After I initialize my taxpicker the HTML looks like below
<div class="cam-taxpicker">
<div class="cam-taxpicker-editor" contenteditable="true"></div>
<div class="cam-taxpicker-button"></div>
<input type="hidden" id="taxPickerKeywords_0">
</div>
<div class="cam-taxpicker-suggestion-container"></div>
Any idea or suggestion for setting the value for this control?
I did a workaround for this. The value was getting set using $('#tax_2').val(value); but it was not appearing in the editor. So I updated its value and then set the editor element as in the first tax picker.
//setting the value of 2nd control
$('#tax_2').val(value);
//cloning the elements of 1st control's editor
var clonedVar = $('#tax_1').parent().find('.cam-taxpicker-editor').children().clone();
//emptying the 2nd control's editor if any other value is present
$('#tax_2').parent().find('.cam-taxpicker-editor').empty();
//appending the editor element to 2nd control
$('#tax_2').parent().find('.cam-taxpicker-editor').append(clonedVar);
This worked for me as I was copying the value already present in one taxonomy picker. I am also able to read these values and save them to backend. User can even change the value after copy.
Related
How we can change the text of the TAB Item dynamically based on Order Type in Sales order screen.
for example: for TR order type, I want to change Document Details to Transfer Details.
To my knowledge there is no DAC binding for changing Tab Header Text from the business logic layer (graph). A possible workaround if you have a limited number of alternative Tab Header Text could be to create a tab for each of them and dynamically hide them based on your display condition.
How to hide Tabs in Acumatica:
Hiding a tab from the user interface dynamically
The other option would be to use JavaScript to change the inner element of the Tab Header Control.
Both options are less than ideal and can have an impact if you're looking to have your customization certified by Acumatica but if it's a hard requirement that's the only ways to do it that I'm aware of.
In the following example I'm using the hardcoded HTML Control ID for the Tab Header Control that I looked up using the Inspect Element feature provided by HTML browsers:
<asp:Content ID="cont1" ContentPlaceHolderID="phDS" Runat="Server">
<script type="text/javascript">
$(function() {
$(document)
.ready(function() {
document.getElementById("ctl00_phG_tab_tab0").innerHTML = "My Tab Header Text";
});
});
</script>
[...]
</asp:Content>
I try to have a function to display a box with calling dialog('Hello') for example.
I just want to replace the basic function alert by dialog jquery but I don't succeed.
Please help me
**Steps** :
Create a div with id : dialog. Also set it's class
Set the css property of the class display:none
Align it in center with width and height 25%
Create a function dialog(str) that accepts msg as a parameter
Use jquery to change the class of div dialog and set the css property display:block
In the div that you created place a small ok button and map it's click event to a function that hides the div or set's property : display:none
i got this working once i was using it.
$(function() {
$( "#messagebox" ).dialog();
});
And you need some info to go in that box, with this code.
<div id="messagebox" title="some title">
<p>You type your message here</p>
</div>
you use the id to identify which box, and then the rest gives itself :) good luck.. hope it helps. should be easy.
This time I'm struggling with my custom widget for Orchard.
It's a simple content part with two fields:
- Background Color
- Size
I want to be able to add HTML content to this widget; so I added the Body Part. This part must be displayed within my widget. The result should be something like this:
<div class="size-small bg-color-red"> BODY PART HTML CONTENT </div>
But unfortunately, the Body Part is always displayed before or after my widget.
<Placement>
<Place Parts_ContentTile="Content"/>
<Place Parts_ContentTile_Edit="Content:7.5"/>
</Placement>
Not so nice 'solution':
A way to resolve this is to remove the body part and replace it with a simple text field. This text field is rendered at the desired position. But then the TinyMCE Editor is not available.
Update after comment from Ivan:
I tried to change both (Content Type and Content Part (separate)) but unfortunately, both times, the TextField content is displayed after the widget. Should that be fixed in the Placement.info?
Another option is to add a String field to my Widget Model. But then it is not possible to show the TinyMCE editor. Am I right?
So I've got the feeling that my expectations about widgets, content parts and placements are incorrect. Hopefully somebody here can point me in the right direction.
When using TextField, you can use TinyMCE by specifying HTML flavor in the settings of the field.
To do that you can go to Content → (Content Types or Content Parts depending on which you are trying to change) → Select your ContentType or ContentPart → Expand the definition of the TextField you're using → Select HTML from the drop down menu next to Flavor → Click on Save button.
This post on SO from Mark Z was really helpfull to me!
I added a String property to my Model and added a new Database Migration:
public int UpdateFrom3()
{
// Adds a new Content column
SchemaBuilder.AlterTable("ContentTileRecord", table => table.AddColumn("Content", DbType.String));
return 4;
}
After that I added the field to the Editor Part View:
#Script.Require("OrchardTinyMce")
<div class="editor-label">
#Html.LabelFor(model => model.Content)
</div>
<div class="editor-field">
#Html.TextAreaFor(model => model.Content, new { #class = "html tinymce" })
</div>
The Content Property is now displayed as a TextArea. Because of the classes 'html and tinymce' the TinyMCE editor is instantiated. (Don't forget the Script.Require call)
Because of the fact that the Content property contains HTML, it is required to use the #Html.Raw helper to display the value of this property.
#Html.Raw(Model.Content)
I'm trying to use the xe:calendarView control in a real world application. So far, I can read data out of a view and display it in the calendar, that was easy.
But now I want to open an entry by double or singleclick, or I want to change the date of an entry by drag & drop. For that, the control has events like "onOpenEntry" where I can write SSJS. But I'm stuck here:
In such an event, how do I get the UNID of the document for which the event was generated?
"this" is an com.ibm.xsp.extlib.dwa.component.calendar.UICalendarView object. I found some source code for this class, but I don't see any way to access a the document which should be opened.
Furthermore, the "onOpenEntry" event is only fired one time when the control is loaded. After that, it does not fire on click or doubleclick.
For me it looks like these events are not fully implemented... and in the ExtLib demo database there are not used, too. Does anyone know how this stuff works?
Thanks!
The xe:calendar control is based on the iNotes calendar view. As a result the events only run Client-Side JavaScript, not Server-Side JavaScript. Using #{javascript:...} syntax you can pass in evaluated SSJS, e.g.
#{javascript:(userBean.accessLevel >= lotus.domino.ACL.LEVEL_AUTHOR) && userBean.canDeleteDocs}
This will check the user has at least Author access to the database and the delete privilege. Similarly you can use the following code to get the full URL for the current page to manipulate when creating the new URL to redirect to:
var path = #{javascript:"\"" + #FullUrl('/') + "\""};
Bear in mind that the Server-Side JavaScript will be evaluated when the function is written to the XPage, not when the button is clicked.
You can get the unid by using (as Client-Side Javascript, not Server-Side JavaScript) items[0].unid.
See the calendarView Custom Control in the Teamroom template that comes with Upgrade Pack 1 or the Extension Library for more details.
You can bind the event to the calendar entry using dojo or jquery. I found the below code for the entry which contain the unid.
So you should be able to do somthing like this
find the id ....calendarView1-entry0
get the unid attribute
Bind the id to the event you want and do a popup or whatever.
<div id="home:_id1:dynC:_id556:calendarView1-entry0" class="s-cv-entry" calendar_type="Meeting" unid="723C2A5387AA7994C12579B30056D07E" calendar_date="20120622" calendar_index="0" calendar_start="20120622T000000,00$Z=-1$DO=1$DL=3 -1 1 10 -1 1$ZN=Western/Central Europe" calendar_end="20120622T010000,00$Z=-1$DO=1$DL=3 -1 1 10 -1 1$ZN=Western/Central Europe" calendar_start_notes="20120621T220000Z" calendar_bgcolor1="#C1DDF9" calendar_bgcolor2="#5495D5" calendar_fontcolor="undefined" calendar_bordercolor="undefined" calendar_external="0" onmouseover="dwa.cv.calendarView.prototype.cvHandler(event,this,'home:_id1:dynC:_id556:calendarView1');" onmouseout="dwa.cv.calendarView.prototype.cvHandler(event,this,'home:_id1:dynC:_id556:calendarView1');" onclick="dwa.cv.calendarView.prototype.cvHandler(event,this,'home:_id1:dynC:_id556:calendarView1');" ondblclick="dwa.cv.calendarView.prototype.cvHandler(event,this,'home:_id1:dynC:_id556:calendarView1');" oncontextmenu="dwa.cv.calendarView.prototype.cvHandler(event,this,'home:_id1:dynC:_id556:calendarView1');" style="top: 0px; left: 504px; width: 114px; height: 48px; "><canvas id="home:_id1:dynC:_id556:calendarView1-entry0-gradient" class="s-cv-entry" style="top:0px;left:0px;width:100%;height:100%;" color2="#C1DDF9" color="#5495D5" width="114" height="48"></canvas><div tabindex="0" class="s-cv-entry-innerframe s-cv-entry-innerframe-height s-cv-text" unselectable="on" aria-describedby="home:_id1:dynC:_id556:calendarView1-entry0-target" aria-haspopup="true" role="menu" style="top:0px;left:0px;width:100%;color:undefined;white-space: nowrap;" com_ibm_dwa_ui_draggable_redirect="home:_id1:dynC:_id556:calendarView1"><img alt="Meeting" src="/xsp/.ibmxspres/.dwa/common/images/transparent.gif" width="13" height="11" style="border-width:0px;background-position: -0px -0px; background-image: url(/xsp/.ibmxspres/.dwa/common/images/colicon1.gif);"> Midsommar<br>8clfux40</div>
I'm developing a SharePoint publishing site and setting up its content types and page layouts. I need to display the value for a Year field with type Number. The markup currently is:
<SharePointWebControls:NumberField FieldName="Year" runat="server" id="Year" />
The problem with the default behaviour is that it shows each number with a comma, e.g. "2,009" instead of "2009". Is there a way I can set some sort of String.Format syntax on the field to make it display correctly?
I tried creating a new rendering template which looks like this:
<SharePoint:RenderingTemplate ID="YearNumberField" runat="server">
<Template>
<SharePoint:FormField ID="TextField" runat="server"/>
</Template>
</SharePoint:RenderingTemplate>
... but there doesn't appear to be any 'Format' property on the FormField object.
Thanks for any help.
Update:
I tried wrapping the SharePoint:FormField tag inside SharePoint:FormattedString. Unfortunately the field was not formatted, same results as this question.
The issue is that the rendering template must use FormField. This always renders the value in the format: 1,989 . To resolve this the rendered text needs to be trapped and altered to get the desired output. Here are two approaches to resolving this:
1. Write a custom control inherited from NumberField
The RenderFieldForDisplay and RenderFieldForInput methods can be overridden to provide the desired output. Additional properties can be added to the control to describe additional behaviour.
Pros: No changes to rendering templates required.
2. Write a custom control for use in the rendering template
A control that (for example) uses regular expressions to alter text can wrap around the FormField control.
<SharePoint:RenderingTemplate ID="YearField" runat="server">
<Template>
<RX:RegexManipulatorControl runat="server"
Mode="Replace"
Expression=","
Replacement="">
<SharePoint:FormField runat="server"/>
</RX:RegexManipulatorControl>
</Template>
</SharePoint:RenderingTemplate>
Pros: Generic solution can be used for any type of field.
from Just Another SharePoint Blog
Open the list view in SharePoint
Designer.
Right click on the data view web part.
(the list)
Select Convert to XSLT Data View
Click on the number field you would
like to format
A > will appear showing Data Field,
Format As
Click on the link below Format As -
Number formatting options
Under Options deselect Use 1000
separator
Click OK
Save your changes and hit F12 to
preview