locked
Display list item with close button using Javascript RRS feed

  • Question

  • I am looking to display SharePoint list items from a custom list called "Alerts" styled similar to

    I want to display the "Body" column only along with a close button to allow users to collapse the alert. I want to be able to apply the above styles as well. 

    (function () {
       
    	var itemCtx = {};
    	itemCtx.Templates = {};
    	
            itemCtx.Templates.Header = "<table>";
            itemCtx.Templates.Item = ItemOverrideFun;
            itemCtx.Templates.Footer = "</table>";
    
    	itemCtx.BaseViewID = 1;
    	itemCtx.ListTemplateType = 100;
    	
    	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
    
    })();
    
    
    function ItemOverrideFun(ctx) {
    var _AlertDesc = ctx.CurrentItem.Body;
    return "<tr><td><p><b>" + "<span style='font-size:24px'>"+ _AlertDesc + "</span></b>" + "</b></td></tr>";
    }

     

    Friday, March 30, 2018 4:16 PM

All replies

  • Hi mikello,

    Here's full tested script for displaying the alerts with the required styles from a list using JSOM 

    # Insert Content Editor webpart to the sharepoint pages , then following script + html to the web part

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .alert {
        padding: 20px;
        background-color: #f44336;
        color: white;
    	border:black 3px;
    	border-style:Solid
    }
    
    .closebtn {
        margin-
        color: white;
        font-weight: bold;
        float: right;
        font-size: 22px;
        line-height: 20px;
        cursor: pointer;
        transition: 0.3s;
    }
    
    .closebtn:hover {
        color: black;
    }
    </style>
    </head>
    <body>
    
    <h2>Alert Messages</h2>
    
    <p>Click on the "x" symbol to close the alert message.</p>
    <div class="alert">
      <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
      <strong id="AlertBodyBox">Danger!</strong>
    </div>
    
    </body>
    </html>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript">
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', retrieveListItems);
    
    function retrieveListItems()
    {
    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('Alerts');
    
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml("<View><Query><OrderBy><FieldRef Name='Body' Ascending='TRUE' /></OrderBy></Query></View>");
    
    this.collListItem = oList.getItems(camlQuery);
    clientContext.load(collListItem);
    clientContext.executeQueryAsync( Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed) );
    }
    
    function onQuerySucceeded(sender, args)
    {
         var listItemInfo = '';
         var listItemEnumerator = collListItem.getEnumerator();
          while (listItemEnumerator.moveNext()) {
    
                      var oListItem = listItemEnumerator.get_current();
                      var alertBody=oListItem.get_item('Body');
                      $("#AlertBodyBox").text(alertBody);
                    }
     }
                  
    function onQueryFailed(sender, args)
    {
    alert('Request failed. ' + args.get_message() +'\n' + args.get_stackTrace());
    }
    
    
    </script>

    Here's the result 


    Best Regrads, Ahmed Madany MCTS @twitter http://twitter.com/ahmed_madany @Blog http://ahmedmadany.wordpress.com @LinkedIn http://eg.linkedin.com/pub/ahmed-madany/35/80/2b6

    • Proposed as answer by Lee Liu Monday, April 2, 2018 2:54 AM
    • Unproposed as answer by mikello Monday, April 2, 2018 1:56 PM
    Sunday, April 1, 2018 8:01 PM
  • #Modification

    for displaying the alerts according to the expiration date , below script check if value of the alert expire date is greater than today or no.

    Insert Content Editor web part to the page , then add below scripts and html to the webpart  

     
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <style>
    .alert {
        padding: 20px;
        background-color: #f44336;
        color: white;
    	border:black 3px;
    	border-style:Solid
    }
    
    .closebtn {
        margin-left: 15px;
        color: white;
        font-weight: bold;
        float: right;
        font-size: 22px;
        line-height: 20px;
        cursor: pointer;
        transition: 0.3s;
    }
    
    .closebtn:hover {
        color: black;
    }
    </style> 
    <h2>Alert Messages</h2> 
    <p>Click on the &quot;x&quot; symbol to close the alert message.</p> 
    <div class="alert"> 
       <span class="closebtn" onclick="this.parentElement.style.display=&#39;none&#39;;">×</span><strong id="AlertBodyBox">this is the 2nd alert </strong> </div> 
    <script src="/_layouts/15/sp.runtime.js" type="text/javascript"></script> 
    <script src="/_layouts/15/sp.js" type="text/javascript"></script> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript">
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', retrieveListItems);
    
    function retrieveListItems()
    {
    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('Alerts');
    
    var camlQuery = new SP.CamlQuery();
    
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();
    var startDate  =  yyyy+"-"+mm+"-"+dd+'T00:00:01Z';
    
    camlQuery.set_viewXml("<View><Query><Where><Geq><FieldRef Name='ExpiresOn'/><Value Type='DateTime' IncludeTimeValue='FALSE'>"+startDate+ "</Value></Geq></Where><OrderBy><FieldRef Name='Body' Ascending='TRUE' /></OrderBy></Query></View>");
    
    this.collListItem = oList.getItems(camlQuery);
    clientContext.load(collListItem);
    clientContext.executeQueryAsync( Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed) );
    }
    
    function onQuerySucceeded(sender, args)
    {
         var listItemInfo = '';
         var listItemEnumerator = collListItem.getEnumerator();
          while (listItemEnumerator.moveNext()) {
    
                      var oListItem = listItemEnumerator.get_current();
                      var alertBody=oListItem.get_item('Body');
                      $("#AlertBodyBox").text(alertBody);
                    }
     }
                  
    function onQueryFailed(sender, args)
    {
    alert('Request failed. ' + args.get_message() +'\n' + args.get_stackTrace());
    }
    
    
    </script>

    Here's the result


    Best Regrads, Ahmed Madany MCTS @twitter http://twitter.com/ahmed_madany @Blog http://ahmedmadany.wordpress.com @LinkedIn http://eg.linkedin.com/pub/ahmed-madany/35/80/2b6

    • Proposed as answer by Lee Liu Monday, April 2, 2018 2:54 AM
    • Unproposed as answer by mikello Monday, April 2, 2018 12:59 PM
    • Proposed as answer by Lee Liu Wednesday, April 4, 2018 6:46 AM
    Sunday, April 1, 2018 10:41 PM
  • Hi,

    Please check what Ahmed Madany posted above.

    Best regards,

    Lee Liu


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Monday, April 2, 2018 5:39 AM