1

I have a created a list via the Promoted List chart which contains the LinkLocation as the URL for the specific file. When viewing the list in the TILE view, it opens the links in modal box but when changing to normal chart view > the link opens in a new browser.

I have used the following suggestions but did not manage to get it working: how to open hyperlink list item in modal dialog box

Field=LinkLocation << is the URL field's name in ListSettings

Java Script used:

<script type="text/javascript">
var links=getElementByLinkLocation("a","LinkLocation");
var origin=links;
var temp="javascript:OpenPopUpPage('" + origin + "', null, 640, 480)";
links.href=temp;
function getElementByLinkLocation(tagName,elementTitle){
var elementTag;
var els=document.getElementsByTagName(tagName);
var elsLen=els.length;
var pattern=new RegExp("(^|\\s)" + elementTitle + "(\\s|$)");
for (var i=j=0; i < els.length; i++){
if (elementTitle.toUpperCase()==els[i].title.toUpperCase()){
elementTag=els[i];
j++;
}}
return elementTag;
} 
</script>

Anyone who can recommend me another method, please?

1

Try following JS code to open SP Modal Dialog.

function ShowURL() {  
var options = {  
url: 'your url goes here',  
tite: 'Title for Modal',  
allowMaximize: false,  
showClose: true,  
width: 430,  
height: 230  
};  
SP.UI.ModalDialog.showModalDialog(options);  
return false;  
}

Edit

Use the following steps:

  1. Open the All Item (Chart view) View.
  2. Click on the gear icon and select Edit page.
  3. Now click on add web part and from Group select Media and Content and from Web Part section select Script Editor web part.
  4. Copy past the following script into the script editor. Make sure you change the view attribute in following code to the view id of your table, which can be obtain by just inspecting the table element.

Code:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
<script>
    $(document).ready(function(){
        $('tbody td a', 'table[view="33EBAF5B-D09E-471C-933B-xxxxxxxxxxx"]').each(function (index) {
            var url = $(this).prop('href');
            $(this).removeAttr('href');
            $(this).attr('onClick', 'ShowURL("'+ url + '")');
        });
    })

    function ShowURL(url) {
        var options = {
            url: url,
            tite: 'Title for Modal',
            allowMaximize: false,
            showClose: true
        };
        SP.UI.ModalDialog.showModalDialog(options);
        return false;
    }

</script>

You need to replace view id in this statement table[view="33EBAF5B-D09E-471C-933B-xxxxxxxxxxx"] to make it work for you.

  • the url: 'your url goes here' would have to be the modal box when clicking on any url link within the list, if that makes sense :( – Bucki Sep 13 '17 at 12:28
  • 1
    didnt got you properly what you are trying to do? On click of item you want to open the URL in modal pop up or what? – ThinkB4Code Sep 13 '17 at 12:32
  • exactly :) no matter which URL clicked on the list, it should open the relevant url address in the modular box, the script I provided apparently is supposed to do that job but it does not :( – Bucki Sep 13 '17 at 13:52
  • I had updated the answer to meet your requirement, please take a look. – ThinkB4Code Sep 14 '17 at 5:54
  • 1
    Yes, the view ID's will be completely different and no you dont have to fetch it from URL. Get it from HTML rendered using browser inspect element. See the image, the yellow box will tell you from where to get id. i.imgur.com/PbRNg9a.png – ThinkB4Code Sep 14 '17 at 9:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.