Customizing a SharePoint Announcement List with jQuery

In this video, we customize a SharePoint announcement list and use jQuery to set the style of the “network status” based on the severity of the problem. We also look at the use of Developer Tools in the browser to find the appropriate jQuery selectors and to debug our code.

Subscribe to My Channel


My Book: Creating Business Applications with Office 365: Techniques in SharePoint, PowerApps, Power BI, and More

Advertisements

Displaying a jQuery UI Dialog From a SharePoint Page

In this video, we see how to display a jQuery UI dialog from a button on a SharePoint page. Along the way, we cover CSS, jQuery, jQuery UI, Content Editor web parts, JavaScript, and Visual Studio.

Subscribe to My Channel


My Book: Creating Business Applications with Office 365: Techniques in SharePoint, PowerApps, Power BI, and More

Adding jQuery UI buttons to a SharePoint Page

In this video, we see how to add jQuery UI buttons to a SharePoint page. Along the way, we cover CSS, jQuery, jQuery UI, Content Editor web parts, JavaScript, and Visual Studio.

Subscribe to My Channel

My Book: Creating Business Applications with Office 365: Techniques in SharePoint, PowerApps, Power BI, and More

Configuring SharePoint Online to Allow Content Editors and InfoPath

This video shows how to enable SharePoint Online (Office 365) to use Content Editors/Script Editors and InfoPath. It supports my Creating Business Applications with Office 365: Techniques in SharePoint, PowerApps, Power BI, and More from Apress: https://www.apress.com/in/book/9781484253304

Subscribe to My Channel

My Book: Creating Business Applications with Office 365: Techniques in SharePoint, PowerApps, Power BI, and More

YouTube Channel

Please check my new YouTube channel at “https://www.youtube.com/channel/UCadnfEVO8PD48xbsE2GhxEg?view_as=subscriber. It has examples from my upcoming Creating Business Applications with Office 365: Techniques in SharePoint, PowerApps, Power BI, and More book as well as other programming and application examples.

Subscribe to My Channel

Upcoming Book: Creating Business Applications with Office 365: Techniques in SharePoint, PowerApps, Power BI, and More

We are exciting to announce this new book by Jeff Rhodes being published by Apress. Preorder now on Amazon and coming soon to other retailers.

Watch for upcoming posts and videos on Office 365 and related technologies.

Using JavaScript and jQuery to Configure an Anchor Tag

We recently helped one of our Exam Engine customers with a custom question template. In this template, they wanted to have a smaller version of an image. The user could then click on the smaller image to see a larger version in a popup window. The first task was to add the anchor tag to the HTML as shown below. The new lines are shown in bold.

<a id=”questionGraphicLink” target=”questionGraphicWindow”>
    <img id=”questionGraphic” src=”” alt=”” />
</a>

Next, we used the fact that the larger image would match the name of the smaller image except for a _lg at the end of the name. So if the question image were “xyz.png”, then the large image would be “xyz_lg.png.” We thus added the code below to the function that is called when the page is fully loaded.

// make hyperlink out of questionGraphic
            if (questionDictionaryId["QuestionGraphic"] != null) {
                var lgGraphic = questionDictionaryId["QuestionGraphic"].replace(".png", "_lg.png");

                $("#questionGraphicLink").attr("href", ("../media/" + lgGraphic));
            }

The questionDictionaryId JavaScript objects holds all the items for the question. If it has a “QuestionGraphic” item, we put a reference to the large graphic in the lgGraphic local variable. We then use jQuery to find a reference to the questionGraphicLink anchor object. We then set its href attribute to a relative path to that graphic. If the question does not have a graphic, we skip this step and thus avoid any kind of broken links.