Tag: javascript

Exporting A Microsoft Teams Chat

There’s no export functionality in MS Teams chats and conversations. From Microsoft’s standpoint, this makes sense — customer retention. From the customer standpoint, however? There are times I really want to transfer a conversation elsewhere for some reason. You can copy/paste individual text bubbles. If you only need to get one or two bubbles, manually copying the text is going to be quicker. And, for those with special access, there’s the Security & Compliance discovery export stuff as well as an approach using the Graph API. But for the rest of us general users, there’s no easy way to export the bunch of little chat bubbles that comprise a MS Teams chat.  There is, however, a not-too-hard way to do it in the Teams web client.

I’ll prefix these instructions with a disclaimer – your company may have document retention in Teams. When you export your chat content, you’ll need to maintain appropriate retention policies yourself. In IT, we had a few information categories where retention was “useful life” – we could retain system documentation as long as the system was used. If you’re exporting a chat to keep something you are allowed to keep and then keep it outside of Teams … that’s awesome. If you are trying to keep something the company’s retention policy says should be removed … that’s probably not awesome.

Once you’ve determined that the info you are exporting is OK to export and maintain elsewhere, here’s how to export a Teams chat from within the Teams web client. Step 1, of course, is to lot into Teams at https://teams.microsoft.com and go to the chat you want to export. Scroll up to the top of the chat. If you have a really long chat, it may not be possible to export the entire thing using this approach. I might play around with it in the future, by most of my conversations are in Teams channels so I don’t have a chat that’s more than 30 or so messages.

Once you are at the top of the chat, open the developer tools (ctrl-shift-i in Chrome). Clear the errors — they clutter up the screen.

Paste the following script into the console and hit enter:

var strRunningText = "";
var collectionMessageBubbles = document.querySelectorAll('.message-body-content, .message-datetime');

for (let objMessageBubble of collectionMessageBubbles) {
     strRunningText = strRunningText + "\n" + objMessageBubble.textContent;
}

console.log(strRunningText);

If you have a long series of chat messages, you’ll get some of the chat displayed and a button to copy the entire chat content to your clipboard.

If you have a shorter series of chat messages, you’ll have the text of the chat in the console window. You can highlight it and copy/paste the text elsewhere.

There’s a little cleanup that can be done – the content of the message-datetime elements have a beginning and trailing newline character along with a bunch of whitespace. You can get a cleaner timestamp (but, if you embed code within your messages … which I do … the code sections have a lot of extraneous newlines):

var strRunningText = "";
var collectionMessageBubbles = document.querySelectorAll('.message-body-content, .message-datetime');

for (let objMessageBubble of collectionMessageBubbles) {
     strRunningText = strRunningText + "\n" + objMessageBubble.innerText;
}

console.log(strRunningText);

The same JavaScript works in the Teams channel conversations except the channel conversations tend to be longer … so you’re going to export some subset of the channel conversation around where you are in the web browser.

* I realized, during a multi-person chat last week, that I don’t grab the name of the individual who posted the message to the chat. Grabbing the person’s name should just entail adding the identifier for the name element into the querySelectorAll list … but that’s not something I’ve had an opportunity to check yet.

Exporting Microsoft Stream Transcript

Microsoft has changed the interface on Stream slightly, so my code to export the Stream transcript needed an update. since copy/paste doesn’t seem to work for everyone, the script is also available as a text file.

var objTranscriptionLines = window.angular.element(window.document.querySelectorAll('.transcript-list')).scope().$ctrl.transcriptLines;
var strRunningText = "";
for(var i = 0; i < objTranscriptionLines.length; i++){
    if( objTranscriptionLines[i] ){
        var strLineText = objTranscriptionLines[i].eventData.text;
        strRunningText = strRunningText + "\n" + strLineText;
    }
}
console.log(strRunningText);

HTML Checkbox Adding and Removing Table Row

