I have created a hyperlink which opens up a modal that shows a specific item from a SharePoint Online list.
Here's what I've got so far (with help from AmosWu!):
private _filterListOnEmail = () => { //this runs on componentdidmount
var urlParams = new URLSearchParams(window.location.search);
var urlParamstoString = urlParams.toString();
var justUrl = window.location.href;
var trimHref = justUrl.split('&')[0];
var trimHref2 = trimHref.substring(trimHref.indexOf("=") + 1);
var txtUrlParams = urlParams.toString();
var trimtxtUrlParams = txtUrlParams.substring(3);
this.setState({
urlParams: trimHref2
}, () => {
if(urlParamstoString){
this.setState({
showWelcomeModal: true,
ByEmail: 'Yes',
});
}
The URL I have constructed:
<a href={`https://mytenant.sharepoint.com/sites/MySite?ID=${this.props.id}`}>Here</a>
This works if the URL is https://mytenant.sharepoint.com/sites/MySite?ID=1 and it shows my modal and it gets the correct ID and shows the correct list item. But if it's ID=2 or any other number, the page shows No item exists at
https://mytenant.sharepoint.com/sites/MySite/SitePages/Home.aspx?ID=2
I don't understand why it's putting the extra SitePages/Home.aspx on the end....I guess this is causing the No item exists error.
The webpart is on the home page of the SP site.
It works with any ID number in workbench but not when deployed.
Really need help with this.
My test result:
I show the editform in the modal, it works well.
The code is the code I shared with you in Q&A. If you need the complete project code, please let me know and I will share it on Github.
Related
Im doing a project for my JS class. I want to build a nightmare.js script that sends a message to every product post on close5.com within a location.
I already figured out how to login and send a message to a single product but I cant figure out how to loop through all product send a message and the click "Show More" then do the next 20 products
This is what i have so far
var Nightmare = require('nightmare');
var startingLink = "https://www.close5.com/l/los_angeles-california"
var nightmare = Nightmare({ show: true });
nightmare
//login code
.goto('https://www.close5.com/login')
.type('input[name="email"]', 'email#email')
.type('input[name="password"]', 'password')
.click('.button__root__3pI8a')
.wait(600)
//end login code
.goto(startingLink)
.evaluate(function() {
var elements = Array.from(document.getElementsByClassName('ItemsListCard__item__8yykb'));
return elements.map(function(element) {
.click('.ItemListingActionButtons__ask__3x7L_')
.type('.ThreadViewInput__input__37Ra7', 'random test msg')
.click('.ThreadViewInput__send__2FcoR')
});
})
.end()
.then(function(content) {
console.log(content);
})
how do i loop though every element and click then send the message?
how to you click a element inside .evaluate()?
In my website, in order to load diferent pages (to be multipage website) I have a main panel that has the id 'content-panel'.
When I want to load a diferent page I have a javascript function that is called 'loadPage' that loads the page (panel) that I want to the 'content-panel'.
But the page that I want to load has to have this code:
Ext.require(['*']);
Ext.onReady(function() {
...
var panel = Ext.Cmp('content-panel');
panel.add(loginPanel);
panel.layout.setActiveItem(loginPanel);
panel.doLayout();
panel.setLoading(false);
});
In this case it is loading the page/panel that is loginPanel, that is defined inside Ext.onReady
For me this is fine, I don't know of any other way of my website being multi-page.
But everytime that I want to go to a page it loads that page to the 'content-panel', even if it already been loaded before. I want a way to only add the page to 'content-panel' if it is not inside 'content-panel' items.
UPDATE:
Here is the loadPage
function swap(parent, replacement, url) {
var alpha = document.querySelector(parent);
var target = alpha.childNodes[0];
var omega = document.createElement(replacement);
omega.src = url;
omega.type = 'text/javascript';
alpha.replaceChild(omega, target);
}
function loadPage(panel, toPanel) {
toPanel.setLoading(true);
swap('head', 'script', panel);
}
it is used like this: loadPage('Ctl_base/view_admin/mainPage', Ext.getCmp('panel'));
I'm using CodeIgniter with ExtJS.
What I have already tried:
I want to do panel.add(loginPanel) only if the loginPanel doesn't exist.
I have tried:
if(panel.getComponent(loginScreen) == undefined) { panel.add(loginPanel); }
and it adds the component even when panel already has that component.
I have also tried:
function hasComponent(parent, child) {
parent.items.items.forEach(function(item) {
if(item == child){
return true;
}
});
return false;
}
if(!hasComponent(panel, loginPanel)) { panel.add(loginPanel); }
and it also doesn't work.
I have manage to tackle this question by putting and itemId on the panel that I want to load, and on panel.layout.setActiveItem(loginPanel); I have put panel.layout.setActiveItem('itemIdOfPanel');
I'm adding a 'new stories' feature to a website for authors to contribute work to. The function below allows stories to be created and added to the author's profile but doesn't auto-add them to a list (ie I have to refresh the browser for this to work. Does anyone know if there is a way to do this (I've tried changing state back to 'authorprofile' but that didn't work).
self.addStory = function() {
var authorId = tokenService.getAuthor()._id;
console.log(authorId);
var data = {
story: self.currentStory,
authorId: authorId
}
Story.save(data, function(story) {
console.log("saving: " + story);
Story.put(data, function(story){
console.log("story added");
})
// auto-add new stories here
$state.go('authorprofile');
})
}
Assuming the list of stories is stored in a 'stories' variable on the scope:
// auto-add new stories here
$scope.stories.push(data);
Add new story into the array using in the success function using push method.
Story.save(data, function(story) {
//Add stories to the array
$scope.stories.push(story);
Story.put(data, function(story){
console.log("story added");
})
// auto-add new stories here
$state.go('authorprofile');
})
I've a tricky question for you guys out there. I've made a simple exercise webapp using AngularJS and ngRoute.
Inside my index.html I got an ng-view element which provide two pages search_page.html and detail_of_result_page.html. The code works pretty fine, I put something in the first page input field, hit search button and all results magically appears in my page. The troubles comes with protractor that seems to not see my result in results repeater with his:
element.all(by.repeater("result in results"))
I've tried to put in browser.pause() and watch for errors, but everything seems right.
I've forgot the error code from Protractor:
Failed: Index out of bound.
Trying to access element at index: 0, but there are only 0 elements that match locator by.repeater("result in results")
OK, under your searchTest.js line: 27
beforeEach(function () {
var EC = protractor.ExpectedConditions;
browser.wait(EC.presenceOf($('li')),5000);
var resultItem = element.all(by.repeater('result in results')).first(); //BUG
var resultLink = resultItem.element(by.css('a'));
resultLink.click();
resultId = resultLink.getAttribute('href').then(function (attr) {
//var res = attr.match('/\/TDDBook\/Search\/#\/detail\/(\d+)/')[1]; // TODO: fix this shit
return 1;
});
});
Things seem alright until you do resultLink.click(); Assuming that it work fine for the first it ("should set the url to the selected detail view"). But when it come to second it("should see the details in the main page component") at this moment you are no longer on /#/splash route. Therefore your pereater no longer available to be located when your beforeEach() run again.
Solution
Your beforeEach doesn't seem useful and logically not run-able for your second it("should see the details in the main page component"). So just move all the thing like this:
it ("should set the url to the selected detail view",function () {
var EC = protractor.ExpectedConditions;
browser.wait(EC.presenceOf($('li')),5000);
var resultItem = element.all(by.repeater('result in results')).first(); //BUG
var resultLink = resultItem.element(by.css('a'));
resultLink.click();
resultId = resultLink.getAttribute('href').then(function (attr) {
//var res = attr.match('/\/TDDBook\/Search\/#\/detail\/(\d+)/')[1]; // TODO: fix this shit
return 1;
});
resultId.then(function (id) {
var expectedUrl = '/detail/'+id;
browser.getLocationAbsUrl().then(function (url) {
expect(url).toBe(expectedUrl);
})
})
})
P.S. just for your information, there is Page Object in protractor, which will be fit with the thing you attempt to do with your beforeEach() . Plus with a tiny bit of knowledge of commonJS (module.exports & require()) it will perfectly suit your needs ;) Cheer!
I've created a new plug in as I could not find one that actually "works", hoping that if I do it from scratch it might fire.
The plug-in simply wraps selected text with a mailto: link.
I've added the plug-in to the includes file, as per the following response on a previous question: http://bit.ly/vGyQlE however, it's not working.
I've gone into the localization directory, identified the Composite.Web.VisualEditor.en-us.xml as the file that handles the localization, added my entry under :
<string key="ToolBar.ToolTipMailTo" value="Mail To" />
But when I hover of the "blank" block where the menu item should appear, it returns (?). This is the first part where I picked up on something wierd. When you actually click on where the item should appear, nothing happens. So, I can't assume that the click event has got to do with an image, I re-wrote the command to return an alert, when clicked:
tinymce.create('tinymce.plugins.MailTo', {
init : function(ed, url) {
ed.addButton('mailto', {
title : 'mailto.mailto_desc',
cmd : 'mceMailTo',
image : url + '/images/mailto.gif'
});
ed.addCommand('mceMailTo', function() {
var selectedText = ed.selection.getContent({format : 'text'});
var MailToLink = "alert(" + selectedText + ");";
ed.execCommand('mceInsertContent', false, MailToLink);
});
I've added the "mailTo" element to visualeditor.js:
plugins : "...,paste,lists,mailto",
And ensured that the "mailto" plug-in is situated under the plug-ins directory for tiny_mce. I've gone as far as to clear my cache several times, but nothing? Can it be this difficult to add new plug-ins to tiny-mce in Composite?
1) Composite C1 does not support internal tiny_mce buttons
Do you add button to editor?
In file Composite\content\misc\editors\visualeditor\includes\toolbarsimple.inc add
<ui:toolbargroup>
<ui:toolbarbutton cmd="mceMailTo" tooltip="Mail to" image="${icon:paste}" isdisabled="false" />
</ui:toolbargroup>
2) Do you write valid plugin code?
(function () {
tinymce.create('tinymce.plugins.MailTo', {
init: function (ed, url) {
ed.addCommand('mceMailTo', function () {
var selectedText = ed.selection.getContent({ format: 'text' });
var MailToLink = "alert(" + selectedText + ");";
ed.execCommand('mceInsertContent', false, MailToLink);
});
}
});
tinymce.PluginManager.add('mailto', tinymce.plugins.MailTo); })();