Here’s the JavaScript code I ended up using to add and remove rows from a table based on a checkbox selection (and only allowing one checkbox per group to be selected). The biggest change is that I added a name and ID to my TR for easier identification. 

$(document).on("change", "input[type='checkbox']", function () {
    var $objCheckbox = $(this);
    if ($objCheckbox.is(":checked")) {			// When checked, deactivate other checkboxes and add to sets to create table
        var objCheckboxGroup = "input:checkbox[tableselector='" + $objCheckbox.attr("tableselector") + "']";

        $(objCheckboxGroup).prop("disabled", true);
        $objCheckbox.prop("disabled", false);		// Allow checked box to be unchecked

        addSetToCreatingTable($objCheckbox.attr("setname"), $objCheckbox.attr("settype"), $objCheckbox.attr("goodcircuits") + "|" + $objCheckbox.attr("value"), $objCheckbox.attr("tableselector"));

    }
    else {							// When unchecked, active checkboxes and remove from sets to create table
        var objCheckboxGroup = "input:checkbox[name='" + $objCheckbox.attr("name") + "']";
        $(objCheckboxGroup).prop("disabled", false);	

        $("#" + $objCheckbox.attr('tableselector')).each(function(){ $(this).remove();})
}
});

HTML Checkboxes To Add and Remove Values from Table

I am creating a web form where the user input sometimes cannot be resolved to a unique value. In those cases, I present the user a set of checkboxes with the options (yes, a radio button makes more sense because you can only select one. But I hate that radio buttons change selection when you hit an arrow key.).

When a selection is made, I need to (1) deactivate the checkboxes for the other options when a checkbox in the group is selected and (2) add information to a data table that is used in subsequent activities.

When a selection is cleared, I need to (1) activate the checkboxes within the group and (2) remove the right row from the data table.

Below is the HTML code that achieves this. Now I just need to map this test page into the actual web code. There’s a post with the actual code I ended up using in production too.

<html>
<head><title>Adding And Removing From Table</title></head>
<body>

<div name="divCircuitClarifications" id="divCircuitClarifications">
  <h3>My-Sample-Circuit-A</h3>
    <input type="checkbox" value="123" tableselector="SampleCircuitA" name="SampleCircuitA[]" /><label>123</label>
    <input type="checkbox" value="234" tableselector="SampleCircuitA" name="SampleCircuitA[]" /><label>234</label>
    <input type="checkbox" value="345" tableselector="SampleCircuitA" name="SampleCircuitA[]" /><label>345</label>
<P>
  <h3>My-Sample-Circuit-B</h3>
    <input type="checkbox" value="abc" tableselector="SampleCircuitB" name="SampleCircuitB[]" /><label>abc</label>
    <input type="checkbox" value="bcd" tableselector="SampleCircuitB" name="SampleCircuitB[]" /><label>bcd</label>
    <input type="checkbox" value="cde" tableselector="SampleCircuitB" name="SampleCircuitB[]" /><label>cde</label>
<P>
  <h3>My-Sample-Circuit-C</h3>
    <input type="checkbox" value="Cabc" tableselector="SampleCircuitC" name="SampleCircuitC[]" /><label>abc</label>
    <input type="checkbox" value="Cbcd" tableselector="SampleCircuitC" name="SampleCircuitC[]" /><label>bcd</label>
    <input type="checkbox" value="Ccde" tableselector="SampleCircuitC" name="SampleCircuitC[]" /><label>cde</label>
<P>
</div>

<div id="divResultTable" name="divResultTable">
<table border="1" padding="1" name="tableSetsToCreate" id="tableSetsToCreate">
	<thead><tr><th>ECCKT</th><th>Circuit ID</th></tr></thead>
	<tbody></tbody>
</table>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
	$("input:checkbox").on('click', function() {
	  	var $objCheckbox = $(this);
	  	if ($objCheckbox.is(":checked")) {			// When checked, deactivate other checkboxes and add to sets to create table
	    		var objCheckboxGroup = "input:checkbox[tableselector='" + $objCheckbox.attr("tableselector") + "']";
	
	    		$(objCheckboxGroup).prop("disabled", true);
	    		$objCheckbox.prop("disabled", false);		// Allow checked box to be unchecked

	                var strTableRowString = '<tr><td>' + $objCheckbox.attr("tableselector") + '</td><td>' + $objCheckbox.val() + '</td>\n';
	                $('#tableSetsToCreate tbody').append(strTableRowString);
	  	}
		else {							// When unchecked, active checkboxes and remove from sets to create table
	    		var objCheckboxGroup = "input:checkbox[name='" + $objCheckbox.attr("name") + "']";
	    		$(objCheckboxGroup).prop("disabled", false);	

			$("tr:contains('" + $objCheckbox.attr('tableselector') + "')").each(function(){ $(this).remove();})
  		}
	});
</script>
</body>

Filtering HTML Drop-down

I’ve got a few drop-downs that I’ve added filtering on the drop-down – start typing and you’ll see the options that match your string. But I needed to mirror an application functionality where you select a category and are then presented with a list of options that fit the category.

Here’s the drop-down selector for the categories

    echo "      <div class=\"row\">\n";
    echo "          <div class=\"col-md-12 col-sm-12 col-lg-12 col-xs-12\">\n";
    echo "              <div class=\"row\">\n";
    echo "                  <div class=\"row\">\n";
    echo "                      <div class=\"col-md-2 col-sm-2 col-lg-2 col-xs-2 text-left\">\n";
    echo "                          <span><strong>Animal Category:</strong></span>\n";
    echo "                      </div>\n";
    echo "                      <div class=\"col-md-10 col-sm-10 col-lg-10 col-xs-10 text-left form-group\">\n";
    echo "                          <select name=\"strAnimalType\" id=\"strAnimalType\" readonly/> \n";
    echo "                              <option class=\"NoSelection\" value=\"-----\">-----</option>\n";
    echo "                              <option class=\"Feline\" value=\"201\">Feline</option>\n";
    echo "                              <option class=\"Canine\" value=\"202\">Canine</option>\n";
    echo "                              <option class=\"Equine\" value=\"203\">Equine</option>\n";
    echo "                              <option class=\"Other\" value=\"204\">Other</option>\n";
    echo "                          </select>\n";
    echo "                      </div>\n";
    echo "                  </div>\n";

And here’s the drop-down selector I want to filter based on category — there are a lot of options. The class for each option includes the category selectors that will include the option in the drop-down. 

    echo "      <div class=\"row\">\n";
    echo "          <div class=\"col-md-12 col-sm-12 col-lg-12 col-xs-12\">\n";
    echo "              <div class=\"row\">\n";
    echo "                  <div class=\"row\">\n";
    echo "                      <div class=\"col-md-2 col-sm-2 col-lg-2 col-xs-2 text-left\">\n";
    echo "                          <span><strong>Pet Breed:</strong></span>\n";
    echo "                      </div>\n";
    echo "                      <div class=\"col-md-10 col-sm-10 col-lg-10 col-xs-10 text-left form-group\">\n";
    echo "                          <select name=\"strPetBreed\" id=\"strPetBreed\" readonly/> \n";
    echo " <option value=\"-----\" class=\"selectors All\">-----</option>\n";
    echo " <option value=\"101\" class=\"selectors Feline\">Domestic Shorthair</option>\n";
    echo " <option value=\"1275\" class=\"selectors Feline\">Flame Point Siamese</option>\n";
    echo " <option value=\"1069\" class=\"selectors Equine\">Arabian</option>\n";
    echo " <option value=\"1071\" class=\"selectors Equine\">Tennessee Walking Horse</option>\n";
    echo " <option value=\"1072\" class=\"selectors Other\">Chicken</option>\n";
    echo " <option value=\"1073\" class=\"selectors Other\">Snake</option>\n";
    echo " <option value=\"1074\" class=\"selectors Canine\">Australian Shepherd</option>\n";
    echo " <option value=\"1075\" class=\"selectors Feline\">Burmese</option>\n";
    echo " <option value=\"1076\" class=\"selectors Canine\">Siberian Husky</option>\n";
    echo " <option value=\"1077\" class=\"selectors Feline\">Sphinx</option>\n";
    echo " <option value=\"1078\" class=\"selectors Other\">Rabbit</option>\n";
    echo "                          </select>\n";
    echo "                      </div>\n";
    echo "                  </div>\n";
    echo "              </div>\n";
    echo "          </div>\n";
    echo "      </div>\n";

In the JavaScript, I’ve got a quick function that repopulates the rather long drop-down menu based on the selected category

// Filter strPetBreed options based on strAnimalCategory value
$(document).ready(function () {    
    var allOptions = $('#strPetBreedoption')
    $('#strAnimalCategory').change(function () {
        $('#strPetBreed option').remove()

        var classN = $('#strAnimalCategory option:selected').prop('class');
        var optsCat = allOptions.filter('.' + classN);
        $.each(optsCat, function (i, j) {
            $(j).appendTo('#strPetBreed');
        });

        var optsAll = allOptions.filter('.All');
        $.each(optsAll, function (i, j) {
            $(j).prependTo('#strPetBreed');
        });

    });
});

Since it’s possible there are options you’d want to always appear (in my case, it’s just the “—–” to indicate no selection has been made … but there could be real items that fall into each category too), I’ve got an “All” classification that will get popped onto the top of the list.

Adding CSS To Header

I am currently working on a website that sources in a header and footer — not an uncommon thing to do as this ensures a consistent look across the site. The lead-in code starts head, closes head, starts body, and defines the common page elements (nav bar, etc). The footer then defines some more common page elements and closes body. This approach creates a problem when you want to add CSS. Now you could use style tags within the HTML, but I would rather not have the same style definition twenty times. Yeah, I’d make a single variable out of it and print the style-definition-variable twenty times … but I’d rather have my CSS sourced in from a style-sheet file.

Since I’m already using jQuery to dynamically append elements — add table rows as data is pulled back from the server — I wondered if you could append something to the header. Yes, you can!

/**
* This function appends a CSS file to the document head
*
* @param {string} strFileName Path to CSS file
* @return n/a
*
* @example
*
* loadCSSStylesheetToHead('/path/to/file.css')
*/
function loadCSSStylesheetToHead(strFileName){
var file = document.createElement("link");
file.setAttribute("rel", "stylesheet");
file.setAttribute("type", "text/css");
file.setAttribute("href", strFileName);
document.head.appendChild(file);
}

This allows me to after-the-fact add css from a style-sheet file into the document head.

Displaying An Image Tooltip

JQuery developers seem to have put a lot of effort into filtering HTML components out of tooltips … which, as someone who visits a website … is A Good Thing. But what’s a good security consideration can be a massive pain when building a website. I have a form which takes an internal ID number, and I have an image showing people how to find that internal ID number. I want a little question mark after the field name that pops up the image as a tooltip on mouseover events. And clears the image on mouseout.

JavaScript:

// Show finding equipment ID image "tooltip" 
$('#ShowEquipmentIDTip').hover(
	function(){
        	$('#FindingEID').css({ "display": "block" });
    	}
	,function(){
        	$('#FindingEID').css({ "display": "none" });
    	}
);
HTML:
<div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 text-left">
	<span><strong>Equipment ID(s): <a id="ShowEquipmentIDTip" href="#">(?)</a></strong></span>
	<div id="FindingEID" style="position: relative;top: 20;left: 60;width: 100%;height: 100%;z-index:99;display:none"><img src="/groomsGenerateCircuitReport/images/Tip-FindingEquipmentID.png" /></div>
</div>

Moving your mouse over the ShowEquipmentIDTip a element displays the div which contains my image “tooltip” and moving the mouse away sets the display back to none.